Home › Forums › Chart Support › Creating line chart from csv › Reply To: Creating line chart from csv

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