Home forums Using CanvasJS Creating line chart from csv

Tagged: , ,

This topic contains 5 replies, has 4 voices, and was last updated by  Sunil Urs 2 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #9069

    matey
    Member

    Hi all,
    I am new in making charts from csv but i need it for a project. I have a CSV file which is updated everyday. This is how my CSV looks like:

    1; 758;2.27;4.35;101;28;40;62;0.7
    2; 759;2.27;4.32;101;28;40;62;0.7
    3; 756;2.33;4.41;101;28;40;62;0.7

    The first number to be on X-Axis and the second number to be the Y-axis. Only these two numbers to be used by the chart.
    Thanks and Regards,
    Matey

    #9080

    Sunil Urs
    Keymaster

    Matey,

    Please refer to this thread


    Sunil Urs

    #9123

    MDAR_Tech
    Member

    Hi

    I’m trying to do something just a little bit different.

    I’ve read the forum post you’ve pointed to and I did manage to create a graph with 2 lines, from the same CSV file, but what I want to do is create a single graph with 2 (or more) lines from different CSV files.

    I’ve created a JSfiddle to show what we’re done, in which are links to what we have got to work on our server.

    http://jsfiddle.net/MDAR_Tech/1tgk509g/14/#share

    Could you tell us where we are going wrong?

    Many thanks in advance,

    Stuart

    #9134

    Anjali
    Participant

    stuart,

    In your csv file you have dateTime values which you are assigning to label property. Instead you should be using dateTime values which can be done as shown below :

    <!DOCTYPE html>
    <html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                var dataPoints1 = [];
                var dataPoints2 = [];
    
                $.ajax({
                    type: "GET",
                    url: "http://www.cuedup.biz/vgraphing/demoui/BT01.csv",
                    dataType: "text",
                    success: function (data) { processData1(data); }
                });
    
                function processData1(allText) {
                    var allLinesArray = allText.split('\n');
                    if (allLinesArray.length > 0) {
                        for (var i = 0; i <= allLinesArray.length - 2; i++) {
                            var rowData = allLinesArray[i].split(',');
    
                            var labelData = rowData[0].split(":");           
                            
                            if( labelData[2] === undefined )
                                labelData[2] = 0;
    
                            labelData[0] = parseInt(labelData[0]);
                            labelData[1] = parseInt(labelData[1]);
                            labelData[2] = parseInt(labelData[2]);
                                
                            if (rowData.length >= 2)                          
                                dataPoints1.push({ x: new Date(2012, 1, 1, labelData[0], labelData[1], labelData[2]), y: parseInt(rowData[1]) });
                        }
                    }            
                  requestTempCsv();
                }
    
               function requestTempCsv() {
                    $.ajax({
                        type: "GET",
                        url: "http://www.cuedup.biz/vgraphing/demoui/GP01.csv",
                        dataType: "text",
                        success: function (data) { processData2(data); }
                    });
               }
    
                function processData2(allText) {
                    var allLinesArray = allText.split('\n');
                    if (allLinesArray.length > 0) {
    
                        for (var i = 1; i <= allLinesArray.length - 1; i++) {
                            var rowData = allLinesArray[i].split(',');
                            var labelData = rowData[0].split(":");
    
                            if (labelData[2] === undefined)
                                labelData[2] = 0;
    
                            labelData[0] = parseInt(labelData[0]);
                            labelData[1] = parseInt(labelData[1]);
                            labelData[2] = parseInt(labelData[2]);
    
                            if (rowData.length >= 2)
                                dataPoints2.push({ x: new Date(2012, 1, 1, labelData[0], labelData[1], labelData[2]), y: parseInt(rowData[1]) });
    
                        }
                        drawChart(dataPoints1, dataPoints2);
                    }
                }          
    
                function drawChart(dataPoints1, dataPoints2) {
                    var chart = new CanvasJS.Chart("GP01", {
                        theme: "theme2",
                        title: {
                            text: "Master bedroom temperature and heating demand"
                        },                  
                        zoomEnabled: true,
                        data: [
                        {
                            type: "stepLine",
                            dataPoints: dataPoints1
                        },
                        {
                            type: "spline",
                            dataPoints: dataPoints2
                        }
    
                        ]
                    });
                    chart.render();
                }
            });
    
        </script>
        <script type="text/javascript" src="canvasjs.js"></script>
    </head>
    <body>
    <div id="GP01" style="height: 300px; width:100%;"></div>
    </body>
    </html>

    __
    Anjali

    #9135

    MDAR_Tech
    Member

    Hello Anjali

    Thank you so much for correcting the script 🙂

    When I dropped your script into a single HTML it just presented a blank DIV section, however when I split it into a .js script file and a HTML file it worked like a charm 🙂

    http://www.cuedup.biz/VGraphing/demoui/GP01b.html

    Thank you so very much 😉

    #12533

    Sunil Urs
    Keymaster

    [Update]

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


    Sunil Urs

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.