Google ScatterChart from uploaded csv file - charts

How can plot a Google Scatterchartfrom an uploaded csv file?
It is showing a blank page.
I tried the following code:
Loading the scripts:
<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
Then I got this part from an example:
<script> // wait till the DOM is loaded
$(function() {
// grab the CSV
$.get("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.csv", function(csvString) {
// display the contents of the CSV
$("#chart").html(csvString); }); });
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data); view.setColumns([0,1]);
var options = {};
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(view, options);
}); }
</script>

the example has an error.
the brackets at the end of the following line...
$("#chart").html(csvString); }); }); <-- these two sets of brackets
need to move down below the rest of the code,
here is the full, corrected snippet...
$(function() {
// grab the CSV
$.get("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.csv", function(csvString) {
// display the contents of the CSV
$("#chart").html(csvString);
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("https://www.batemo.de/wp-content/uploads/general/data_chart_gravimetric.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data); view.setColumns([0,1]);
var options = {};
var chart = new google.visualization.ScatterChart(document.getElementById('chart'));
chart.draw(view, options);
}); }
}); });

Related

google charts - data from csv - date format

In a webpage I load data from a csv file that contains like (it can contains months of data) :
timestamp,open,high,low,close
2022-08-03,1.01554,1.02105,1.01210,1.01618
2022-08-02,1.02578,1.02939,1.01619,1.01625
2022-08-01,1.02182,1.02753,1.02040,1.02587
2022-07-29,1.01952,1.02544,1.01440,1.02248
2022-07-28,1.02005,1.02344,1.01120,1.01947
2022-07-27,1.01174,1.02209,1.00950,1.01998
2022-07-26,1.02210,1.02502,1.01060,1.01179
2022-07-25,1.02174,1.02579,1.01770,1.02200
The first column is a date, but I think the google chart treat it like a string while creating the chart.
This is the code in html page I use to load data from csv and to create the chart:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.csv-0.71.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
// load the visualization library from Google and set a listener
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
<script>
function drawVisualization() {
$.get("EURUSD.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
//view.setColumns([0,1]);
var options = {
legend: 'none',
title: 'EURUSD',
bar: { groupWidth: '100%' }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
data.sort({column: 0, asc: true});
chart.draw(data, options);
});
}
google.setOnLoadCallback(drawVisualization)
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
enter code here
The chart I get is:
I would like to group by month or by year in the X asses, insted of everyday date printed there.
How can I do?
Thank You
Carlo
after you load the csv data...
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
convert the first column to a date...
arrayData = arrayData.map(function (row) {
row[0] = new Date(row[0]);
return row;
});

How to update geojson markers periodically

What I am trying to do is to use Leaflet with OSM map,
and load data from PHP in GeoJSON format + update periodically.
I can manage to display a map, load data, but do not know how to update points instead of still adding a new ones.
function update_position() {
$.getJSON('link_to_php', function(data) {
//get data into object
var geojsonFeature = JSON.parse(data);
// how to remove here old markers???
//add new layer
var myLayer = L.geoJSON().addTo(mymap);
//add markers to layet
myLayer.addData(geojsonFeature);
setTimeout(update_position, 1000);
});
}
update_position();
have tried mymap.removeLayer("myLayer"); but this seems to now work inside of function. Please help
L.geoJSON extends from LayerGroup which provide a function named clearLayers(docs), so you call that to clear markers from the layer.
Also, it is recommended that you put the layer variable outside the function:
var geoJSONLayer = L.geoJSON().addTo(mymap);
function update_position() {
$.getJSON('link_to_php', function(data) {
//get data into object
var geojsonFeature = JSON.parse(data);
geoJSONLayer.clearLayers();
//add markers to layet
geoJSONLayer.addData(geojsonFeature);
setTimeout(update_position, 1000);
});
}
update_position();

How to add html in rows of google chart API

I have a chart with values like below one column have multiple values with forward slash.
but i want to change it like this image.
Here is my chart code
while(start<=end)
{
orgcode=org_hi.substring(start,org_hi.indexOf('-',start));
/* code add by sim*/
/* var res = orgcode.split("/");
if(res.length!=0)
{
var i = 0;
res.forEach(function(entry) {
var sim = "[{v:'"+entry+"', f:'"+entry+"<div style='color:red; font-style:italic'>President</div>'},'', 'The President']";
extndOrg.push(sim);
i++;
});
}*/
/* end code*/
/* if(res.length!=0)
{
var arr1d=new Array(extndOrg,orghead);
}
else
{
var arr1d=new Array(orgcode,orghead);
}*/
var arr1d=new Array(orgcode,orghead);
arr2d.push(arr1d);
start=start+orgcode.length+1;
}
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Node');
data.addColumn('string', 'Parent');
data.addRows(arr2d);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// chart.draw(data);
chart.draw(data, {allowHtml:true});
and orgcode have a dynamic value which is splited with '-'
here is that dynamic value
XPHNG/XPHNG-DDPOA/XPHNG/DDPOA-RUDCP/XPHNG/DDPOA/RUDCP-DCCBA-XENMD-EEPD2/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2-DICAM-ZSBAM/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM-ARCS8/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8-GMHRA-WAKFA-DTPMB/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8/GMHRA/WAKFA/DTPMB
in order to use html on the nodes...
1) need to set the following option...
allowHtml: true
e.g.
chart.draw(data, {
allowHtml: true
});
2) need to use object notation for the cell values
where v: is the value, and f: is the formatted value, e.g.
{v: 'Mike', f: '<div>Email Mike</div>'}
the chart will use the value as the id for building the relationships
but display the formatted value on the node
if you don't want to provide object notation,
you can also use the setFormattedValue method on the data table
data.setFormattedValue(1, 0, namesHtml);
3) see following working snippet...
object notation is used to provide link for 'Mike'
'Jim' is later updated with the split string using the method setFormattedValue
google.charts.load('current', {
callback: drawChart,
packages: ['orgchart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addRows([
[{v: 'Mike', f: '<div>Email Mike</div>'}, ''],
['Jim', 'Mike'],
['Alice', 'Mike'],
['Bob', ''],
['Carol', 'Bob']
]);
var splitStr = 'XPHNG/XPHNG-DDPOA/XPHNG/DDPOA-RUDCP/XPHNG/DDPOA/RUDCP-DCCBA-XENMD-EEPD2/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2-DICAM-ZSBAM/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM-ARCS8/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8-GMHRA-WAKFA-DTPMB/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8/GMHRA/WAKFA/DTPMB';
var names = splitStr.split('-');
var namesHtml = '';
names.forEach(function (name) {
namesHtml += '<div>' + name + '</div>'
});
// change Jim
data.setFormattedValue(1, 0, namesHtml);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {
allowHtml: true
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to prevent Google Charts from changing x-axis order?

I'm trying to draw a Google Chart whose x-axis represents the week numbers. As we're crossing a new year, the axis goes 50, 51, 52, 1, 2, 3, ....
I'm properly ordering my data, but Google Charts insists on reordering my x-axis, and I end up with a weird graph:
var chartData = [
["Week","Revenue"],
[40,227],
[41,317],
[42,320],
[43,482],
[44,418],
[45,345],
[46,313],
[47,316],
[48,380],
[49,467],
[50,349],
[51,256],
[52,393],
[1,276],
[2,349],
[3,312]
];
google.load("visualization", "1", {
packages:["corechart"],
callback: function() {
var div = document.getElementById('chart');
var chartDataTable = google.visualization.arrayToDataTable(chartData);
var chart = new google.visualization['LineChart'](div);
chart.draw(chartDataTable);
}});
<div id="chart" style="height: 400px;">test</div>
<script src="//www.google.com/jsapi"></script>
How can I prevent it from reordering my data?
google's object notation allows you to provide a value (v:) and a formatted value (f:)
thus, you can use a value of 1 with a format of '40'
e.g. --> {v: 1, f: '40'}
in a row --> [{v: 1, f: '40'},227]
the following working snippet uses object notation to re-format the values for the x-axis,
and re-use those values for the x-axis labels (hAxis.ticks)
var chartData = [
["Week","Revenue"],
[40,227],
[41,317],
[42,320],
[43,482],
[44,418],
[45,345],
[46,313],
[47,316],
[48,380],
[49,467],
[50,349],
[51,256],
[52,393],
[1,276],
[2,349],
[3,312]
];
var hAxisTicks = [];
chartData.forEach(function (row, index) {
if (index === 0) {
return;
}
row[0] = {
v: index,
f: row[0].toString()
};
hAxisTicks.push(row[0]);
});
google.charts.load('current', {
callback: function () {
var div = document.getElementById('chart');
var chartDataTable = google.visualization.arrayToDataTable(chartData);
var chart = new google.visualization['LineChart'](div);
chart.draw(chartDataTable, {
hAxis: {
ticks: hAxisTicks
}
});
},
packages:['corechart']
});
<div id="chart"></div>
<script src="https://www.gstatic.com/charts/loader.js"></script>
note:
recommend using loader.js to load the the library, instead of jsapi
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
this only changes the load statement, see snippet above...
EDIT:
there are more options available for continuous axis
which must be sorted, or in reverse sort order ('number', 'date' values)
but the chart will respect the original sort order for a discrete axis ('string' values)
see following snippet for 'string' values
and discrete vs. continuous for more...
var chartData = [
["Week","Revenue"],
[40,227],
[41,317],
[42,320],
[43,482],
[44,418],
[45,345],
[46,313],
[47,316],
[48,380],
[49,467],
[50,349],
[51,256],
[52,393],
[1,276],
[2,349],
[3,312]
];
chartData.forEach(function (row, index) {
if (index === 0) {
return;
}
row[0] = row[0].toString();
});
google.charts.load('current', {
callback: function () {
var div = document.getElementById('chart');
var chartDataTable = google.visualization.arrayToDataTable(chartData);
var chart = new google.visualization['LineChart'](div);
chart.draw(chartDataTable);
},
packages:['corechart']
});
<div id="chart"></div>
<script src="https://www.gstatic.com/charts/loader.js"></script>

Google Visualization Chart Data Range

I have this code,
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1ntnhvfMhYtFNwFjkoKu8cUZOQPCaT5_U1Z6piB_w0-E/edit#gid=0');
query.setQuery('order by A');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var options = {
title: 'TEMP & HUMID',
hAxis: {
direction: -1
},
legend: 'none'
};
var data = response.getDataTable();
var chart = new google.visualization.LineChart(document.getElementById('columnchart'));
chart.draw(data, options);
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<div id="columnchart" style="width: 900px; height: 500px"></div>
</body>
</html>
And here is my spreadsheet data: https://docs.google.com/spreadsheets/d/1ntnhvfMhYtFNwFjkoKu8cUZOQPCaT5_U1Z6piB_w0-E
What I want to do is to plot last 5 data. i.e) row 8 - 12 in my spreadsheet.
I tried the limit and range queries, but what I want to do is, if a new data comes in, I want the chart to refer the updated last 5 data i.e) row 9 -13
How could I achieve this?
I don't know if this is a best approach, but I work it out.
So, before drawing the table, I actually called the spreadsheet in JSON format and retrieve its column length.
Then I subtracted the column length by number of data I want to display (limit query) which will give me offset to start.
Then I made a string with the value of limit and offset to pass the query option to query.setQuery.
Here is the code for the part.
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1NSEbUWojJsMzhH0hi8kx8ic7Xxuq29z0c7BXs-inzb8/edit#gid=0');
$.getJSON("https://spreadsheets.google.com/feeds/list/1NSEbUWojJsMzhH0hi8kx8ic7Xxuq29z0c7BXs-inzb8/od6/public/basic?hl=en_US&alt=json", function(data) {
colLen = data.feed.entry.length;
console.log(colLen);
limit = 4;
var offset = colLen - limit;
console.log(offset);
queryOption = "limit "+limit+" offset "+offset;
console.log(queryOption);
query.setQuery(queryOption);
query.send(handleQueryResponse);
});
}