I'm VERY new to google charts and I cant seem to find the problem in my code:
My php file returns:
{"cols":[{"id":"","label":"Time","type":"string"},{"id":"","label":"Max","type":"number"},{"id":"","label":"Average","type":"number"}],"rows":[[{"c":[{"v":"2013-11-19
14:38:00"},{"v":2576},{"v":2144}]},{"c":[{"v":"2013-11-19
14:39:00"},{"v":1960},{"v":1682}]},{"c":[{"v":"2013-11-19
14:40:00"},{"v":1789},{"v":1565}]},{"c":[{"v":"2013-11-19
14:41:00"},{"v":1995},{"v":1654}]},{"c":[{"v":"2013-11-19
14:42:00"},{"v":14647},{"v":11638}]},{"c":[{"v":"2013-11-19
14:43:00"},{"v":7512},{"v":5202}]},{"c":[{"v":"2013-11-19
14:44:00"},{"v":2056},{"v":1681}]},{"c":[{"v":"2013-11-19
14:45:00"},{"v":1874},{"v":1524}]},{"c":[{"v":"2013-11-19
14:46:00"},{"v":1706},{"v":1385}]},{"c":[{"v":"2013-11-19
14:47:00"},{"v":2244},{"v":1667}]},{"c":[{"v":"2013-11-19
14:48:00"},{"v":16198},{"v":13145}]},{"c":[{"v":"2013-11-19
14:49:00"},{"v":17549},{"v":13886}]},{"c":[{"v":"2013-11-19
14:50:00"},{"v":1824},{"v":1513}]},{"c":[{"v":"2013-11-19
14:51:00"},{"v":2299},{"v":1762}]},{"c":[{"v":"2013-11-19
14:52:00"},{"v":20273},{"v":13167}]},{"c":[{"v":"2013-11-19
14:53:00"},{"v":3024},{"v":2231}]},{"c":[{"v":"2013-11-19
14:54:00"},{"v":14386},{"v":10450}]},{"c":[{"v":"2013-11-19
14:55:00"},{"v":16368},{"v":13741}]},{"c":[{"v":"2013-11-19
14:56:00"},{"v":4528},{"v":2717}]},{"c":[{"v":"2013-11-19
14:57:00"},{"v":3655},{"v":2601}]},{"c":[{"v":"2013-11-19
14:58:00"},{"v":3456},{"v":2624}]},{"c":[{"v":"2013-11-19
14:59:00"},{"v":4818},{"v":2917}]}]]}
I would like to draw a graph that plots time on x and then two lines with MAX and AVERAGE values.
I believe the issue Lies somewhere in my HTML/JAVASCRIPT code.
<html>
<head>
<title>Dashboard</title><meta name=keywords /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!---->
<style type="text/css">
body { background-color: #ffffff; padding-left: 1%; padding-bottom: 100px; }
footer{font-size:small;position:fixed;right:5px;bottom:5px;}
</style>
<style>h1 {color:white; font-size:24pt; text-align:center;font-family:arial,sans-serif }.menu {color:white; font-size:12pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }table2 {background:black }p {color:black; font-size:12pt; text-align:justify;font-family:arial,sans-serif }p.foot {color:white; font-size:9pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }a:link, a:visited, a:active {color:white}
</style>
</head>
<body>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "get_sql_data.php",
dataType: "json",
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, {width: 400, height: 240});
}
});
}
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div><table width=100% bgcolor=black cellpaddin g=0 border=0>
</body>
It seems that your json data are in bad format. cols are ok:
{
"cols":
[
{
"id":"", "label":"Time",
"type":"string"
},
rows have one extra pair [ ... ] which should be removed:
"rows":
[
[
{
"c":[
{"v":"2013-11-19 14:38:00"},
{"v":2576},
{"v":2144}
]
},
To get
"rows":
[
{
"c":[
{"v":"2013-11-19 14:38:00"},
{"v":2576},
{"v":2144}
]
},
See also Google line chart visualization with JSON blob.
Related
I used arraytodatatable and tried to showed my data on the map, but I did not see any markers on the map.
Here is the code that I used
<html>
<head>
<title>Google Charts Tutorial</title>
<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: ['map'],'mapsApiKey': 'my
API'});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin:
0
auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
// Set chart options
var options = {
showTip: true,
};
// Instantiate and draw the chart.
var chart = new
google.visualization.Map(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
The error message I got was:
maps.google.com/mapfiles/ms/micons/red-dot.png:1 GET
file://maps.google.com/mapfiles/ms/micons/red-dot.png
net::ERR_FILE_NOT_FOUND
Does this mean the image that marker used does not exist anymore? If so, is there a way for me to change the color the marker so I can get the problem fixed?
I am new to web based visualization tool I used chartjs before but I did not find any solution for chartjs so, I transferred to canvasjs.Now I'm done creating the chart and it is successfully shown, thus I want to make it moving without refreshing because the data from the database is constantly moving. Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
window.onload = function () {
$.getJSON("json.php", function(result){
var dps= [];
//Insert Array Assignment function here
for(var i=0; i<result.length;i++) {
dps.push({"label":result[i].ts, "y":result[i].ph});
}
//Insert Chart-making function here
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled:true,
panEnabled:true,
animationEnabled:true,
title:{
text: "myChart from mySQL database"
},
axisX:{
title: "TimeStamp"
},
axisY:{
title: "myDataPoints",
minimum: 0
},
data: [{
type: "spline",
dataPoints:
dps
}]
});
chart.render();
});
}
</script>
</head>
<body>
<div id="chartContainer" style="width: 800px; height: 380px;"></div>
</body>
</html>
now, I would like to ask for help out there What do I need to keep this chart moving...??
If you want the lines to move, you need to remove dataPoints from the beginning of the array. You can do so using shift function in JS.
for(var i=0; i<result.length;i++) {
dps.push({"label":result[i].ts, "y":result[i].ph});
dps.shift();
}
This would do the trick for you.
So I have a working google chart that uses a CSV file, parses the CSV data as a string into an array, and uses the array as the datatable.
I actually asked a question and answered it myself Here.
That link will show you a full chunk of code that I used in my full working website.
I intended to just pull the script from the test file and drop it into my website, but now that I've moved it over and included the scripts I needed, I'm getting an error as:
Type Error: $.csv is undefined
Here is the code where $.csv is being utilized (var arrayData), this is a function for drawing the chart
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.csv.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> // load the visualisation API
google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>
<script type="text/javascript">
function drawVisualization() {
$.get("Thornton.M2.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);
// CAPACITY - En-route ATFM delay - YY - CHART
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'crt_ertdlyYY',
dataTable: data,
options:{
width: 450, height: 160,
title: 'EU-wide en-route ATFM delays (year to date)',
titleTextStyle : {color: 'grey', fontSize: 11},
}
});
crt_ertdlyYY.draw();
});
}
google.setOnLoadCallback(drawVisualization)
</script>
</head>
<body>
<div id="crt_ertdlyYY"></div>
</body>
This example works fully as you can see from the link I had posted before hand, if you wanted to test it. But now that I pull it into my main site the .csv calls do not recognize. I also have 2 other google charts on this page that still work properly so it's isolated to this issue. I'm very new to google charts and pretty confused here!
I want to create a var myGeojson in an html file that uses the data in a separate locally stored .geojson or .js file. I can do this by creating a var in the .geojson file, which can be used in the html file. However I need to use multiple large unaltered geojson files, Is there a way to create the var in the html but store the data in the geojson?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script src='data/example.geojson'></script>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
L.mapbox.map('map', 'examples.map-xxxxxxxx')
.setView([37.8, -96], 4)
.featureLayer.setGeoJSON(myGeojson);
</script>
</body>
</html>
data/example.geojson
var myGeojson =
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
What about using the XHR functionality already included in L.mapbox.featureLayer?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
var map = L.mapbox.map('map', 'examples.map-xxxxxxxx').setView([37.8, -96], 4);
var layer1 = L.mapbox.featureLayer('data.geo.json').addTo(map);
// You could add as much layers as you want
// var layer2 = L.mapbox.featureLayer('moredata.geo.json').addTo(map);
// Or you could load new data into an existing layer:
//layer1.loadURL('newdata.geo.json');
</script>
</body>
</html>
data.geo.json:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
Here's a working example on Plunker: http://plnkr.co/edit/jAkQ7v9XVIDCDnQQzpWK?p=preview
But as said in the comments, if you're really adament on taking an extra (in my eyes unnecessary) step then you can use a XHR library of choice and fetch the file and assign it to a variable (using jQuery's $.getJSON here):
// Empty featureLayer
var featureLayer = L.mapbox.featureLayer().addTo(map);
// Variable for your data
var geojsonData;
// Fetch the file
$.getJSON('data.geo.json', function (results) {
// Assign the results to the geojsonData variable
geojsonData = results;
// Assign the data to the layer
featureLayer.setGeoJSON(geojsonData);
});
Here's a working example on Plunker: http://plnkr.co/edit/ayYgF5fi1MKgTRBg3YAt?p=preview
But i don't see why you want to pull in another dependency like jQuery if featureLayer itself has the complete XHR functionality you need. But ok :)
How can I have two google charts on one page? I'm using super proxy to get JSON table from google analytics API.
Currently, only the first chart (Table) is shown. Missing the second chart.
My code is attached below. I'm not so familiar with the API things. I checked some solutions, but all have data locally instead of from online sources, e.g., spreadsheet, JSON table.
Any help would be appreciated.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
</script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table','geochart']});
google.setOnLoadCallback(drawVisualization);
function drawCountriesTable() {
var CountriesTableWrapper = new google.visualization.ChartWrapper({
"containerId": "CountriesTable_div",
"dataSourceUrl": "https://top3dapp.appspot.com/query?id=agpzfnRvcDNkYXBwchULEghBcGlRdWVyeRiAgICAgICACgw&format=data-table-response",
"refreshInterval": 43200,
"chartType": "Table",
"options": {
"showRowNumber" : true
}
});
CountriesTableWrapper.draw();
}
function drawRegionsMap() {
var RegionsMapWrapper = new google.visualization.ChartWrapper({
"containerId": "RegionsMap_div",
"dataSourceUrl": "https://top3dapp.appspot.com/query?id=agpzfnRvcDNkYXBwchULEghBcGlRdWVyeRiAgICAvKGCCgw&format=data-table-response",
"refreshInterval": 43200,
"chartType": "GeoChart",
"options": {
"displayMode": 'markers',
"colorAxis": { "colors": ['#A9DEF2', '#048DC7'] }
}
});
RegionsMapWrapper.draw();
}
function drawVisualization() {
drawCountriesTable();
drawRegionsMap();
}
</script>
</head>
<body>
<h2>Countries</h2>
<div id="CountriesTable_div" style="margin:auto;width:630px;"></div>
<h2>Regions</h2>
<div id="RegionsMap_div" style="margin:auto;width:630px;"></div>
</body>
The is a bug of super proxy. Bug report see:
https://github.com/googleanalytics/google-analytics-super-proxy/issues/17
Following the steps as suggested on github:
Open query_helper.py
Go to the method 'GetPublicEndpointResponse'
In line 395, you should see
transformed_response_content = response.get('transformed_content')
Change that line to:
transformed_response_content = transform.Transform(response_content)
Test/Deploy updates