Home forums Using CanvasJS line graph with multiple series from csv

This topic contains 5 replies, has 3 voices, and was last updated by  Sunil Urs 2 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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="http://canvasjs.com/assets/script/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

    Sanjoy
    Moderator

    Shahid,

    Here your data array should be as-

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

    cpu0 is already an array. And still some problem persists you can debug it by consoling cpu0.

    #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="http://canvasjs.com/assets/script/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

    Sanjoy
    Moderator

    In your case both x and y are string type. So, converting

    1. x value to a valid javascript DateTime format (or you can try with label instead of x)
    2. y value to a number

    should render the chart fine. Here is an similar example with csv data.

    #12534

    Sunil Urs
    Keymaster

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