Home forums Using CanvasJS Creating line chart from csv Reply To: Creating line chart from csv

#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