Home forums Using CanvasJS Problem when re-rendering chart (negative scale)

This topic contains 4 replies, has 2 voices, and was last updated by  Anjali 2 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #7469

    Niklas
    Participant

    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:

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

    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!

    #7472

    Anjali
    Participant

    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

    #7480

    Niklas
    Participant

    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);
         });
    }
    
    #7481

    Niklas
    Participant

    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.

    #7486

    Anjali
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.