Home › Forums › Chart Support › Problem when re-rendering chart (negative scale) › Reply To: Problem when re-rendering chart (negative scale)
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); }); }