[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.

[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);
     });
}