I have been playing around with Line Charts using the Google Charts API and the following example shows a multi-dimensional array being populate into a data table then displayed on the screen.
It works great but I'd like to be able to populate data from a CSV file found in the same folder which may contain n amount of columns.
Can anyone help figure this out?
I think one would access the csv file with JQuery .get and then convert it into an array. I'm just not very JS savvy nowadays..
<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 data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You should try the recommendation from Reading client side text file using Javascript
It's JS way, from that you can turn each line into an array
Other method is by using ajax call to server side and then process the csv and return array
I think that will solve the crossbrowser issue problem.
Related
I have been trying to follow along with the Google Charts documentation for GeoCharts. For some reason, whenever I try to run their code for markers on my local host it only returns a blank map of Italy. I have created my own Google Maps JS API key and am using that instead of the one provided but it still returns nothing. I'm very lost as I have not been able to find anything that can guide me to the right direction. Any help would be appreciated.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {
'packages': ['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' //used my own API key instead of theirs
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I know this is a vague question but than again this is a vague problem.
I have a simple Google GeoChart like so:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
<script>
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {'displayMode': 'markers'};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
you can find it here:
https://jsfiddle.net/0rd3hp7a/
now here's the thing. I have 2 domains / url's linked to this .php file.
the map generates fine on one domain and on the other the map pops up but the green markers do not.
Both domains run under php 5.2.17 and the provider tells me that both domains have same settings ... which is hard to believe since they work differently of the SAME file.
Any ideas where I can look for the problem???
There is a bug which is hard for me to solve, but I managed to narrow it down to simple steps that can be reproduced.
1) Go to https://developers.google.com/chart/interactive/docs/gallery/geochart
2) Copy paste the first GeoChart example in a file in the desktop
3) Add the country Sudan and South Sudan and save the file as mygeochart.html
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['Sudan', 700],
['South Sudan', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
What works
The above code will work if you double click the HTML file, and you will see that both Sudan and South Sudan are visible in green.
I can also confirm that this code works on JSFiddle.net.
What does not work when combining with ASP.NET
I checked that the issue described below occurs in ASP.NET Full framework and ASP.NET Core on VS 2015 update 3, whether the chosen template is empty or an MVC web application and for .Net 4.5.1 and 4.6.1. The empty template is the one which allows you to narrow down the issue.
Simply create one empty project and put the above HTML file in the solution folder, run the website and go to the page
http://localhost:xxxxx/mygeochart.html
The page will display correctly except for South Sudan, which remains white as if it had no data.
I am facing this problem on a production website and the countries below have this problem, too.
['South Sudan', 700],
['Kosovo', 700],
['Democratic Republic of the Congo', 700],
['Congo', 700]
These countries appear very well if you double click the HTML file, but will not show up when included in ASP.NET projects. I checked that this bug occurs on Firefox, IE, EDGE and Chrome browsers and, following WhiteHat's suggestion, the bug also occurs regardless of google-visualization versions ('current', 'upcoming' and versions '41' through '45').
We are running the GeoChart on a production website but it is hard for us to solve this issue.
Any idea?
something I noticed.
if you run / refresh the following Chart 1, over and over,
it appears there is a delay when filling in 'South Sudan'
it is consistently the last to fill color
however, if the ISO 3166-1 alpha-2 code is used -- 'SS'
there is no delay when filling the color, as in Chart 2 below.
maybe try using 'SS' instead of 'South Sudan'
test charts...
Chart 1 - 'South Sudan'
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['Sudan', 700],
['South Sudan', 700]
]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data);
},
packages: ['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
Chart 2 - 'SS'
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['Sudan', 700],
// use object notation to correct tooltip
[{v: 'SS', f: 'South Sudan'}, 700]
]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data);
},
packages: ['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
You can see in this fiddle
In the year 2004 I have values of 1000, and in the other years I have large values, for that reason in the scale the chart doesn't seems able to rendered, what can I do to show those values. I was reading this. Is there a way to do something like that in google chart?
Here is the 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 data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 1000],
['2005', 1170000, 460000],
['2006', 660000, 1120000],
['2007', 1030000, 540000]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
The chart
Google Chart´s axis have an option to set scale to logarithm, which fits better for big differences between lowest and highest values. Note that all values must be positive and if the data value is 1, it won´t show as logharithm scale starts at 1 or higher. To change it, use:
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, logScale:true}
You can find the documentation in configuration options section:
Google Chart Configuration Options
I'm trying to get google charts displayed on my page, but i can't figure how to pass values from django views to javascript so i can draw charts.
Django code:
array = ([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
args['array']= array
return render_to_response('progress.html',args)
progres.html :
<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 djangoData = '{{array}}';
var data = google.visualization.arrayToDataTable(djangoData);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
This way, the chart doesn't get displayed. Any suggestions ?
google.visualization.arrayToDataTable() appears to take a 2D (javascript) array. What you are passing it is a string. You'll need to parse it into an array. Try:
var djangoData = JSON.parse('{{ array }}');
var data = google.visualization.arrayToDataTable(djangoData);
In your view:
remove this line args['array']= array
change this line return render_to_response('progress.html',args) to return render_to_response('progress.html',{'array': json.dumps(array)})
In your template:
change this line var djangoData = '{{array}}'; to var djangoData = '{{ array | safe }}';
The rest of your code is fine. I hope this helps.
for me this combination works:
view:
from django.shortcuts import render
import json
(...)
context= {'array': json.dumps(array)}
return render(request,'progress.html',context)
template:
var djangoData = JSON.parse('{{ array | safe }}';);