Hi!
I’m new to CanvasJS, and I’m trying to create a line plot with multiple lines. My current code doesn’t work, any recommendations?
var version=3;
console.log(version);
var utm = "+proj=utm +zone=17";
var wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
var fulldata=[];
var abby = [];
var kyle = [];
var dataSeries = { type: "line" };
var abby = function() {
var dataPoints = [];
d3.csv('Abby.csv',function(results){
results.forEach(function(d){d.time=parseFloat(d.Day)+(parseFloat(d.Hour)/24)+((parseFloat(d.Minute)/60)/24);});
results.forEach(function (d){dataPoints.push({
x: d.time,
y: parseFloat(d.Height)
});
});
var data=[];
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
abby=data;
console.log(data);
});
};
var kyle = function() {
var dataPoints = [];
d3.csv('Kyle.csv',function(results){
results.forEach(function(d){d.time=parseFloat(d.Day)+(parseFloat(d.Hour)/24)+((parseFloat(d.Minute)/60)/24);});
results.forEach(function (d){dataPoints.push({
x: d.time,
y: parseFloat(d.Height)
});
});
var data=[];
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
kyle=data;
});
};
abby();
console.log(fulldata);
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
title:{
text: "Heights!"
},
animationEnabled: true,
axisX:{
title: "Time",
labelAngle: 30
},
axisY :{
title: "Height (m)",
includeZero:true
},
data: [abby,kyle]
});
chart.render();
};
.
