Data only Loads after window is resized

[Saulius]

Good day,

I am very new to canvas.js packages and javascript over all. I have an issue with loading data on the graphs. Graphs only gets populated when I press F12, or Mouse-Right Click and select “Inspection”, to open console. What could be causing this to happen?

`window.onload = function() {
// Total Power Data Points
var TotalPower = [];
// Total Voltage Data Points
var TotalVoltage = [];

$.getJSON(“instruments/fetchAllData.php”, function(data) {
for (var i = 0; i < data.length; i++) {
console.log(data);
TotalPower.push({
label: data[i].DoD,
x: new Date(data[i].DoD),
y: parseFloat(data[i].T_Energy_A)
});
TotalVoltage.push({
label: data[i].DoD,
x: new Date(data[i].DoD),
y: parseFloat(data[i].T_Voltage)
});
}
});

// Total Power Graph Framework
var chart = new CanvasJS.Chart(“TotalPower”, {
animationEnabled: true,
theme: “light2”,
zoomEnabled: true,
title: {
text: “Total Power usage”
},
axisX: {
valueFormatString: “YYYY/MM/DD hh-mm-ss”,
// interval: 3,
// intervalType: “week”
},

axisY: {
title: “Energy (in megawatt)”,
logarithmic: true,
titleFontColor: “#6D78AD”,
gridColor: “#6D78AD”,
labelFormatter: addSymbols
},
axisY2: {
title: “Energy (in megawatt)”,
titleFontColor: “#51CDA0”,
tickLength: 0,
labelFormatter: addSymbols
},
legend: {
cursor: “pointer”,
verticalAlign: “top”,
fontSize: 16,
itemclick: toggleDataSeries
},
data: [{
type: “line”,
markerSize: 0,
showInLegend: true,
name: “Log Scale”,
yValueFormatString: “#,##0.00 Watts”,
dataPoints: TotalPower
// dataPoints:
}],
});
chart.render();
// Total Power Graph Framework
var chart = new CanvasJS.Chart(“TotalVoltage”, {
animationEnabled: true,
theme: “red”,
zoomEnabled: true,
title: {
text: “Total Voltage usage”
},
axisX: {
valueFormatString: “YYYY/MM/DD hh-mm-ss”,
},

axisY: {
title: “Voltage”,
titleFontSize: 24,
},
data: [{
type: “area”,
yValueFormatString: “#,##0.00 Volts”,
dataPoints: TotalVoltage
}],
});
function addSymbols(e) {
var suffixes = [“”, “K”, “M”, “B”];

var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
if (order > suffixes.length – 1)
order = suffixes.length – 1;

var suffix = suffixes[order];
return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
}

function toggleDataSeries(e) {
if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}’

• This topic was modified 4 years, 8 months ago by Saulius.
• This topic was modified 2 years ago by Manoj Mohan.

[Vishwas R]

@saulius,

Please refer this documentation page for step-to-step tutorial on rendering chart with data from JSON. If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing and share it with us along with sample JSON so that we can run it locally at our end to understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS

[Saulius]

@Vishwas R

Thank you kindly for your quick response. I will follow your advice to see if anything will change. I will let you know if I am having the same issue.

Best regards,
Saulius

[Vishwas R]

Saulius,

From the code that you have shared, I observe that you are not re-rendering the chart after fetching data. Rendering chart by calling chart.render() after updating dataPoints (TotalPower & TotalVoltage) inside getJSON should work fine in this case. Try calling render method and let us know if that works for you.

If the issue still persists, kindly create JSFiddle reproducing the issue and share it with us along with sample JSON so that we can run it locally at our end to understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS

[Saulius]

Vishwas,

I have followed your recommendations as instructed and it made a difference. Thank you very much, I am very grateful for still helping with this. One graph, TotalVoltage, worked very well where TotalPower still has the same issue. It must be something that I am doing incorrectly in the code which I need to investigate further. Your recommendation definitely helped and made difference. Makes sense, when you mentioned about it.

[Saulius]

**** UPDATE ****

In combination with your advise and another solution I managed to make it work thanks to you.

So first problem was, as you pointed out, I was not rendering data after retrieving it so I used chart.render(); after getting data.

The next issue was, that only one graph was showing up instead of two. That was caused by me trying to render two graphs with one chart.render(); function instead of two. +++SOLUTION+++. So I called my two graphs chart1 and chart2, and I used this

chart1.render();
chart2.render();

to update graphs and now both graphs are working without the need of resizing window.
.

Thank you for your help, I am very pleased to choose this package, not only that it is very nice package, but support is very good too. Thank you to you and your team.

• This reply was modified 4 years, 8 months ago by Saulius.