Develop Reference

How to get data from firebase and display on my google gauge chart

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?

Change stroke width to 2 on a google pie chart

Am trying to make a chart with the google pie chart but the stroke-width of thye slices are to thin and im trying to make them thicker.
the code bellow is what i am using but unfortunately it isnt working.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Sitio', 'Dinheiro'],
['Restaurantes', 8],
['Bares', 2],
['Discotecas', 7]
]);
// Optional; add a title and set the width and height of the chart
var options = {
width: '92%',
height: 550,
color: 'white',
backgroundColor: '#232220',
chartArea: { top: '3%', width: '70%', height: '80%' },
slice: {
backgroundColor: {strokeWidth:2}
},
legend: { position: 'bottom', textStyle: { color: 'white', fontSize: 16 } },
pieSliceBorderColor : "tranparent"
};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="height: 370px; width: 92%;"></div>
have searched around but its always about the color and not the width of the slices width so i wasnt able to change it

Looking through the configuration options for the google pie chart there is no option to set the stoke width of the slices.
You can however set the stroke width using css:
<style type="text/css">
path {
stroke-width: 2;
}
</style>

How to set a Percentage of an Amount of work done using Google Charts

I've look over all the documentation and i cannot find where is specifically documents what type of data to pass to the pie chart to show what slice of a percentage is an amount that still needs work done when considering the pie is a whole of 100%.
Lets say we've got these following task.
1. Database
2. Front end
3. Web Design
Database is 45% done
Front end is 35% done
Web Design is 60 percent done.
I am able to pass percentages and decimals to the data table but I am getting lost when they're passing in number of 1, 3, 2 and so on.
The goal is for investors to see the amount of work left to do in the pie chart, how should i do this by working with decimals or percentages?
I might not be asking the correctly because if the amount of work left to be done when starting at 100% would not work.
How is it that i can display to the investor based on about 10 slices that make up 100% of the work to do, and what data should i pass to this type of pie?
<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([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
So, once again i would like to use a pie chart for investors to look at to see an amount of work done.
Here is my fiddler.
Check Fiddler

Pass a variable into the pie chart's data section that represents work not yet completed. You could hardcode this yourself, or use a value that is calculated by subtracting completed work from the total.
E.g.
Database = 45;
Backend = 35;
Web Design = 60;
Work Remaining = 300 - [Database + Backend + Web Design];
You could have its colour in the pie chart set to grey, and leave its name blank.

see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart('Database', 45);
drawChart('Front-end', 35);
drawChart('Web Design', 60);
},
packages:['corechart']
});
function drawChart(task, complete) {
var data = google.visualization.arrayToDataTable([
['Task', task],
['Complete', complete],
['Remaining', 100 - complete]
]);
var options = {
title: task,
pieHole: 0.3
};
var container = document.body.appendChild(document.createElement('div'));
var chart = new google.visualization.PieChart(container);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>

multiple google charts with separate options

I'm starting out with google charts (gauges)
i need to put multiple gauges on the same page, each with a different max value (which is set in options)
but what it seems is that the options is somehow global for all charts
they all become 0 to 1
here's my code
<script type="text/javascript">
google.charts.load('current', { 'packages': ['gauge'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.getJSON("Dashboard/GaugeData", function (jsn) {
var dGauges = $('#gauges');
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
$.each(jsn, function (i, item) {
data.addRow([item.Label, item.Pending]);
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, {
width: 400, height: 400,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5, max: item.Max
});
});
});
} setInterval(function () {
drawChart();
}, 10000);
</script>
please note that i cannot prepare a new div for each chart, since the amount of charts is dynamic (from json)
i believe i could create the divs dynamically and then check before each refresh if i need to add the div or remove etc... but i'm hoping there's a better way

GWT Combo Chart Draw

I'm using Gwt Combo Chart, How can I describe java script code in java. I got my result in JS, but I need the result in Java, here my JS code:
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month','Income', 'Expense','Average'],
['Dec', 100, 200, 150],
['Jan', 400, 100, 250],
['Feb', 150, 350, 250]
]);
var options = {
seriesType: 'bars',
series: {2: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

This is non GWT chart. As I can see - you need some kind of wrapper for that. There is a library for that. It's not maintained now, but still working well enough. Also you can check this topic.