FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › line graph with multiple series from csv › Reply To: line graph with multiple series from csv

July 8, 2016 at 4:54 pm #11506

shahid.majeed

Hi again,

Now i write more clean code according to one of line graph example. Graph is still not generated but i see the border is bold of the graph area.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.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 data = [];

                    var dataPoints1 = [];
                    var dataPoints2 = [];
                    var dataPoints3 = [];
                    var dataPoints4 = [];
                    
                    var dataSeries1 = { type: "line" };
                    var dataSeries2 = { type: "line" };
                    var dataSeries3 = { type: "line" };
                    var dataSeries4 = { type: "line" };

                    for (var i = 0; i <= allLinesArray.length - 1; i++) {
                        var rowData = allLinesArray[i].split(';');
                        if (rowData && rowData.length > 1) {
                            if (i != 0) {
                                dataPoints1.push({ x: rowData[1], y: rowData[2] });
                                dataPoints2.push({ x: rowData[1], y: rowData[3] });
                                dataPoints3.push({ x: rowData[1], y: rowData[4] });
                                dataPoints4.push({ x: rowData[1], y: rowData[5] });
                            }
                        }
                    }

                    dataSeries1.dataPoints = dataPoints1;
                    dataSeries2.dataPoints = dataPoints2;
                    dataSeries3.dataPoints = dataPoints3;
                    dataSeries4.dataPoints = dataPoints4;
                    data.push(dataSeries1);
                    data.push(dataSeries2);
                    data.push(dataSeries3);
                    data.push(dataSeries4);
                    
                    var chart = new CanvasJS.Chart("chartContainer",
                    {
                        title: {
                            text: "cpu usage"
                        },
                        data: data
                    });

                      chart.render();
                }
            }
        });
    </script>
</head>
<body>
            <div id="chartContainer"></div>
</body>
</html>