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);
Related
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 tried to get data from firebase to display on gauge chart but it's doesn't show anything and shown error "Uncaught (in promise)
Here's my js code.
<script type="text/JavaScript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var database = firebase.database();
var Temperature;
database.ref().on("value", function(snap){
Temperature= snap.val().Temperature;
});
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', Temperature]
]);
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);
}
</script>
Data is loaded from Firebase asynchronously, since it may take some time. While this is happening, your main code will continue to run. Then once the data is available, your callback is called.
This means that right now, your chart.draw(data, options) runs before the Temperature= snap.val().Temperature has been executed. That explains why you don't see any data in your chart.
The solution is always the same: any code that needs the data from the database, needs to be inside the callback, or be called from there. So in your case, the simplest fix is:
function drawChart() {
var database = firebase.database();
var Temperature;
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'));
database.ref().on("value", function(snap){
Temperature= snap.val().Temperature;
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', Temperature]
]);
chart.draw(data, options);
});
}
Also see:
Why Does Firebase Lose Reference outside the once() Function?
Anybody help me to create a multi ring donut chart using google chart ?
https://developers.google.com/chart/interactive/docs/gallery/piechart#donut
I need like following image with multilevel colors.
This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.
With that API, it was (and still is) possible to create concentric pie charts such as the one below
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
which yields the following pie chart
Also you can play with the API and easily create your own pie charts here:
http://www.jonwinstanley.com/charts/
Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue
I know it's has been a long time ago but here's one way you can do this, using google charts:
But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.
You can control the size and pieHole with 3 variables.
If you need more rings you need to replicate the logic of the first pie hole, but your code will grow kkkk.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.8;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['c#', 30],
['python', 30],
['javascript', 30],
['sql server', 30],
['php', 30],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_1" ></div>
<div id="donut_2"></div>
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);
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);