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)
  • #11502

    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>
    
    #11504

    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

    #11505

    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

    #11506

    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>
    #11508

    @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

    #12534

    [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.