Dynamic CSV chart

[Nick Neyland]

I have a CSV file that I want to use for the dynamic chart. I managed to import the CSV data to the chart. But when I try to make the chart dynamic, it generates all these random numbers on X axis when it is supposed to be times and the line graph was going all over the place.

This is the script:

<script type=”text/javascript”>
window.onload = function() {

var dataPoints = [];

var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
backgroundColor:”transparent”,
axisY: {
title: “MW”,
includeZero: false,
gridThickness: 0,
valueFormatString: “#”,
},
axisX: {
gridThickness: 0,
labelAngle: -90,
maximum: 15
},
data: [{
type: “line”,
markerSize: 0,
dataPoints: dataPoints
}]
});

chart.render();

var xVal = dataPoints.length + 1;
var xVal = dataPoints.length + 1;
var yVal = 100;
var updateInterval = 1000;

var updateChart = function () {

yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dataPoints.push({x: xVal,y: yVal,});

xVal++;

chart.render();

// update chart after specified time.

};
setInterval(function(){updateChart()}, updateInterval);

$.get(“./assets/csv/chart.csv”, getDataPointsFromCSV);

//CSV Format
//Year,Volume
function getDataPointsFromCSV(csv) {
var points;
var csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 1; i < csvLines.length; i++) {
if (csvLines[i].length > 0) {
points = csvLines[i].split(“,”);
dataPoints.push({
label: points[0],
y: parseFloat(points[1])
});
}
}
chart.render();
}

}
</script>
The csv file:
Col 1 Col 2

Time Utility
00:00:03 EST 422
00:00:08 EST 416
00:00:13 EST 418
00:00:19 EST 422
00:00:23 EST 416
00:00:28 EST 416
00:00:33 EST 417
00:00:39 EST 418
00:00:44 EST 422
00:00:49 EST 425
00:00:54 EST 426
00:00:59 EST 415

Please advice. Thank you!

[Vishwas R]

@nickneyland,

The dataPoints seems to be random as they are generated using random method and are not from CSV. Please take a look at this JSFiddle for Dynamic chart from CSV.

—
Vishwas R
Team CanvasJS

[Nick Neyland]

Hi Vishwas,

Thank you for your help. I tried the sample code you provided and it worked. But the only problem is that it is squeezing all the datas to the left. Is there a way to customize how much data to show? And what is the correct way I should create the csv file?
This is the data I have:
Time(X Axis) Utility (Y Axis)
00:00:03 EST 422
00:00:08 EST 416
00:00:13 EST 418
00:00:19 EST 422
00:00:23 EST 416
00:00:28 EST 416
00:00:33 EST 417
00:00:39 EST 418
00:00:44 EST 422
00:00:49 EST 425
00:00:54 EST 426
00:00:59 EST 415

Original I had it like this:
00:00:03 EST,422
00:00:08 EST,416
00:00:13 EST,418
00:00:19 EST,422
00:00:23 EST,416
00:00:28 EST,416
00:00:33 EST,417
00:00:39 EST,418
00:00:44 EST,422
00:00:49 EST,425
00:00:54 EST,426
00:00:59 EST,415

but the value was not showing properly on the X axis.

Thank you in advance!

[Vishwas R]

@nickneyland,

You can show last few set of dataPoints with the help of shift method. Please take a look at this documentation page for step to step tutorial on creating Dynamic Charts.

I would suggest you to store CSV in date-time,value format. Please take a look at this updated JSFiddle for an example with Jun 10 2019 00:00:03 EST,422 format.

—
Vishwas R
Team CanvasJS