Overview – Stacked Charts

Comments 13

1. I’m running into an issue with multiple timelines on a normal (non-100) stacked area line chart. Let’s say I have 2 lines. Line one has three datapoints at {x: “02/11/2015 08:00:00”, y: 10}, {x: “02/11/2015 08:00:05”, y: 20}, and {x: “02/11/2015 08:00:10”, y: 30}. Line two has two datapoints at {x: “02/11/2015 08:00:01”, y: 0} and {x: “02/11/2015 08:00:06”, y: 0}.

   In this example, not every line has the same x points. So, instead of showing a continually increasing line one (going from 10-30) and stacking over the zero values of line two, line one sinks to 0 at “08:00:01”, jumps to 20 at “08:00:05”, back to 0 at “08:00:06”, and finally to 30 at “08:00:10.”

   Am I missing a setting or is this working as intended?

   • Joseph,

     In case of stacked charts you need to have same x values in all the series or else it is not possible to stack them one above the other. Hence we consider x values present in all series combined because of which first series’ y value at x = “02/11/2015 08:00:01″ becomes zero and second series’ y value at x = “02/11/2015 08:00:00″ becomes zero so that the series can be stacked.

     Right way to use stacked charts is to have dataSeries with same x values.

     • Thank you for the reply and I understand. However in this implementation, multiple servers are reporting information at a frequency of about 5 seconds. The timestamps will not be exactly the same. I do not want to falsify x values for a series. I will have to go in a different direction. Thank you again for your comments.

2. I want to reduce the width of the bar…… how can i make it???

   • vivek,

     It is not possible yet but we will consider this in future Versions.

3. Is is possible to have stacked multi series column chart?

4. on mouse over event. percentage is showing in tooltip. i there any method to show the percentage in chart itself for every stacks.

   • Debasish,

     You can use indexLabel: “#percent” to show the percentage in every stack. Here is an example.

5. sir i wand to change border colour for stacked chart 100 .it is possible to change that

   • Eswaran,

     Sorry, its not possible to set border to dataPoints. However you can use bevelEnabled property in stackedColumn100 and stackedBar100.

6. i have two datas and showing two chart in one page but when i use it your code showing one chart proper but second not showing. any one can help me. my code is here.

   function func_make_chart(d1, d2){
   var option = {
   title:{
   text: “Sales Per Year”
   },
   axisY:{
   title:””
   },
   animationEnabled: true,
   width: 450,
   height: 200,
   data: [ {
   type: “stackedColumn”,
   toolTipContent: “{label}{name}: {y}”,
   name: “Before”,
   showInLegend: “true”,
   dataPoints: d1[0]
   }, {
   type: “stackedColumn”,
   toolTipContent: “{label}{name}: {z}”,
   name: “After”,
   showInLegend: “true”,
   dataPoints: d2[0]
   }],
   legend:{
   cursor:”pointer”,
   itemclick: function(e) {
   if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
   e.dataSeries.visible = false;
   }
   else
   {
   e.dataSeries.visible = true;
   }
   //chart.render();
   }
   }
   }
   return option;
   }

   function fn_get_sale_data(){
   var start_date = $(“#start_date”).val();
   var end_date = $(“#end_date”).val();
   var filterReport = $(“#filterReport”).val();
   var form_data ={start_date:start_date,end_date:end_date,filterReport:filterReport};
   $.ajax({
   url:”/modules/sales/ajax/ajax_sales_yearly_chart_report_table.php?filterReport=”+filterReport+””,
   type: “post”,
   data: form_data,
   success:function(result){
   var obj = JSON.parse(result);

   var d1 = obj[“aaData”][“total”][“tilldate”];
   var d2 = obj[‘aaData’][‘total’][‘complete’];

   if($(d1).is(‘object’)==false){ d1 = [d1]; }
   if($(d2).is(‘object’)==false){ d2 = [d2]; }

   var option1 = func_make_chart(d1,d2);

   var chart1 = new CanvasJS.Chart(‘sparkline_total_sales’,option1);
   chart1.render();

   var d3 = obj[“aaData”][“other”][“tilldate”];
   var d4 = obj[‘aaData’][‘other’][‘complete’];
   if($(d3).is(‘object’)==false){ d3 = [d3]; }
   if($(d4).is(‘object’)==false){ d4 = [d4]; }

   var option2 = func_make_chart(d3,d4);

   var chart2 = new CanvasJS.Chart(‘sparkline_123wc’,option2);
   chart2.render();

   }
   });
   }

   • Vijay,

     To debug, please check the types of assigned x and y values (it should not be string). And can you provide a sample JSON of your ajax request, so that we can look into it and help you out.

     • ok, thanks sanjoy, i checked it and found that x values coming in string format. so it’s create problem. now solved. thank’s