I have been hacking away at this, it is not pretty, but is functional;
<p>
<script src="https://www.google.com/jsapi"; type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(init);
function init () {
document.getElementById('go').onclick = function () {
var csv = document.getElementById('input').value;
var csvData = csv.split('\n');
var row;
var rowArray;
var dataArray = [];
for (var i = 0; i < csvData.length; i++) {
row = csvData[i].replace(/(^\s|(,)\s|\s(,)|\s$)/g, '$2');
if (row.length > 0) {
rowArray = row.split(',');
for (var j = 0; j < rowArray.length; j++) {
if (rowArray[j] == parseFloat(rowArray[j])) {
rowArray[j] = parseFloat(rowArray[j]);
}
}
dataArray.push(rowArray);
}
}
var data = google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
height: 300,
width: 500,
hAxis: {
title: data.getColumnLabel(0)
},
vAxis: {
title: data.getColumnLabel(1)
}
}
});
chart.draw();
}
}
// ]]></script>
</p>
<p>Enter data as a CSV (separate all rows with a new line): <textarea
id="input" style="display: block; height: 400px; width: 300px;">number,
value 1, value 2
1, 10, 13
2, 33, 18
3, 51, 6
4, 25, 28
5, 11, 19
6, 15, 37
7, 36, 22
8, 42, 14
9, 28, 12
</textarea> <input type="button" value="Chart Me!" id="go" /></p>
<div id="chart_div"></div>
<p>div"></p>
Any tipson how to make the input textarea more appealing? HTML5 has so much
to offer in forms, but I don't have the skills to convert the user input
into the correct form for the chart.
Regards
Mark
On Saturday, April 19, 2014 1:01:47 PM UTC+1, Mark Dakers wrote:
>
> Hi
>
> I would like to use a form to allow a user to enter their own data for a
> line graph.
>
> I can't seem to find the documentation for that, please can someone point
> me to it?
>
> Thanks
>
> Mark
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
