Hello,
I’m working on 2-series line chart but i’m not able to get it properly. Plz help me to come out of this -
index.html (1.7 KB)results.csv (175.8 KB)
It is not easy to test the index.html file because the CSV file is missing or not being loaded.
Just attached csv file. If i’m displaying singale line it is working fine but 2 lines it is not showing just like in picture -
1 Like
Many thanks for the CSV file.
This is not a PHP problem and I have asked a member of staff to move the topic to the JavaScript section.
Thanks John
1 Like
Can you return two separate arrays from a single function in JS, in the way that you have done? I know in many other languages, the return keyword also halts execution of the function, so your second return in getDataPointsFromCSV() would just not execute. I can’t think of how you’d deal with the second returned array in the calling line, either.
return dataPoints0;
return dataPoints1;I’d probably pass in a second parameter to the function to indicate which set of figures I wanted to chart, and just have the function build a single array of whichever is needed, and return that.
Hello,
I tried this with single line and single return function and it was working properly but for multiple lines or two lines getting issues. don’t know much about javascript as i’m new in that. It’ll be helpful if you can give me some suggestions.
Thanks in advance for your help.
I don’t know much JS myself, but I’d probably do something like this:
<!DOCTYPE html>
<html>
<head>
<title>Chart using XML Data</title>
<script type="text/javascript" src="http://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var dataPoints0 = [];
function getDataPointsFromCSV(csv, field) { // add this second parameter
var dataPoints0 = csvLines = points = [];
csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 0; i < csvLines.length; i++)
if (csvLines[i].length > 0) {
points = csvLines[i].split(",");
dataPoints0.push({
x: parseFloat(points[1]),
y: parseFloat(points[field]) // use the parameter to decide which field to push
});
}
return dataPoints0;
// return dataPoints1; - remove this line, as the line before it stops it working
}
$.get("results.csv", function(data) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart from CSV",
},
data: [{
type: "line",
dataPoints: getDataPointsFromCSV(data,3),
backgroundColor: "rgba(153,255,51,0.4)"
},{
type: "line",
dataPoints: getDataPointsFromCSV(data,4),
backgroundColor: "rgba(255,153,0,0.4)"
}]
});
chart.render();
});
}
</script>
</head>
<body>
<div id="chartContainer" style="width:100%; height:600px;"></div>
</body>
</html>Perhaps someone who knows more could comment. The above produces a chart with two lines on it, but I don’t know whether the numbers are correct.
The note about return not being able to work twice might not be relevant, because you declare them as global variables outside the function. So you could just call getDataPointsFromCSV once, then use the arrays directly rather than calling the function later on. I think.
Want to ask you one more thing that is - In my csv i have 5 column and m using 3columns here 2 for line series one for x axis. if i want to use them for particular values.
Here is my csv and m using 2,4 & 5 column what i want is i have particular value of ap_mac and just for that value i want to create graph. Let suppose first value of ap_mac is 
this values repeats 24 times in csv so it will just plot for those 24 and leave others.is it possible??
Yes, that’s easily possible. If you know the value that you want to select, you could pass it in as a parameter to the function, and change that to only select for that value. Something like this:
function getDataPointsFromCSV(csv, field, mac_to_get) { // add this third parameter
var dataPoints0 = csvLines = points = [];
csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 0; i < csvLines.length; i++)
if (csvLines[i].length > 0) {
points = csvLines[i].split(",");
if (points[2] == mac_to_get) { // add this if() so we only include data that matches column 2
dataPoints0.push({
x: parseFloat(points[1]),
y: parseFloat(points[field]) // use the parameter to decide which field to push
}
});
}
return dataPoints0;
}
and then call it like this:
getDataPointsFromCSV(data, 3, "36.222.19.4")I guess you could probably also return the distinct list of values for that column and then populate a drop-down on your page, to allow the user to select which value they want to see a graph for.
As you create the dataPoints0 array as a global outside the function, there’s actually no need to return it from the function. You could go back to your original code layout which creates the two arrays, and then call the GetDataPoints function before you render the chart. Then instead of calling the function and using the returned array from it in your charting code, you could just refer directly to the array. That would also allow you to add a third array containing the distinct values of column 2 if you wanted to. The issue in the original place where it didn’t draw anything was because you’d changed the parameter names in the charting code to add the ‘0’ and ‘1’ on the end, and those aren’t valid parameter names.
Thanks,
It is working!!
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.