insert data from text file in google chart

Yoonchung Ock

unread,

Feb 3, 2014, 4:03:26 AM2/3/14

to google-visua...@googlegroups.com

I want to insert data from my server from text file for google chart. line chart.

the text file is very simple...just two columns..

ex.

A 12

B 123

C 32

D 32

How can I read data from that text file and draw chart on web page with that data?

Help me please..

asgallant

unread,

Feb 3, 2014, 12:29:08 PM2/3/14

to google-visua...@googlegroups.com

If you want to load a text file like that as the source of your data, you need to use AJAX to pull the data into browser. Many javascript libraries offer AJAX tools to help you do this, here's an example using jQuery:

function drawChart () {

$.ajax({

url: '/path/to/mydata.txt',

type: 'text',

success: function (txt) {

var dataArray = [['column 1 label', 'column 2 label']];

var txtArray = txt.split('\n');

for (var i = 0; i < txtArray.length; i++) {

// splits the text row by whitespace

// assumes that the only whitespace in the row separates column 1 from column 2

var tmpData = txtArray[i].split(/\s+/);

// insert the data into the data array

// parsing the numbers as integers

// you can use parseFloat instead, if you need floating point numbers

dataArray.push(tmpData[0], parseInt(tempData[1]));

}

var data = google.visualization.arrayToDataTable(dataArray);

var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));

chart.draw(data, {

// chart options

});

}

});

}

google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

Yoonchung Ock

unread,

Feb 25, 2014, 1:41:08 AM2/25/14

to google-visua...@googlegroups.com

I did that, but I got error

Java Exception Breakpoints

Unknown

null

what's wrong?

2014년 2월 4일 화요일 오전 2시 29분 8초 UTC+9, asgallant 님의 말:

asgallant

unread,

Feb 25, 2014, 10:58:26 AM2/25/14

to google-visua...@googlegroups.com

The example code is javascript, not Java. It is meant to be run client side, in the browser, not server side.

Daniel LaLiberte

unread,

Feb 25, 2014, 6:38:08 PM2/25/14

to google-visua...@googlegroups.com

If you are getting a Java Exception, that would be caused by something on your server side.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Yoonchung Ock

unread,

Mar 3, 2014, 3:08:19 AM3/3/14

to google-visua...@googlegroups.com

I wrote code, but it can't draw chart on web page....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart () {

$.ajax({

url: 'data1',

type: 'get',

success:

function(txt){

var dataArray = [['x', 'y'],

];

for (var i=0;txt!=null; i++){

var txtArray = txt.split("\n");

var tmpData = txtArray[i].split(" ");

dataArray.push([tmpData[0], tmpData[1]]);

document.write("dataArray" + i + ":" + dataArray + "<br>" + "<br>");

}

var options = {

title: 'Company Performance',

vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}

};

},

});

var data = google.visualization.arrayToDataTable(dataArray);

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

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

the output is

dataArray0:x,y,A,100

dataArray1:x,y,A,100 ,B,150

dataArray2:x,y,A,100 ,B,150 ,C,200

dataArray3:x,y,A,100 ,B,150 ,C,200 ,D,80

dataArray4:x,y,A,100 ,B,150 ,C,200 ,D,80 ,E,99

dataArray5:x,y,A,100 ,B,150 ,C,200 ,D,80 ,E,99 ,F,120

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/IKePuii7DXk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Daniel LaLiberte

unread,

Mar 3, 2014, 8:22:52 AM3/3/14

to google-visua...@googlegroups.com

Your ajax call is asynchronous, which means that it returns as soon as you call it, and doesn't wait for the response back from the server. The next thing your code does is construct the data table and draw the chart. But there is no data yet because the ajax response is not back yet.

You need to rearrange the code so you don't construct the data table and draw the chart until after the ajax response is back. One way you could do that is to move those three lines that construct the data table and draw the chart to the end of the 'success' handler *inside* of your ajax request. So the last few lines would look like this:

var options = {

title: 'Company Performance',

vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}

};

},

var data = google.visualization.arrayToDataTable(dataArray);

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

chart.draw(data, options);

});

}

asgallant

unread,

Mar 3, 2014, 1:03:40 PM3/3/14

to google-visua...@googlegroups.com

Also, these lines will cause problems in Internet Explorer:

var dataArray = [['x', 'y'], // <-- this comma will cause IE to throw a fit

];

which would prevent the chart from drawing in IE.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--
Daniel LaLiberte - 978-394-1058

dlali...@Google.com 5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/IKePuii7DXk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--
Daniel LaLiberte - 978-394-1058

dlali...@Google.com 5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

Yoonchung Ock

unread,

Mar 26, 2014, 8:21:57 AM3/26/14

to google-visua...@googlegroups.com

I did it.

that's my code....well Thank you!!!! all of you.

the file named data1 must be in same folder with the html file

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<!-- <%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%> -->

<head>

google.load('visualization', '1', {packages:['corechart']});

google.setOnLoadCallback(drawChart);

function drawChart () {

$.ajax({

url: 'data1',

type: 'get',

success:

function(txt){

var dataArray = [['x', 'y']

];

for (var i=0;txt!=null; i++){

var txtArray = txt.split("\n");

var tmpData = txtArray[i].split(" ");

dataArray.push([tmpData[0], parseInt(tmpData[1])]);

var data = google.visualization.arrayToDataTable(dataArray);

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

chart.draw(data, {

title: 'Company Performance',

vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}});

}

});

Gregory Camelo

unread,

Apr 7, 2015, 5:04:49 PM4/7/15

to google-visua...@googlegroups.com

hello

what is te data1 file??

a use de same code but didn't work

can you help me?

manuchandran p

unread,

Jun 15, 2017, 8:14:42 AM6/15/17

to Google Visualization API

Hi,

I have a text file that contains size details of repositories. Contents of the file shown below.

##repo_name repo_size

auto-trashcan 223.66 GB

testrepo.valo 739.96 MB

vag-test-loc 424.36 MB

testrepo.dolo 369.16 MB

docker-cert-loc 263.09 MB

testrepo.rplo 108.73 MB

upgrade_virtual_p2 84.34 MB

testrepo.p2vr 84.34 MB

testrepo.delo 61.02 MB

How to plot this value as a graphical format in the same method. Could you please help.

Thanks and Regards

Reply all

Reply to author

Forward