I would like to open a new tab like <a href="http://google.com"
target="_blank">Plant 1</a> whenever click on the Chart with
Javascript.
Summary:
When you click on Plant 1 in the Chart, a new tab with google.com will appear.
When you click on Tan Thanh in the Chart, a new tab with dell.com will appear.
When you click on Plant 3 in the Chart, a new tab with w3schools.com will appear.
When you click on Plant 4 in the Chart, a new tab with simplion.com will appear.
Demo
HTML:
<div id="chart_div" style="width: 550px; height: 500px;"></div>
Javascript:
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'link', 'Sales', 'Expenses'],
['Plant 1', 'http://google.com', 1000, 400],
['Tan Thanh', 'http://dell.com', 1170, 460],
['Plant 3', 'http://w3schools.com/', 660, 1120],
['Plant 4', 'http://simplion.com', 1030, 540]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 3]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function (e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1);
}
// Add our selection handler.
google.visualization.events.addListener(chart, 'select', selectHandler);
}
Use
window.open( data.getValue(chart.getSelection()[0]['row'], 1), options.title, "height=200,width=200");
Instead of,
window.location = data.getValue(chart.getSelection()[0]['row'], 1);
Related
I realized a custom visualization for Looker Studio using the approach explained in this Codelab as well as this YouTube Video exploiting the d3 library. I am basically happy with the result, but it turns out the visualization does not blend in well with Looker Studio standard components.
At this point I realized I would be able to use Google's own library Google Charts. My hope is that the resulting graph will look more native to the Looker Studio environment. However, I have trouble implementing Google Charts code. The following example of a very fundamental line graph is provided by Google, so I assume it must be working:
<html>
<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 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',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
And here is how I tried to do the same thing for the custom visualization:
const dscc = require('#google/dscc');
const viz = require('#google/dscc-scripts/viz/initialViz.js');
const local = require('./localMessage.js');
// write viz code here
const drawViz = (data) => {
// Create the script tag
const script = document.createElement("script");
script.src = "https://www.gstatic.com/charts/loader.js";
script.type = "text/javascript";
// Append the script tag to the head of the document
document.head.appendChild(script);
// Create the div tag
const div = document.createElement("div");
div.id = "curve_chart";
div.style.width = "900px";
div.style.height = "500px";
// Append the div tag to the body of the document
document.body.appendChild(div);
google.charts.load('current', {'packages':['corechart']});
google.charts.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',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
};
drawViz(local.message);
using npm run start to inspect the result on the localhost, does not produce any errors, but the output is simply entirely empty. HTML and JavaScript are not exactly my strengths, so I am pretty lost even on where to look for the problem and a solution. I feel like it is only a minor oversight and I am hoping you can help me.
Thanks in advance!
What I tried
including google-charts via const google = require('google-charts'); after installing it with npm. However, my new friend chat gpt told me that wouldn't be necessary
The following lines in the script above were already attempts to add necessary infrastructure to the enclosing HTML-document. It did not help, though
// Create the script tag
const script = document.createElement("script");
script.src = "https://www.gstatic.com/charts/loader.js";
script.type = "text/javascript";
// Append the script tag to the head of the document
document.head.appendChild(script);
// Create the div tag
const div = document.createElement("div");
div.id = "curve_chart";
div.style.width = "900px";
div.style.height = "500px";
you may need to wait for the google script to load before trying to use it.
see script.onload and loadGoogle
const dscc = require('#google/dscc');
const viz = require('#google/dscc-scripts/viz/initialViz.js');
const local = require('./localMessage.js');
// write viz code here
const drawViz = (data) => {
// Create the script tag
const script = document.createElement("script");
script.src = "https://www.gstatic.com/charts/loader.js";
script.type = "text/javascript";
script.onload = loadGoogle;
// Append the script tag to the head of the document
document.head.appendChild(script);
// Create the div tag
const div = document.createElement("div");
div.id = "curve_chart";
div.style.width = "900px";
div.style.height = "500px";
// Append the div tag to the body of the document
document.body.appendChild(div);
function loadGoogle() {
google.charts.load('current', {'packages':['corechart']});
google.charts.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',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
};
drawViz(local.message);
I am trying to create a function which will open a new window tab and display a chart for a set of values. I am able to get up this but for some reason, the new tab is opening up but no data is displayed in the page. Could you please suggest where I am going wrong.
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Name', 'TimeTaken'],
['BookMark1', 10],
['BookMark2', 20],
['BookMark3', 10],
['BookMark4', 20],
['BookMark5', 30],
['BookMark6', 26]
]);
var options = {
title : 'Time Taken to Apply Each Bookmark',
vAxis: {title: 'Time_Seconds'},
hAxis: {title: 'Bookmark_Name'},
seriesType: 'bars',
series: {5: {type: 'line'}}
};
var w=window.open("");
var newNode = w.document.createElement('div');
newNode.setAttribute("Id", "chart_div");
newNode.setAttribute("style", "width: 2000px; height: 1000px;");
var chart = new google.visualization.ComboChart(document.getElementById("chart_div"));
chart.draw(data, options);
}
You are trying to find the node from the wrong document. This solution is working:
var w=window.open("");
w.document.body.innerHTML += '<div id="chart"></div>';
chart = new google.visualization.ColumnChart(w.document.getElementById("chart"));
chart.draw(dataTable, options);
I have different countries which I get with json and add to google charts. Each country has a link to a specific site. It works for me. But the name of the tooltip/label is a link. How can I remove the link in the tooltip and add the name of the country?
And how can change the country border color to white?
thx in advance.
HTML
<div id="visualization"></div>
JavaScript
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.arrayToDataTable([
['Country','Link',],
['Canada','http://www.google.ca'],
['Russia','http://www.bbc.com'],
['Australia','http://www.nytimes.com'],
]);
var options = {
colorAxis: {colors: 'white'},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: 'black',
displayMode:'regions',
tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
legend:'none',
height:300,
width:400
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(data, options);
function myClickHandler(){
var link = data.getValue(chart.getSelection()[0]['row'],1);
// Change the current site
location.href = link;
}
}
first, recommend not using jsapi to load the library
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.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement, to...
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
(the callback can be added to the load statement as well)
next, according to the data format for regions mode,
the second column should be a number (not a string / link)
but since the link is needed for the click handler, use a DataView to hide the column from the chart
^ this will fix the tooltip -- adding the name of the country instead of the link
the number column drives the shading of the country, according to the colorAxis
if no number is provided, as in the question, then colorAxis will have no effect
last, there are no standard options to control the country border
see following working snippet...
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country','Link',],
['Canada','http://www.google.ca'],
['Russia','http://www.bbc.com'],
['Australia','http://www.nytimes.com'],
]);
var view = new google.visualization.DataView(data);
view.hideColumns([1]);
var options = {
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: 'black',
displayMode: 'regions',
tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
legend: 'none',
height:300,
width:400
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(view, options);
function myClickHandler(){
var selection = chart.getSelection();
if (selection.length > 0) {
var link = data.getValue(selection[0].row, 1);
window.open(link, '_blank');
}
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>
I am using the Google Charts and i need to update a map that is already instantiated as a map worth actually want when you click the refresh button the data inside of a map.
Today I am doing in the following way:
var dataGraf = google.visualization.arrayToDataTable(parsVal);
var chart = document.getElementById('curve_chart');
chart.draw(dataGraf);
But nothing happens. For i instantiate my map i used the following commands:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(parsVal);
var options = {
title: 'Membros x Visitantes',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
How can i do to update, just when I click the button. Remembering that my 'ataGraf' has my array with the new values.
I did a JsFiddle to illustrate my problem.
first...
google.charts.load & setOnLoadCallback should only be called once per page load
you can also include the callback in the load statement
next, by saving a reference to the original chart, you can animate from one dataset to another
on the button click, create data and call draw
also recommend not adding event handlers directly in html tags
see following working snippet, the data is "swapped" on each button click...
google.charts.load('current', {
callback: function () {
// draw first chart
var data = google.visualization.arrayToDataTable([
['Data', 'Membros', 'Visitantes'],
['1', 4, 6],
['2', 5, 7]
]);
var options = {
animation: {
startup: true,
duration: 1200,
easing: 'linear'
},
title: 'Membros x Visitantes',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
// draw same chart with new data on button click
var newData = null;
document.getElementById('chart_button').addEventListener('click', drawNewChart, false);
function drawNewChart() {
// switch between newData and data on each click
if (newData === null) {
newData = google.visualization.arrayToDataTable([
['Data', 'Membros', 'Visitantes'],
['1', 9, 2],
['2', 1, 7]
]);
chart.draw(newData, options);
} else {
chart.draw(data, options);
newData = null;
}
}
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="chart_button">Atualizar gráficos</button>
<div id="curve_chart"></div>
I am implementing Google Geo Map, what i am trying to do is that e.g if i click US on the map i would get name of the country as alert(e.g if i click US, i must get US as alert), which i can eventually use as a variable. When i try to loop over the selected Div i get
(Undefined) as alert
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.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 = {};
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 am trying to fetch elements with in chart_div element.
jQuery('#chart_div').on('click', function(){
jQuery(this).children().each(function () {
alert(this.value);
});
});
Don't use a jQuery event handler - the Visualization API has built-in event handling that will do this:
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length) {
alert(data.getValue(selection[0].row, 0));
}
});
chart.draw(data, options);