JSFiddle - React, Tailwind, and code Playground
HTML
<div id="chartContainer" style="height: 500px; width: 100%;"></div>
JavaScript
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints1 = [{y: 0}];
//var dataPoints1 = [];
var dataPoints2 = [{y: 0}];
var legend1="getStatsLog1_Fapistats_NumofOK";
var legend2="getStatsLog1_Fapistats_NumofERR";
var chart = new CanvasJS.Chart("chartContainer",{
zoomEnabled: true,
animationEnabled: true,
title :{
text: "Chart using Text File Data"
},
data: [{
type: "line",
showInLegend: true,
legendText: legend1,
//name: "",
dataPoints : dataPoints1
},
{
type: "line",
showInLegend: true,
legendText: legend2,
dataPoints: dataPoints2
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
var x1 = 1;
var i1 = 0;
var x2 = 1;
var i2 = 0;
var allLines1=0;
var allLines2=0;
function updateChart(file2,ip1,ip2,chartOpt,allLines)
{
$.get(file2, function(data) {
allLines = data.split('\n');
if(allLines.length > 0) {
for(; ip2< allLines.length && parseInt(allLines[ip2]) > 0; ) {
if(chartOpt)
{
dataPoints1.push({x: ip1 , y: parseInt(allLines[ip2])});
}
else
{
dataPoints2.push({x: ip1 , y: parseInt(allLines[ip2])});
//chart.options.title.text = "Value of i:" + ip1;
}
ip1 += 1;
ip2 += 1;
}
}
}
);
window.alert(file2);
chart.render();
}
//var fileName1='getStatsLog_Fapistats_NumofOK'; //'harq_ack_count.txt';
var chartNo=0;
var flag=1;
var chart1=1;
var chart2=0;
var fileName1="Graph Generation Started";
var fileArray = new Array();
$.get('ipGraph1.txt', function(data){
fileArray = data.split('\n');
fileName1=fileArray[0];
fileName2=fileArray[1];
...