Problem when re-rendering chart (negative scale)

[Niklas]

Hi,

I am fetching a JSON object for all my data and it works fine. But when I update it, the chart sometimes gives me a faulty scale (see the negatives (not starting from zero)).

Can you please tell me how to fix this?

Here is my Javascript code to render the chart:

function reportRender(date_from, date_to) {
     var fetchURI = '?dateFrom=' + date_from + '&dateTo=' + date_to;
     var rdataByRegion = [];

     var chartByRegion = new CanvasJS.Chart("chartContainer_byRegion", {
          title:{
               text: "Certificates by region",
               fontColor: "#3399cc"
          },
          colorSet:  "AtlasColorSet",
          zoomEnabled: true,
          animationEnabled: true,
          axisY: {
               title: "Certificates",
               gridColor: "#3399cc",
               fontColor: "#cccccc"
          },
          legend: {
               fontSize: 15,
               fontFamily: "Arial",
               horizontalAlign: "left",
               verticalAlign: "center"
          },
          axisX: {
               title: "Regions",
               gridColor: "#3399cc",
               fontColor: "#cccccc"
          },
          data: rdataByRegion
     });

     chartByRegion.render();
     $('.canvasjs-chart-credit').hide();

     $.getJSON("./reportdata.php" + fetchURI, function(reportdata) {
          var chartByRegion = new CanvasJS.Chart("chartContainer_byRegion", {
               title:{
                    text: "Certificates by region",
                    fontColor: "#3399cc"
               },
               colorSet:  "AtlasColorSet",
               zoomEnabled: true,
               animationEnabled: true,
               axisY: {
                    title: "Certificates",
                    gridColor: "#3399cc",
                    fontColor: "#cccccc"
               },
               legend: {
                    fontSize: 15,
                    fontFamily: "Arial",
                    horizontalAlign: "left",
                    verticalAlign: "center"
               },
               axisX: {
                    title: "Regions",
                    gridColor: "#3399cc",
                    fontColor: "#cccccc"
               },
               data: reportdata.by_region
          });

          chartByRegion.render();
          $('.canvasjs-chart-credit').hide();

          $('#rpDTP_dateFrom').val(reportdata.date_from);
          $('#rpDTP_dateTo').val(reportdata.date_to);
          $('.strDateFrom').html(reportdata.date_from);
          $('.strDateTo').html(reportdata.date_to);                    
     });
}

reportRender('2009-01-01', '2020-01-01'); // Date from - to

This is how it looks on initial run when fetching values between 2009-01-01 and 2020-01-01.
It is just as expected and looks nice:

http://i.imgur.com/w6LoSQ8.png

But here, when changing date to a more narrow date range that has less data, it comes up like this:

http://i.imgur.com/gx7RYA5.png

To change to second output, I am running the function reportRender() again with a new date range,
so there is a new AJAX call made to the backend fetching the new data as requested, and the chart function .render()
is called again (as you see in code above).

Questions:

1. Is this the best way doing this? To re-render the chart everytime?
2. Why are the range messed up when the chart is fed with less data? Isn’t it completely re-rendered?
3. How can I get the desired results?

Thank you in advance!

[Anjali]

Niklas,

After rendering the chart you can update it by changing/updating its options property. We do not suggest creating new chart each time. You can update chart as shown below.

`chartObject.options.data[0].dataPoints = [array];
chartObject.render(); `

and please refer to “Alternate way of setting / updating data” section of this article.

__
Anjali

[Niklas]

Hi Anjali,

I do not understand how to accomplish this using my code as I do more than just setting dataPoints in my JSON.

Here is my full code. So if I understand you correctly I should move the part of where I am creating the chart from outside the AJAX call, and only manipulate the dataPoints array from the AJAX return. Correct?

But as you can see I am adding the entire data object to the chart from my JSON (gdataByRegion object).

I have tried with:

chartObject.options.data = gdataByRegion; but that does not work.

window.onload = function () {
     CanvasJS.addColorSet("AtlasColorSet", [
          "#0096c3",
          "#7c2167",
          "#fdc300",
          "#cbdeec",
          "#e7eff6",
          "#3EA0DD",
          "#F5A52A",
          "#23BFAA",
          "#FAA586",
          "#EB8CC6",
     ]);

     reportRender('2009-01-01', '2020-01-01');
}

function reportRender(date_from, date_to) {
     var fetchURI = '?dateFrom=' + date_from + '&dateTo=' + date_to;

     $.getJSON("./reportdata.php" + fetchURI, function(reportdata) {
          var gdataByRegion = reportdata.by_region;
          var gdataByCertType = reportdata.alldata.certdata.certdata_totals;
          var regiondataCert = reportdata.alldata.certdata.certificates;

          var cTypeData = [];
          $.each(gdataByCertType, function (certType, certCount) {
               var certPercentage = Math.floor((parseInt(certCount) / parseInt(reportdata.staffcount_total)) * 100);

               cTypeData.push({
                    label: certType,
                    indexLabelFontColor: "black",
                    indexLabel: "{y} (" + certPercentage + "%)",
                    y: certCount
               });
          });

          var gdataByCertType = [{
                    type: "column",
                    dataPoints: cTypeData
          }]

          console.log(reportdata);

          var chartByRegion = new CanvasJS.Chart("chartContainer_byRegion", {
               colorSet:  "AtlasColorSet",
               zoomEnabled: true,
               animationEnabled: true,
               axisY: {
                    title: "Certificates",
                    gridColor: "#3399cc",
                    fontColor: "#cccccc",
                    includeZero: true,
                    titleFontSize: 12
               },
               legend: {
                    fontSize: 15,
                    fontFamily: "Arial",
                    horizontalAlign: "left",
                    verticalAlign: "center"
               },
               axisX: {
                    title: "Regions",
                    gridColor: "#3399cc",
                    fontColor: "#cccccc",
                    titleFontSize: 12
               },
               data: gdataByRegion
          });

          var chartByCertType = new CanvasJS.Chart("chartContainer_byCertType", {
               colorSet:  "AtlasColorSet",
               zoomEnabled: true,
               animationEnabled: true,
               axisY: {
                    title: "Certificates",
                    gridColor: "#3399cc",
                    fontColor: "#cccccc",
                    includeZero: true,
                    titleFontSize: 12
               },
               legend: {
                    fontSize: 15,
                    fontFamily: "Arial",
                    horizontalAlign: "left",
                    verticalAlign: "center"
               },
               axisX: {
                    title: "Certificate Type",
                    gridColor: "#3399cc",
                    fontColor: "#cccccc",
                    titleFontSize: 12
               },
               data: gdataByCertType
          });

          chartByCertType.render();
          chartByRegion.render();

          $('.canvasjs-chart-credit').hide();

          var table = '';
          table  = '<table class="dtable_stats">';
          table += '  <tr>';
          table += '    <td></td>';

          $.each(reportdata.alldata.certdata.certdata_totals, function(certCaption, certCount) {
               table += '    <td>' + certCaption + '</td>';
               table += '    <td>%/Tot</td>';
          });

          table += '    <td>Staff count<br />(calculated)</td>';
          table += '    <td>%/Tot</td>';
          table += '    <td>Staff count<br />(manual)</td>';
          table += '    <td>%/Tot</td>';
          table += '  </tr>';

          var rID = 0;
          var i = 0;
          $.each(regiondataCert, function(regionID, regiondata) {
               rID++;

               if (i % 2 == 0) { var trClassName = 'dtable_stats_even'; } else { var trClassName = 'dtable_stats_odd'; }

               table += '  <tr class="' + trClassName + '" id="dcTr_' + rID + '">';
               table += '    <td>' + regionID + '</td>';

               var d = 0;
               $.each(regiondata.certdata_totals_region, function(certCaption, certCount) {
                    var certPercentage = Math.floor((parseInt(certCount) / parseInt(regiondata.staffcount_totals)) * 100);

                    if (d % 2 == 0) { var tdClassName = 'dtable_stats_tdA'; } else { var tdClassName = 'dtable_stats_tdB'; }

                    table += '    <td class="' + tdClassName + '">' + certCount + '</td>';
                    table += '    <td class="' + tdClassName + '">' + certPercentage + '%</td>';
                    
                    d++;
               });

               table += '    <td>' + regiondata.staffcount_totals + '</td>';
               table += '    <td>0%</td>';
               table += '    <td>' + regiondata.staffcount_totals_manual + '</td>';
               table += '    <td>0%</td>';
               table += '  </tr>';

               table += '  <tr id="dcTr_' + rID + '_ccdata" style="display: none">';
               table += '    <td>Sweden</td>';

               $.each(regiondata.certdata_totals_region, function(certCaption, certCount) {
                    table += '    <td>0</td>';
                    table += '    <td>0%</td>';
               });

               table += '    <td>1038</td>';
               table += '    <td>14%</td>';
               table += '    <td>1038</td>';
               table += '    <td>14%</td>';
               table += '  </tr>';
               
               i++;
          });
          
          table += '</table>';

          $('#dataContainer_byRegion').html(table);

          $('#dataContainer_byRegion tr').click(function() {
               var rowID = $(this).attr('id');
               $("#" + rowID + "_ccdata").toggle(300);
          });

          $('#rpDTP_dateFrom').val(reportdata.date_from);
          $('#rpDTP_dateTo').val(reportdata.date_to);
          $('.strDateFrom').html(reportdata.date_from);
          $('.strDateTo').html(reportdata.date_to);                    
     })
     .done(function() {
          $('#btnGenerateReport').html('Generate');
          $('#btnGenerateReport').prop('disabled', false);
     });
}

[Niklas]

OK so I have now made it like this, but the problem still exists that my ZERO point is shifted so the scale starts from a negative value all of a sudden! (see images in post 1).

This is my code now:

function reportRender(date_from, date_to) {
     var fetchURI = '?dateFrom=' + date_from + '&dateTo=' + date_to;

     $.getJSON("./reportdata.php" + fetchURI, function(reportdata) {
          var gdataByRegion = reportdata.by_region;
          var gdataByCertType = reportdata.alldata.certdata.certdata_totals;
          var regiondataCert = reportdata.alldata.certdata.certificates;

          var cTypeData = [];
          $.each(gdataByCertType, function (certType, certCount) {
               var certPercentage = Math.floor((parseInt(certCount) / parseInt(reportdata.staffcount_total)) * 100);

               cTypeData.push({
                    label: certType,
                    indexLabelFontColor: "black",
                    indexLabel: "{y} (" + certPercentage + "%)",
                    y: certCount
               });
          });

          var gdataByCertType = [{
                    type: "column",
                    dataPoints: cTypeData
          }]

// AS YOU CAN SEE I AM NOW JUST ADDING THE DATA HERE AS YOU SUGGESTED!
          chartByCertType.options.data = gdataByCertType;

// JUST DEBUG INFO TO SEE THAT DATA OBJECT IS POPULATED CORRECTLY (WHICH IT IS)
          console.log(chartByCertType);

          chartByCertType.render();
     });
}

So the question still remains: Why is the scale all of a sudden starting from negative values and not from ZERO as supposed to? It looks really weird.

A hint is that when I run the data first, this is how the data looks like for example:

Count A: 100
Count B: 200
Count C: 300

When I then filter on another date range the data might look like this:

Count A: 50
Count B: 20
Count C: 0

Count C will not be shown in the chart at all because it is a zero value. I think THIS is the problem, that as soon as a value is higher than zero first, it is all good, but when it goes to zero this bug appears.

[Anjali]

Niklas,

We are not able to reproduce the issue with given data. Can you please create a jsfiddle with sample data which reproduces the issue so that we can have a look? Till then, as a quick fix you can try setting axis minimum to zero.

__
Anjali