I am trying to add min and max limits to a Google chart, which I generate using a Perl script from CSV data - by using the interval role for these 2 values.
Unfortunately the I-lines are not displayed at my line chart, even though I've set the min and max limits to the -100 and 100 for the sake of testing.
Only the main data is being displayed:
Can anybody please spot the error, what is wrong with my very simple test case?
Please just save the code below as an HTML-file and open in a browser:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-42.46912"}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":-100},{"v":100},{"v":"-39.9545"}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-48.68408"}]},
{"c":[{"v":"UTRA_1_UP"},{"v":-100},{"v":100},{"v":"-49.45148"}]},
{"c":[{"v":"UTRA_2_UP"},{"v":-100},{"v":100},{"v":"-58.96674"}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"},
{"p":{"role":"data"},"label":"1142926087","type":"number"}]}};
function drawCharts() {
for (var csv in data) {
var x = new google.visualization.DataTable(data[csv]);
var options = {
title: csv,
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById(csv));
chart.draw(x, options);
}
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>
(I don't want to use methods like addColumn or addRows. Instead I prepare my data as data structure in my Perl script and then JSON-encode and pass it to DataTable ctr).
You must specify the interval-role column after the data-column. As written in the API :
"All columns except domain columns apply to the nearest left neighbor to which it can be applied"
So if you change the order (and here with some smaller intervals)
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":"-42.46912"},{"v":-50},{"v":-45}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":"-39.9545"},{"v":-50},{"v":-45}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":"-48.68408"},{"v":-50},{"v":-45}]},
{"c":[{"v":"UTRA_1_UP"},{"v":"-49.45148"},{"v":-50},{"v":-45}]},
{"c":[{"v":"UTRA_2_UP"},{"v":"-58.96674"},{"v":-50},{"v":-45}]}],
"cols":[
{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"1142926087","type":"number"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"}
]}};
..You end up with :
Related
I have the following data in a Google Spreadsheet:
ColumnA ColumnB
Departament Quantity
01/01/2016 23
02/01/2016 43
04/01/2016 5
06/01/2016 65
10/01/2016 12
11/01/2016 32
13/01/2016 22
15/02/2016 2
And want to draw a linechart using HTML Templates: This is my code so far now
<!DOCTYPE html>
<html>
<head>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="main"></div>
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(getSpreadsheetData);
function getSpreadsheetData() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}
function drawChart(rows) {
var options = {'title':'Example','width':400,'height':300};
var data = google.visualization.arrayToDataTable(rows, false);
var chart = newgoogle.visualization.LineChart(document.getElementById("main"));
chart.draw(data, options)
}
</script>
</body>
</html>
My script to read the sheet:
function getSpreadsheetData() {
var ssID = "12GvIStMKqmRFNBM-C67NCDeb89-c55K7KQtcuEYmJWQ",
sheet = SpreadsheetApp.openById(ssID).getSheets()[0],
data = sheet.getDataRange().getValues();
return data;
}
However i cant draw the plot, this issue dissapear when i change the data to a numeric (i.e. 42370), but thats not what i want!
Question is: what do i have to add in order to change to the right format in x axis?
You can use the hAxis.format configuration option
var options = {'title':'Example','width':400,'height':300,//-->'format':'MM/dd/yyyy'};
The valid format options can be found here...
And if you need to load with a specific locale, see this...
Using the tutorial from google on using a spreadsheet as data for a chart I have created the following.
Tutorial
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawSheetName() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/15l3ZK45hv2ByOfkUiAKoKp-Z9a1u1-Q_rsLS7SqC51E/editgid=0&headers=1');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
}}
</script>
</head>
<body>
<!-- Identify where the chart should be drawn. -->
<div id="chart_div"/>
</body>
However no chart resolves, I have made the link public.
If I share the link it is https://docs.google.com/spreadsheets/d/15l3ZK45hv2ByOfkUiAKoKp-Z9a1u1-Q_rsLS7SqC51E/edit?usp=sharing
Following the docs and not sure where my error is.
This SO answer more about drive-sdk creates the key from a script from a new file, I don't really understand it and nuclear how you can obtain the correct URL for existing spreadsheets.
Would be great if there could be a consolidated answer obtaining correct sheets URL's.
Is this what you are trying to achieve?
If yes, you can check how it works here.
EDIT
Since I notice in the comments you want to query the spreadsheet and not use the entire spreadsheet, this is the logic to query with.
First, these are the basic components of the url to query:
var BASE_URL = "https://docs.google.com/a/google.com/spreadsheets/d/";
var SS_KEY = "stringSS_Key";
var BASE_QUERY = "/gviz/tq?tq=";
var partialUrl = BASE_URL + SS_KEY + BASE_QUERY;
Notice the BASE_QUERY variable
The first bit of the url is in the partialUrl variable.
Then, you need to use the Query Language that google provides. An example would be:
var queryToRun = 'select dept, sum(salary) group by dept';
You then need to call encodeURIComponent() on it, and add it to the partial URL. The final URL then becomes
var finalUrl = partialUrl + encodeURIComponent(queryToRun);
Only then you can run the google.visualiation.query as I suspect you intend.
var query = new google.visualization.Query(finalUrl);
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);
});
}
I've loaded the MapQuest JavaScript api module and am able to bring in the basic sample map at http://developer.mapquest.com/web/documentation/sdk/javascript/v7.0/basic-map but when I try to add map controls using their next example I get the JavaScript error:
map.addControl is not a function
I tried window.map.addControl but that generates the same error.
Does anyone know what might be wrong?
Thanks
You need to add the map control code within your MQA.EventUtil.observe
right after your call to window.map = new MQA.TileMap(options);
Code:
<html>
<head>
<script src="http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Kmjtd%7Cluua2qu7n9%2C7a%3Do5-lzbgq"></script>
<script type="text/javascript">
MQA.EventUtil.observe(window, 'load', function() {
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:10, /*initial zoom level of map*/
latLng:{lat:39.743943, lng:-105.020089}, /*center of map in latitude/longitude*/
mtype:'map' /*map type (map)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom','traffictoggle','viewoptions','mousewheel', function() {
map.addControl(
new MQA.LargeZoom(),
new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
);
map.addControl(new MQA.TrafficToggle());
map.addControl(new MQA.ViewOptions());
map.enableMouseWheelZoom();
});
});
</script>
</head>
<body>
<div id='map' style='width:750px; height:280px;'></div>
</body>
</html>
try like this map.current.addControl
Make sure you add the module for the control before adding the control to the map.
I am trying to display and update HLINEAR GAUGE fusionGadget pointer value. When I am dragging the pointer , the function FC_ChartUpdated is not being called. I have tried using RealtimeUpdateComplete eventListener too. But it displays error 'Object does not support property / method 'setAttribute''..Can you please tell me the reason?
We have to call that JS function or It will be called automatically when Gauge is updated?
Here is my code,
<html>
<head>
<title>FusionGadgets</title>
<script language="JavaScript" src="FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">FusionGadgets</div>
<script type="text/javascript">
var myChart = new FusionCharts("HLinearGauge.swf", "myChartId", "450", "120", "0", "0");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
<script>
FusionCharts("myChartId").addEventListener("RealtimeUpdateComplete" , myChartListener);
function myChartListener(){
alert('Hi.');
}
function FC_Rendered(DOMId)
{ //alert(Math.round(pointerValue));
//Check if DOMId is that of the chart we want
if (DOMId=="myChartId"){
//Get reference to the chart
var chartRef = FusionCharts(DOMId);
//Get the current value
var pointerValue = chartRef.getData(1);
//You can also use getDataForId method as commented below, to get the pointer value.
//var pointerValue = chartRef.getDataForId("CS");
//Update display
alert(Math.round(pointerValue));
}
}
</script>
</html>
Finally,After had been working for several hours,this issue has been resolved.These are the steps which made the issue was resolved...
1.passing registerWithJs value '1'.
var myChart1 = new FusionCharts("HLinearGauge.swf", "myChartId1", "450", "105", "0", "1");
2.Changed Flash Player Global Security Settings..
for more info
3. Chang the FusionCharts.js file to new version.
4.After had made these changes,I encountered with new issue,
chartRef.getData(1) gives javascript error (Object does not support the property/method).
So then I changed the code for getting chart reference
to
var chartRef = getChartFromId(DOMId);
from
var chartRef = FusionCharts(DOMId);