Deal all, se canvas to plot some graphs dynamically.
I have a http server writes data to txt file given a certen intervals.
My text file look like:
{id: 1, logs: 1 3 2}
{id: 1, logs: 2 7 5}
{id: 2, logs: 1 4 3}
{id: 1, logs: 1 3 2}
{id: 3, logs: 2 7 5}
{id: 1, logs: 3 7 4}
{id: 2, logs: 1 3 2}
{id: 1, logs: 2 7 5}
{id: 3, logs: 3 7 4}
for each id I want to plot the dynamic graph as column graph where for example : logs: start=1 end=3 widthof the column=end-start
I don’t know how to deal with this issue,I read some documents but none was helpful.
How can I modify the following example to meet my requirments and have diiferent graphsS?
<!DOCTYPE html>
<html>
<head>
<title>Chart using txtfile Data</title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.get("data.txt", function(data) {
var xVal = 0;
var allLines = data.split(' ',\n');
var dps = [];
for(var i=0; i< allLines.length; i++) {
xVal +=.25;
dps.push({x : xVal, y: Number(allLines[i])});
}
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "RPR"
},
data: [{
type: "column",
dataPoints : dps
}]
});
chart.render();
},'text');
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>