Home Forums Chart Support Graph a CSV file

Graph a CSV file

Viewing 15 posts - 1 through 15 (of 62 total)
  • #6365

    Hi All,

    I am a newbie to using/coding javascript. I have a ruby script which updates a CSV file everyday.

    I want to pass that csv file as an array to so that I can create a graph and present it.

    This is my csv
    11/06/2014,5992
    12/06/2014,6341
    13/06/2014,6653

    This file gets updated everyday via a RUBY script.

    Thanks and Regards,

    W

    #6371

    [Update]

    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>
    <html>
    <head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function () {
    
        $.ajax({
            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;
                chart.render();
            }
        }
    
                
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            title: {
                text: "Basic Column Chart – CanvasJS"
            },
            data: [
            {
                type: "column",
                dataPoints: []
            }
            ]
        });
                
    });
    </script>
    <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>

    Please Let me know if you need any further assistance.

    Thanks,
    Anjali

    • This reply was modified 8 years, 7 months ago by Sunil Urs. Reason: Added a check for empty lines
    • This reply was modified 3 years ago by Manoj Mohan.
    • This reply was modified 3 years ago by Manoj Mohan.
    #8494

    Hello, i’m trying to do the same with wallander, i’m new to this also.

    I’m copying the above code to try it bu i have no results.

    I have in the same folder a csv file, jquery.js and canvasjs.min.js.

    csv contens these:

    2013,6330
    2014,7058
    2015,2088

    My code that works fine is this:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset=”UTF-8″>
    <script type=”text/javascript”>

    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    title:{
    text: “ID”
    },

    axisX:{

    labelAngle: 0,
    labelWrap:true,
    labelAutoFit: false,
    labelFontSize: 15,
    labelMaxWidth: 200,
    labelFontColor: “black”
    },

    backgroundColor: “transparent”,
    data: [

    {
    indexLabelPlacement: “outside”,
    indexLabelFontWeight: “bold”,
    indexLabelFontColor: “black”,

    dataPoints: [
    { y: 6330, label: “ID-2013″, indexLabel:”6330”},
    { y: 7058, label: “ID-2014″, indexLabel:”7058”},
    { y: 2088, label: “ID-2015″, indexLabel:”2088″}
    ]
    }
    ]
    });

    chart.render();
    }
    </script>
    <script type=”text/javascript” src=”canvasjs.min.js”></script></head>
    <body style=”background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center”>
    <div id=”chartContainer” style=”height: 800px; width: 100%; background-image:url(‘fonto1.png’); background-repeat:no-repeat; background-position:center; background-size:100% 100%”>
    </div>
    <div style=”text-align: center; color:red; font-size:25px;”><b>Τελευταία Ενημέρωση 27 Μαρ 2015 12:00</b></div>

    </body>
    </html>

    when i’m trying to combine it with yours i have no results:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

    <script type=”text/javascript”>

    $(document).ready(function () {

    $.ajax({
    type: “GET”,
    url:”data2.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 = 1; i <= allLinesArray.length-1; i++) {
    var rowData = allLinesArray[i].split(‘,’);
    dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
    }
    drawChart(dataPoints);
    }
    }

    function drawChart( dataPoints) {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    theme: “theme2”,//theme1
    title:{
    text: “ID”
    },
    axisX:{

    labelAngle: 0,
    labelWrap:true,
    labelAutoFit: false,
    labelFontSize: 15,
    labelMaxWidth: 200,
    labelFontColor: “black”
    },

    data: [

    {
    indexLabelPlacement: “outside”,
    indexLabelFontWeight: “bold”,
    indexLabelFontColor: “black”,

    data: [
    {

    type: “column”,
    dataPoints: dataPoints
    }
    ]
    });

    chart.render();
    }
    });
    </script>

    <script type=”text/javascript” src=”canvasjs.min.js”></script>
    <script type=”text/javascript” src=”jquery.js”></script>
    </head>

    <body style=”background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center”>
    <div id=”chartContainer”
    style=”height: 800px;
    width: 100%;
    background-image:url(‘fonto1.png’);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%”>
    </div>
    <div style=”text-align: center; color:red; font-size:25px;”><b>Τελευταία Ενημέρωση 27 Μαρ 2015 12:00</b></div>

    </body>
    </html>

    Thanks and Regards

    #8498

    There are few issues in your code. So please correct the below mentioned points:

    1) You are using jQuery file in the end because of which $ is not define when you are trying to do $(document).ready. Please use jQuery before $(document).ready.

    2) While rendering the chart you are using data object twice

    data: [
    {
    indexLabelPlacement: “outside”,
    indexLabelFontWeight: “bold”,
    indexLabelFontColor: “black”,
    data: [
    {
    type: “column”
    dataPoints: dataPoints
    }
    ]

    Below is the code with the issues fixed.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    
    	$.ajax({
    		type: "GET",
    		url:"data2.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(",");
    				dataPoints.push({ label:rowData[0], y:parseInt(rowData[1]) });
    			}
    			drawChart(dataPoints);
    		}
    	}
    
    	function drawChart( dataPoints) {
    		var chart = new CanvasJS.Chart("chartContainer", {
    			title:{
    				text: "ID"
    			},
    			axisX:{
    				labelAngle: 0,
    				labelWrap:true,
    				labelAutoFit: false,
    				labelFontSize: 15,
    				labelMaxWidth: 200,
    				labelFontColor: "black"
    			},
    			data: [
    			{
    				indexLabelPlacement: "outside",
    				indexLabelFontWeight: "bold",
    				indexLabelFontColor: "black",
    				type: "column",
    				dataPoints: dataPoints
    			}
    			]
    		});
    		chart.render();
    	}
    });
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    </head>
    <body style="background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center">
    <div id="chartContainer" style="height: 800px; width: 100%; background-image:url("fonto1.png"); background-repeat:no-repeat; background-position:center; background-size:100% 100%"></div>
    <div style="text-align: center; color:red; font-size:25px;"><b>Τελευταία Ενημέρωση 27 Μαρ 2015 12:00</b></div>
    </body>
    </html>

    __
    Anjali

    #8505

    Ohh thanx a lot … the code runs good!

    I didn’t see that … i’m still hitting the desk with my head!!

    Thank you again!

    #8580

    Hello,
    I’m also trying to chart a csv file. Since I have no experience of javascript programming I simply copy the example code in this post and hoped for the best :)

    I must however do something fundamentally wrong since no chart is visible on my html page.

    I have a html page with with code from replay #8498. A data2.csv file and the jquery.canvasjs.min.js and canvasjs.min.js together in the same folder. Can you tell me what I have missed?

    Best Regards
    Stefan

    #8598

    [Update]

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

    Stefan,

    Can you please check if you are getting any error in the console? It would also help if you can give us some sample data from your csv file.


    Sunil Urs

    #8600

    Hi,
    You must excuse my lack of knowledge when it comes to these things. What is the console? This is the code I trying to use:

    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery.canvasjs.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    
    	$.ajax({
    		type: "GET",
    		url:"logg.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(",");
    				dataPoints.push({ label:rowData[0], y:parseInt(rowData[1]) });
    			}
    			drawChart(dataPoints);
    		}
    	}
    
    	function drawChart( dataPoints) {
    		var chart = new CanvasJS.Chart("chartContainer", {
    			title:{
    				text: "ID"
    			},
    			axisX:{
    				labelAngle: 0,
    				labelWrap:true,
    				labelAutoFit: false,
    				labelFontSize: 15,
    				labelMaxWidth: 200,
    				labelFontColor: "black"
    			},
    			data: [
    			{
    				indexLabelPlacement: "outside",
    				indexLabelFontWeight: "bold",
    				indexLabelFontColor: "black",
    				type: "column",
    				dataPoints: dataPoints
    			}
    			]
    		});
    		chart.render();
    	}
    });
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    </head>
    <body>
        <div id="chartContainer" style="height: 300px; width: 100%;">
        </div><center><b>This a test text</b></center>
    </body>
    </html>
    

    My csv file called logg.csv looks like this:
    2015-04-03,10:00,239
    2015-04-03,12:00,304
    2015-04-03,14:00,256
    2015-04-03,16:00,301

    #8604

    stefanA,

    In every browser we have developer tool which you can open either from browser’s settings or using shortcut F12. In developer tools, console is available and you can see error there. But after looking into your code we know where it is going wrong. So please correct the below mention points :

    1) You are not using jQuery file because of which $ is not define when you are trying to do $(document).ready. So please use jQuery before $(document).ready.

    2) Both jquery.canvasjs.min.js (jQuery Plugin) and canvasjs.min.js (standalone) are CanvasJS files and you require only one of them at any time depending on whether you want to use it as a jQuery Plugin or as a standalone library. For this sample you’ll need standalone version (canvasjs.min.js)

    Below is the code with the issues fixed

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	$.ajax({
    		type: "GET",
    		url:"logg.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(",");
    				dataPoints.push({ label:rowData[0], y:parseInt(rowData[2]) });
    			}
    			drawChart(dataPoints);
    		}
    	}
    
    	function drawChart( dataPoints) {
    		var chart = new CanvasJS.Chart("chartContainer", {
    			title:{
    				text: "ID"
    			},
    			axisX:{
    				labelAngle: 0,
    				labelWrap:true,
    				labelAutoFit: false,
    				labelFontSize: 15,
    				labelMaxWidth: 200,
    				labelFontColor: "black"
    			},
    			data: [
    			{
    				indexLabelPlacement: "outside",
    				indexLabelFontWeight: "bold",
    				indexLabelFontColor: "black",
    				type: "column",
    				dataPoints: dataPoints
    			}
    			]
    		});
    		chart.render();
    	}
    });
    </script>
    <script type="text/javascript" src="canvasjs.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <center><b>This a test text</b></center>
    </body>
    </html>
    • This reply was modified 8 years, 11 months ago by Anjali.
    • This reply was modified 8 years, 11 months ago by Anjali.
    #8607

    I downloaded jquery-2.1.1.js core and put it in the same folder as the rest of the documents. Can I now simply copy your code above into a html document and run it in my browser and it will produce a chart based on my csv file?

    #8613

    I can’t get the code from reply #8604 to work. Trying to run the code locally/offline on my PC but no chart is drawn.

    #8614

    Hello,

    The first time i copy and paste the code from #8498 REPLY to my html page i saw that all the quotes had problem.

    Here i can see them ok but in programm are wrong.

    So try to copy them into Sublime Text 2, Netbeans or any other program and see if you have any wrong there.
    Then try to see if all src paths are correct too.

    My code works fine after Anjali’s help and all the above.

    #8648

    I simply want to link my charts to a csv file in excel instead of database. What changes should I make in the code?

    #8655

    [Update]

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

    nkhlanand,

    You need to parse the csv file as described above before assigning it to the chart. As of now we don’t have a way to render chart directly from the csv file.


    Sunil Urs

    #8667

    Thanks for the neat example, it works like charm.
    Just one concern, when the csv updates the graph is not updating automatically. Do I have to add some extra lines for this?

    Thanks in advance

Viewing 15 posts - 1 through 15 (of 62 total)

You must be logged in to reply to this topic.