FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Creating line chart from csv

Creating line chart from csv

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

Tagged: , ,

  • June 6, 2015 at 9:28 pm #9069

    matey

    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

    June 11, 2015 at 5:55 pm #9080

    Sunil Urs

    Matey,

    Please refer to this thread on how to create chart using data from CSV.

    —
    Sunil Urs

    June 25, 2015 at 8:34 pm #9123

    MDAR_Tech

    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

    July 1, 2015 at 11:52 am #9134

    Anjali

    stuart,

    In your csv file you have dateTime values which you are assigning to label property. Instead you should be assign dateTime values to x-value 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://canvasjs.com/assets/script/jquery-1.11.1.min.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="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="GP01" style="height: 300px; width:100%;"></div>
</body>
</html>

    __
    Anjali

    July 1, 2015 at 1:48 pm #9135

    MDAR_Tech

    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 ;-)

    September 14, 2016 at 1:06 pm #12533

    Sunil Urs

    [Update]

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

    Chart using data from CSV

    —
    Sunil Urs

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

Tagged: , ,

You must be logged in to reply to this topic.