Forum Replies Created by shahid.majeed

Viewing 2 posts - 1 through 2 (of 2 total)
  • July 8, 2016 at 4:54 pm in reply to: line graph with multiple series from csv #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>
    July 8, 2016 at 4:19 pm in reply to: line graph with multiple series from csv #11505

    shahid.majeed

    script is updated but still graph did not generated and no error in console.

        <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 cpu0 = [];
                    var cpu1 = [];
                    var cpu2 = [];
                    var cpu3 = [];

                    for (var i = 0; i <= allLinesArray.length - 1; i++) {
                        var rowData = allLinesArray[i].split(';');
                        
                        if (rowData && rowData.length > 1) {
                            if (i != 0) {
                                cpu0.push({ x: rowData[1], y: rowData[2] });
                                cpu1.push({ x: rowData[1], y: rowData[3] });
                                cpu2.push({ x: rowData[1], y: rowData[4] });
                                cpu3.push({ x: rowData[1], y: rowData[5] });
                            }
                            
                        }
                    }
                    console.log(cpu0);
                    var chart = new CanvasJS.Chart("chartContainer",
                    {
                        title: {
                            text: "CPU Usage"
                        },
                        data: [
                            {
                                type: "Line",
                                dataPoints: cpu0
                            },
                            {
                                type: "Line",
                                dataPoints: cpu0
                            },
                            {
                                type: "Line",
                                dataPoints: cpu0
                            },
                            {
                                type: "Line",
                                dataPoints: cpu0
                            }
                        ]
                    });
                    chart.render();
                }
            }
        });
    </script>

    Console output

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