line graph with multiple series from csv

Tagged: dataPoints, line graph, Multiple series

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

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

Author

Posts

July 8, 2016 at 2:11 pm #11502

shahid.majeed

Member

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://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>

July 8, 2016 at 3:36 pm #11504

Sanjoy

Participant

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.

July 8, 2016 at 4:19 pm #11505

shahid.majeed

Member

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

Member

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://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>

July 8, 2016 at 8:28 pm #11508

Sanjoy

Participant

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

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

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

September 14, 2016 at 1:06 pm #12534

Sunil Urs

Keymaster

[Update]

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

Author

Posts

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

You must be logged in to reply to this topic.

Front End Technology Samples

Server Side Technology Samples

FORUMS