Is there please a possibility to blend out (hide) a line in Google Line Chart?
We have many line charts with multiple series of close data values and my boss asks me to add a way to hide a series (preferably by clicking the line or the legend with a mouse).
I have added a select event listener to my very simple test case below (just open it in a browser and it will work), but I'm not sure what to do next:
<!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":-42.9},{"v":-42.4},{"v":-80},{"v":-35}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":-49.4},{"v":-39.9},{"v":-80},{"v":-32}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":-48.9},{"v":-48.6},{"v":-80},{"v":-32}]},
{"c":[{"v":"UTRA_1_UP"},{"v":-49.5},{"v":-49.4},{"v":-80},{"v":-35}]},
{"c":[{"v":"UTRA_2_UP"},{"v":-58.9},{"v":-58.9},{"v":-80},{"v":-38}]}],
"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"Row A","type":"number"},
{"p":{"role":"data"},"label":"Row B","type":"number"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","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));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(x, options);
}
}
function selectHandler(e) {
alert('How to hide a row in the chart?');
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>
Related
I would like to show geojson point coordinates as a line on a leaflet map.
A simplified code with some test data looks like this:
<html>
<head>
<!-- Load leaflet library and use its styling css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"> </script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" /> //not included
</head>
<body>
<div class="pagewrapper">
<div id="map"></div>
<button onclick="myFunction()">Click me</button>
</div>
<script type="text/javascript">
//add map and set view
var map = L.map('map').setView([48.8,13.03],6);
// add background layer "opentopomap"
var backgroundlayer = L.tileLayer ('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png');
map.addLayer(backgroundlayer);
//get geojson data
function myFunction() {
$.ajax({
type: 'GET',
dataType:"json",
url: "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_populated_places.geojson",
method: 'GET',
success: function(response) {
visualizer.sendDataToMap(response);
},
error:function(error) {
}
});
var visualizer = {};
//make geojson object and add to map
visualizer.sendDataToMap = function(jsonData) {
L.geoJson(jsonData).addTo(map);;
};
};
</script>
</body>
</html>
The part "visualizer.sendDataToMap(..)" might seem strange but is needed for some reason.
I managed to show the points on the map. But what I need is to show them as line (connect the first point with the second, connect the second point with the third ..).
I thought about writing the coordinates into an array which I then can use further in L.polyline() and use for some other calculations. I tried with response.geometry.coordinates and fiddled around with "coordsToLatLng" and some other suggestions I found in the forum. Maybe I need to loop through the coordinates, but I dont know how to do that. Could not get anything to work with my example.
Any hints would be appreciated.Thanks.
You can extract the coordinates from the geojson features by looping over geojson features array and mapping latitude and longitude. Then you will end up with an array of latLngs which is what you want to create the lines between the marker coordinates.
//make geojson object and add to map
visualizer.sendDataToMap = function(jsonData) {
console.log(jsonData)
L.geoJson(jsonData).addTo(map);
const latlngs = jsonData.features.map(feature => [feature.properties.LATITUDE, feature.properties.LONGITUDE]);
L.polyline(latlngs, {
color: 'red'
}).addTo(map);
};
};
Demo
I have the following JSFiddle, demonstrating a small Vega Bar chart:
<head>
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
</head>
<body>
<div id="view"></div>
<script type="text/javascript">
var view;
var chart = { Vega code removed for brevity - please check JSFiddle}
render(chart);
function render(spec) {
view = new vega.View(vega.parse(spec), {
renderer: 'canvas', // renderer (canvas or svg)
container: '#view', // parent DOM container
hover: true // enable hover processing
});
return view.runAsync();
}
</script>
</body>
If you copy the vega object into Vega Editor you get a tooltip when hovering over the chart elements.
Within the JSFiddle there is no tooltip.
Could someone please help me get a tooltip in the HTML-embedded version?
I have been able to get the full functionality through using vega-embed with versions listed below:
<!DOCTYPE html>
<html>
<head>
<script src="vega-5.17.3.min.js"></script>
<script src="vega-lite-4.17.0.min.js"></script>
<script src="vega-embed-6.15.0.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = { Vega code removed for brevity - please check JSFiddle}
vegaEmbed('#vis', spec).then(function(result) {
}).catch(console.error);
</script>
</body>
</html>
Sheets and Range Selection
When I am trying to run below code with Sheets Range "A:B" it works and when selecting "E:F" it's throwing an Error.
Please refer the the image for sample data and the spreadsheet is made accessible for checking the data.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Excel Pull Test</title>
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
// google.charts.load('current', {'packages':['corechart']});
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawSheetName);
// Load the Visualization API and the corechart package.
// Set a callback to run when the Google Visualization API is loaded.
// google.charts.setOnLoadCallback(drawSheetName);
function drawSheetName() {
var queryString = encodeURIComponent('SELECT A:B10');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Di7YkPars5zJs512RhM1wLEhfxUQfavgs6Z2GCIppV4/edit#gid=0&headers=1&tq='+queryString);
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
in the url for the sheet,
change --> edit# -- to --> gviz/tq?
as in...
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Di7YkPars5zJs512RhM1wLEhfxUQfavgs6Z2GCIppV4/gviz/tq?gid=0&headers=1&tq='+queryString);
this will let you select specific columns...
see following working snippet, which only selects column A...
google.charts.load('current', {
packages:['table']
}).then(drawSheetName);
function drawSheetName() {
var queryString = encodeURIComponent('SELECT A');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1Di7YkPars5zJs512RhM1wLEhfxUQfavgs6Z2GCIppV4/gviz/tq?gid=0&headers=1&tq='+queryString);
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
ALSO, you're using an old version of google charts.
jsapi should no longer be used, see update library loader code,
this will only change the load statement.
from...
<script src="https://www.google.com/jsapi">
google.load('visualization', '1.0', {packages: ['corechart']});
google.setOnLoadCallback(drawSheetName);
to...
<script src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawSheetName);
Is it possible to create pushpins from addresses instead of lat/long data?
I guess the pushpin constructor accepts only locations which are a lat/long representation of the location.
new Microsoft.Maps.Pushpin(value)
Is there any solution for creating pushpins from addresses.
Here is a sample code showing you how to find a location by address:
<!DOCTYPE html>
<html>
<head>
<title>searchbyaddressHTML</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
</head>
<body>
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
/* No need to set credentials if already passed in URL */
center: new Microsoft.Maps.Location(47.624527, -122.355255),
zoom: 8 });
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
var searchManager = new Microsoft.Maps.Search.SearchManager(map);
var requestOptions = {
bounds: map.getBounds(),
where: 'Washington, DC',
callback: function (answer, userData) {
map.setView({ bounds: answer.results[0].bestView });
map.entities.push(new Microsoft.Maps.Pushpin(answer.results[0].location));
}
};
searchManager.geocode(requestOptions);
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YourBingMapsKey&callback=loadMapScenario' async defer></script>
</body>
</html>
I am using YUI3 as the javascript framework for my application which is about 90% complete. I need to show some pretty charts, but YUI3's charting capabilities leaves a lot to be desired.
I am trying to use Google's Visualization API to generate plots within YUI3 sandbox but it seems to not be working. Here is the sample code:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src = 'build/yui/yui-min.js'></script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
<script type='text/javascript'>
var some_foo = function () {
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
YUI().use('node', function (Y) {
/* doing some super-awesome stuff */
/* now trying to show charts with some data */
some_foo();
});
</script>
When I place the call to some_foo() outside the YUI3 sandbox, the code works. However, when I try to call it from within YUI3, it does not work.
I have also tried declaring some_foo() within YUI3 sandbox, outside YUI3 sandbox, before YUI3 sandbox, and also after YUI3 sandbox. I have tried the code on FF14+ and Chrome20+.
Is there something I am missing?
#KingJulian, not sure if you already have the answer by now. I moved the google.load('visualization', '1', {packages:['gauge']}); from the "some_foo" function to a "script" tag and it worked.
Following code worked for me:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
</script>
<script type='text/javascript'>
var some_foo = function () {
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 80],
['CPU', 55],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
YUI().use('node', function (Y) {
some_foo();
});
</script>