[sid]

I am currently in need for a way to create graph on the fly. But using I canvasJS, I need to plot graphs from the beginning. Which mean I need all dataPoints at once. The below is my eg.

data.csv at 9:00 am
Time,Value
9:00,10

data.csv at 9:05 am
Time, Value
9:05,20

data.csv at 9:10 am
Time,Value
9:10,30

and so on….

Currently I have to keep on saving each data point and plot it from starting. However, there should be a way to read this file and append it to the graph.
Would highly appreciate if you could reply on the same. I hope my requirement is clear enough.

[sid]

Thanks Anjali , could you please also help me with.
1. I need to know if there could be a way that graph is also (appended) say after every 2 minutes. Increment already plotted graph (and dont do whole work of plotting from beginning again). Basically it should store already plotted points and avoid replots.I hope I’m clear with my requirement. I basically need an append funtion that pushes newer data points from csv.

2. My csv has multiple columns, say “n” , is there a way to push dataPoints from each column in a better way. Because currently i use 1 for loop for 1 column. The number of columns can be different, sometimes 2 or 3 or 10. This should be dynamic in some way.

[sid]

Anjali, thanks for your response.
Sorry for my last post, datapoints were fine but scale was very far scattered. dataPoints were in 10^6 and datapoints2 were in 10^9, which is why both were not being shown properly. (@admin:last post can be deleted). However, is there a way to automatically scale line graphs. eg. say 1 line graph has values in 10^2 and other line graph has values in 10^8 . Is there a way to show both lines on 1 graph (using scaling for y axis)

[sid]

        function processData(allText) {
                var allLinesArray = allText.split('\n');
                if(allLinesArray.length>0){
                        var dataPoints = [];
                        var dataPoints2= [];
                        for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(',');
                                dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
                        }
                        for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(',');
                                dataPoints2.push({label:rowData[0],y:parseInt(rowData[2])});
                        }
                        drawChart(dataPoints,dataPoints2);
                        

                }
        }

        function drawChart( dataPoints,dataPoints2) {
                var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                title:{
                        text: "Gati Chart"
                },
                zoomEnabled:true,
                data: [
                {
                        type: "line",
                        dataPoints: dataPoints
                },
                
                
                {
                        type: "line",
                        dataPoints: dataPoints2
                }]
                });

                chart.render();
        }

I am tring to plot 2 line graphs, using the above code I get 2 line blue for dataPoints and red for daatPoints2.But I am getting a straight line for dataPoints and correct line graph for dataPoints2, can you suggest whats wrong with my code? On hovering the blue line, it gives me correct values in tooltip but why is it coming as a straight line?

[sid]

for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(',');
                                dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
                                dataPoints.push({label:rowData[0],y:parseInt(rowData[2])});
                               //dosnot plot 2 lines,plots values but not in correct way
                        }

• This reply was modified 9 years, 7 months ago by sid.

[sid]

Thanks for such an awesome utility!.
I’m pretty new to web dev, but canvasjs has been a great motivation.
I have my data.csv regularly being updated (appended)

1. I need to know if there could be a way that graph is also (appended) say after every 2 minutes. Increment already plotted graph (and dont do whole work of plotting from beginning again). Basically it should store already plotted points and avoid replots.

2. Suppose my csv has more than 2 columns (say 10), can I plot multi line graphs by specifying column names. eg. to find correlation between 2 or more value. Line colour legeds can be taken from column names (headers)

Moving forward I would like my web page to have an option to show/hide lines. eg. by default it shows lines for all columns. (This is just an additional utility which may come handy,can be ignored for now)

AS far as my point 2 of multiple line graph is concerned, I think, we need to just send other column values in the below code. dataPoints for all columns should be passed instead.

for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(',');
                                <strong>dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});</strong>
                        }

Thanks is advance.

• This reply was modified 9 years, 7 months ago by sid. Reason: adding more details
• This reply was modified 9 years, 7 months ago by sid.