Home forums Using CanvasJS Graph a CSV file Reply To: Graph a CSV file




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

Hi Wallander,
For making a graph of your daily updated CSV file, you can use JQuery to get CSV file from server and can parse that CSV File into java script and can draw a chart using canvasJS. For Ex:

<!DOCTYPE html>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function () {

        type: "GET",
        url: "Data.csv",
        dataType: "text",
        success: function (data) { processData(data); }

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

    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2",
        title: {
            text: "Basic Column Chart – CanvasJS"
        data: [
            type: "column",
            dataPoints: []
<script type="text/javascript" src="canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

Please Let me know if you need any further assistance.


  • This reply was modified 2 years, 2 months ago by  Sunil Urs. Reason: Added a check for empty lines