Graph a CSV file

[Naveen Venugopal]

Yes you can integrate CanvasJS with csv google spreadsheet url.

[Sunil Urs]

[Update]

Now we have a Tutorial on Creating Charts from CSV Data in our documentation.

—
Sunil Urs

[petermmak]

Hi guys,

Thansk for such a great tool-set!
Works like a charm!

On to this topic I have 2 questions:
1) I’d like to use just one .CSV file to provide a lot of various datapoints to various (Types of) charts all to be displayed in one .HTML-page.
I’d lie to have a way of separating the various data-points within this one .CSV file and using a “NAME-denominator” directing the parser to the correct dataseries and hence the correct variables for the charts.

Anything like this:
CHART_1
1,10
2,20
X,Y
CHART_2
JUNE, 2500$
JULY, 2700$
X,Y
CHART_3
X,Y

2. I’d have various column/line/charts with more then one series. How do I use an external .CSV or populating the multiple data-series/datapoints.
Can that be done by elaborating on my first question with a “data-series NAME-tag” ???

Cheers,
Peter

[Vishwas R]

Peter,

Please check this jsfiddle.

[petermmak]

Vishwas,

Nice work….Only not just the answer I was actually looking for.
I’d like to have another seperator within the CSV, not only for separating the CHARTS like what you’ve just shown, but for having the option of reading multiple series of datapoints (e.q a number of line graphs) to put them into 1 chart.

Peter

[lcoulon]

Hello

I have a CSV file with datetime timestamps (in milliseconds from 1970) as X axis separed tis a comma ‘,’ and an associated Temperature value as Y axis.

ie :

1485097200000,22.5
1485098100000,23.8
1485099000000;24.2
etc …

From that kind of CSV file i would like to generate a google graph code like this :

<script type='text/javascript' src='http://www.google.com/jsapi'></script>

<script type='text/javascript'>

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Date');
    data.addColumn('number', 'Temperatures');
    data.addRows([
        [new Date(1485097200000), 22.5],
        [new Date(1485098100000), 23.8],
        [new Date(1485099000000), 24.2],
        // ...

        ]);

    var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
    chart.draw(data, {displayAnnotations: true});

    }
</script>

Would you please tell if it is possible and how i could do it, i’m newbie.
https://jsfiddle.net/99guxm3b/5/
Regards,

[MDAR_Tech]

Hi

I’ll totally admit that I’ve relied heavily on other people’s talents to create what I have right now, for which I am very grateful.

So, in the spirit of good will, I’m happy to share a zip of my files for others to expand on.

The most interesting files to look at would be temperatures.js and MB-Temps.html

Everything else shows my evolution.

I hope this goes some way to helping others.

Good luck

Stuart

http://www.mdar.eu/dl/canvasjs-csv.zip

These images show :-

The current temperature in a red line

The target temperature in blue

And heating demand in green

[pkhan]

Hi I just started following canvasjs to create graphs, I am new to canvasjs and not able to completely understand logic on how timeseries graphs can be drawn using canvasjs. I have a large csv and the format is like. This file updates through some java code every minute, I have planned a control option type form, where there ia drop down and when I click on show graph for last 5 minutes, then it should be able to draw graph from this data for the last 5 minutes and so on for 10 , 20 minutes etc. Is it possible to do in canvasjs, if yes, please whow how ?
DateTime SizeCurrent sizelast
13-06-2018 00:00 10 80
13-06-2018 00:00 10 80
13-06-2018 00:01 90 65
13-06-2018 00:01 90 65
13-06-2018 00:02 100 60
13-06-2018 00:02 100 60
13-06-2018 00:03 01 100
13-06-2018 00:03 01 100
13-06-2018 00:04 91 90

[Vishwas R]

@pkhan,

Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[SolidScorch]

Hi,

I’ve had little to no prior experience with any stuff of this sort so forgive me if I’m missing the mark somewhere. Essentially, my end goal is to produce a scatter plot with draggable data points and display the Y values somewhere below the chart (to be updated as the points are dragged). Eventually, I want to plot multiple plots with the same features on the same chart.

By exploring various forum threads I managed to string together some parts, but have been unable to read in data from a csv file in place of the dummy data in my current code.

What I have so far:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<script>
window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer",{        
  axisX:{
    minimum: 5,
    maximum: 95
  },
  title: {
    text: "Test2 with draggable scatter plot",
  },
  data: [
    {
      type: "spline",
      dataPoints: [{x:10,y:2},{x:20,y:5},{x:30,y:10},{x:40,y:14},{x:50,y:7},{x:60,y:9},{x:70,y:8},{x:80,y:11},{x:90,y:4}]
    }                   
  ]
});

chart.render();

var xSnapDistance = 1;
var ySnapDistance = 1;



var mouseDown = false;
var selected = null;
var changeCursor = false;

var timerId = null;

function getPosition(e) {
  var parentOffset = $("#chartContainer > .canvasjs-chart-container").offset();          	
  var relX = e.pageX - parentOffset.left;
  var relY = e.pageY - parentOffset.top;
  xValue = Math.round(chart.axisX[0].convertPixelToValue(relX));
  yValue = Math.round(chart.axisY[0].convertPixelToValue(relY));
}

function searchDataPoint() {
  var dps = chart.data[0].dataPoints;
  var len = dps.length;

  for(var i = 0; i < dps.length; i++ ) {
    if( (xValue >= dps[i].x - xSnapDistance && xValue <= dps[i].x + xSnapDistance) && 
       (yValue >= dps[i].y - ySnapDistance && yValue <= dps[i].y + ySnapDistance) ) {
      if(mouseDown) {
        selected = i;
        break;
      }
      else {
        changeCursor = true;
        break; 
      }
    } else {
      selected = null;
      changeCursor = false;
    }
  }

}

jQuery("#chartContainer > .canvasjs-chart-container").on({
  mousedown: function(e) {
    mouseDown = true;
    getPosition(e);  
    searchDataPoint();
  },
  mousemove: function(e) {
    getPosition(e);
    if(mouseDown) {
      clearTimeout(timerId);
      timerId = setTimeout(function(){
        if(selected != null) {
          chart.data[0].dataPoints[selected].y = yValue;
          chart.render();
        }   
      }, 0);
    }
    else {
      searchDataPoint();
      if(changeCursor) {
        chart.data[0].set("cursor", "n-resize");
      } else {
        chart.data[0].set("cursor", "default");
      }
    }
  },
  mouseup: function(e) {
    if(selected != null) {
      chart.data[0].dataPoints[selected].y = yValue;
      chart.render();
      mouseDown = false;
    }
  }

});
	
}

</script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
asd</br>

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

</body>
</html>

—–
I didn’t manage to follow through the linked tutorial successfully, but don’t have the expertise to troubleshoot why.
Any help is greatly appreciated!

[Priyanka M S]

@SolidScorch,

Please take a look at this jsfiddle, which reads data from an external CSV file and plots a scatter chart.

__
Priyanka M S
Team CanvasJS

[SolidScorch]

Ahh right, this is a huge help!
Thank you Priyanka c: !

[htn2205]

Please help me to make simple status chart same image below from csv data.

[htn2205]

Chart

[Priyanka M S]

@htn2205,

Please take a look at this jsfiddle.

__
Priyanka M S
Team CanvasJS