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

line graph with multiple series from csv

Viewing 6 posts - 1 through 6 (of 6 total)
  • July 8, 2016 at 2:11 pm #11502

    shahid.majeed

    Hi,

    I am trying to create a line graph from csv file, csv file have multiple series and format look like this.

    Time, CPU0, CPU1, CPU2, CPU3
    10:30, 10.40, 50, 60.78, 30.38

    i prepared my page, first i read the CSV file and pass the data to prepared array of series, create four series like cpu0. cpu1, cpu2 and cpu3.

    Then i set these series to canvas dataPoint. I am beginner in javascipting so i dont know much about dataPoints and structure. Could you please help in this matter.
    Here is my page markup.

    <!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 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] });
                            }
                            
                        }
                    }
                    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>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="chartContainer" style="height: 300px; width: 100%;"></div>
        </div>
    </form>
</body>
</html>
    July 8, 2016 at 3:36 pm #11504

    Sanjoy

    Shahid,

    You are creating array of array while assigning [cpu0] to dataPoints. Passing cpu0 directly to dataPoints should work fine in your case as shown below in code snippet.

    { type: "Line",
     dataPoints: cpu0
},

    If you are still facing problem, you can try to debug it by consoling cpu0.

    —-
    Sanjoy Debnath
    Team CanvasJS

    July 8, 2016 at 4:19 pm #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

    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>
    July 8, 2016 at 8:28 pm #11508

    Sanjoy

    @shahid-majeed,

    You are passing both x and y values in string value and CanvasJS expects x value to be dateTime or numeric and y value to be numeric. So, converting x value to a valid javascript DateTime format (or you can try with label instead of x) and y value to a number will render the chart properly.

    Here is a similar example to render the chart with csv data.

    Multiple chart using data from CSV

    —–
    Sanjoy Debnath
    Team CanvasJS

    September 14, 2016 at 1:06 pm #12534

    Sunil Urs

    [Update]

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

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

You must be logged in to reply to this topic.