Multiple series line graph from csv file.

44 views

Skip to first unread message

Shahid Majeed

unread,

Jul 7, 2016, 10:21:44 AM7/7/16

to Google Visualization API

Hi,

I try to generate line graph from csv file and csv file have multiple series.

My CSV look like this

timestemp, cpu0, cpu1, cpu2, cpu3

12, 30.78, 67.89, 20, 60.89

Here is my code, but graph is not generated. I only get following two warnings in console.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Setting 'XMLHttpRequest.withCredentials' for synchronous requests is deprecated.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jqueryCSV.aspx.cs" Inherits="jqueryCSV" %>

<!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://www.gstatic.com/charts/loader.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 = [];
for (var i = 0; i <= allLinesArray.length - 1; i++) {
var rowData = allLinesArray[i].split(',');
if (rowData && rowData.length > 1)
cpu0.push({ x: rowData[0], y: rowData[1] });
}
}
}
function graph(data) {
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(renderGraph(data));
}

function renderGraph(arrayData) {
var data = google.visualization.arrayToDataTable(arrayData);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</div>
</form>
</body>
</html>

Shahid Majeed

unread,

Jul 7, 2016, 10:28:39 AM7/7/16

to Google Visualization API

following function updated and getting "Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined"

function processData(allText) {

var allLinesArray = allText.split('\n');

graph(allLinesArray);

//if (allLinesArray.length > 0) {

// var cpu0 = [];

// for (var i = 0; i <= allLinesArray.length - 1; i++) {

// var rowData = allLinesArray[i].split(',');

// if (rowData && rowData.length > 1)

// cpu0.push({ x: rowData[0], y: rowData[1] });

// }

//}

Reply all

Reply to author

Forward

0 new messages