Home forums Using CanvasJS Graph a CSV file

This topic contains 49 replies, has 18 voices, and was last updated by  petermmak 1 month, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 50 total)
  • Author
    Posts
  • #6365

    wallander
    Participant

    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

    Anjali
    Participant

    [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="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.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="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 1 year, 3 months ago by  Sunil Urs. Reason: Added a check for empty lines
    #8494

    djosain@gmail.com
    Participant

    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

    Anjali
    Participant

    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

    djosain@gmail.com
    Participant

    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

    StefanA
    Participant

    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

    Sunil Urs
    Keymaster

    [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

    StefanA
    Participant

    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

    Anjali
    Participant

    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 1 year, 7 months ago by  Anjali.
    • This reply was modified 1 year, 7 months ago by  Anjali.
    #8607

    StefanA
    Participant

    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

    StefanA
    Participant

    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

    djosain@gmail.com
    Participant

    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

    nkhlanand
    Participant

    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

    Sunil Urs
    Keymaster

    [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

    sohard
    Member

    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 50 total)

You must be logged in to reply to this topic.