I have data in my database. Let's say that I have all these for now:
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
DataBase table:
MyDailyRoutineTable
Task Hours per Day
Work 8
Eat 2
Commute 2
Watch TV 2
Sleep 7
//Do Chores 2 //eventually added
//Exercise 1 //eventually added
I want to be able to add more data from my database if later I decide to put something like 'Do chores' and 'Exercise' I want to read all the values directly from the database which would later be (dynamically filled from data in MyDailyRoutineTable):
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7],
['Do Chores', 2],
['Exercise', 1]
instead of:
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
it should be something like:
var data = google.visualization.arrayToDataTable([
{database data}
]);
The last 2 are not accounted for in the jsfiddle. What I want to know is how to read those from a mysql database and add them to the chart.
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
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="width: 900px; height: 500px;"></div>
Basically to achieve what you want, you will need to configure php scripts in your backend that will output data in JSON format. You can either send non-google-charts-compliant JSON, and then parse it in your front-end and build your charts, OR you can use google.visualization.arrayToDataTable() method on a google-chart compliant JSON. See link below. Having played around with google charts for quite some time, I would seriously recommend sending google-compliant JSON. Even if it's tedious and can take quite some time, you offload a lot of the calculations server-side and you gain abstraction.
Google Chart JSON format
Building array and formatting JSON for Google Charting API
Related
I have a chart in which hovering shows all the elements represented by bars, but they are too many and this produces problems such as the appearance of a scrollbar.
I would like to know if there is a way to show only the current bar that is hovering. In the c3.js documentation I see that this property exists to change the content of the tooltip, but I don't know how to get the current bar to which it is hovering.
With this:
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
console.log(d, defaultTitleFormat, defaultValueFormat, color);
return "fds";
}
this is my live code:
var query = [
["x", "Usuarios"],
["Berta Arroyave", 53],
["Rogelio Zuluaga", 52],
["Manrique Perez", 42],
["Justin Vargas", 33],
["Believer qw", 28],
["María Jimenez", 14],
["Nairo Quintan", 12],
["Adriana Cardona", 11],
["Departamento Idio", 9],
["Natalia Benjumea", 7],
["Bibliotecatos", 7],
["Jose Herrera", 7],
["Doralibia", 6],
["Secretaría General ", 6],
["Natalia Ochoa", 6],
["Viviana Cano", 5],
["Erika Valencia", 5],
["Sandra Cañon", 3],
["Lina Constanza Suaza", 3],
["Recepción User", 2],
["Facultad Medicina ", 2],
["Sandra Valencia", 2],
["Luz Sepulveda", 2],
["Heidy Zapata", 2],
["Gabriela García", 2],
["Auxiliar Administrativo", 2],
["Adriana Mejia", 2],
["Administrador", 1],
["Nathaly", 1]
]
c3.generate({
data: {
x: 'x',
columns: query,
type: 'bar'
},
axis: {
x: {
type: 'category' // this needed to load string x value
}
}
});
how can I do it?
https://jsfiddle.net/50uej3at/
I think your problem here is that your data is in the wrong format to what you appear to be aiming for... rather than having one entry per category you've got one category with everything as an entry within it...
If you put this line after your query data definition:
query = d3.transpose(query);
You should get one bar per person and no massive tooltips
https://jsfiddle.net/yta1s9cz/1/
(I also adjusted the axis label rotation to make the labels readable)
so this is my set up on my index.html. the api key has been generated at console.developers.google.com and I don't think that it was causing an error.
the problem is the arrayToDataTable is undefined, I put it on my index.html just to test if this would work but in my real apps it was separated to a component.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyC1PKyylEm8Xe0l0fnv81tuuUS-eOlrRCQ'
});
google.charts.setOnLoadCallback(drawStuff());
function drawStuff() {
var MapData = google.visualization.arrayToDataTable([
["Code", "Name", "Value"],
["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
["PH-05", "Bicol (Region V)", 2],
["PH-02", "Cagayan Valley (Region II)", 3],
["PH-40", "Calabarzon (Region IV-A)",4 ],
["PH-13", "Caraga (Region XIII)", 5],
["PH-03", "Central Luzon (Region III)", 6],
["PH-07", "Central Visayas (Region VII)", 7],
["PH-15", "Cordillera Administrative Region (CAR)", 8],
["PH-11", "Davao (Region XI)", 9],
["PH-08", "Eastern Visayas (Region VIII)", 10],
["PH-01", "Ilocos (Region I)", 11],
["PH-41", "Mimaropa (Region IV-B)", 12],
["PH-00", "National Capital Region Pambansang Punong", 13],
["PH-10", "Northern Mindanao (Region X)", 14],
["PH-12", "Soccsksargen (Region XII)", 15],
["PH-06", "Western Visayas (Region VI)", 16],
["PH-09", "Zamboanga Peninsula (Region IX)", 17]
]);
console.log(MapData);
// Set chart options
var MapOptions = {
'region': 'PH',
'resolution': 'provinces',
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.GeoChart(document.getElementById('chartdiv'));
chart.draw(MapData, MapOptions);
};
</script>
I really don't know what's missing in the set up.
First, remove the parentheses in ...
google.charts.setOnLoadCallback(drawStuff) // not drawStuff()
When you have the parenthesis, you are passing the result of calling the function, but the API wants to be given a handler function (not its result).
Furthermore, instead of ...
["Code", "Name", "Value"],
...try using the label syntax, like so...
[{label: 'Code', type: 'string'},
{label: 'Name', type: 'string'},
{label: 'Value', type: 'number'}],
The API should be able to figure it out without this change, but this is a "just-in-case-its-needed" sort of change that also makes the code more self-documenting.
Hi try with this console online for web html js css :
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = google.visualization.arrayToDataTable([
["Code", "Name", "Value"],
["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
["PH-05", "Bicol (Region V)", 2],
["PH-02", "Cagayan Valley (Region II)", 3],
["PH-40", "Calabarzon (Region IV-A)",4 ],
["PH-13", "Caraga (Region XIII)", 5],
["PH-03", "Central Luzon (Region III)", 6],
["PH-07", "Central Visayas (Region VII)", 7],
["PH-15", "Cordillera Administrative Region (CAR)", 8],
["PH-11", "Davao (Region XI)", 9],
["PH-08", "Eastern Visayas (Region VIII)", 10],
["PH-01", "Ilocos (Region I)", 11],
["PH-41", "Mimaropa (Region IV-B)", 12],
["PH-00", "National Capital Region Pambansang Punong", 13],
["PH-10", "Northern Mindanao (Region X)", 14],
["PH-12", "Soccsksargen (Region XII)", 15],
["PH-06", "Western Visayas (Region VI)", 16],
["PH-09", "Zamboanga Peninsula (Region IX)", 17]
]);
// Set chart options
var options = {
'region': 'PH',
'resolution': 'provinces',
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
In my case use angular 9, i consume WS service and next i try to send value on arrayToDataTable and ComboChart or GeoChart, and have the same error.
i fix issues i call the same function until all components angular is ready. add google chart on asset folder in angular and then i call you on index.html
i hope helpfully.
Example
your_function_name(){
your_ws_name().subscribe(
(data) => {
try {
//is ok
}
catch(e){
//to make until all elements google char on ready.
if (e.toString().includes('arrayToDataTable') ||
e.toString().includes('ComboChart')) {
this.your_function_name();
}
}
}
);
}
I'm using the google charts for show some graphs in my rails app.
I get a code example in internet and I'm testing in my app, but I'm with some dubs and I don't know why it's not working.
In a view, I put this code below:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
This show the graph correctly, but I if I pass a variable, didn't work, like that:
<% #test = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
] %>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<%= #test %>);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
This code don't show nothing, why?
Ps1: Sorry for English, I'm learning yet =]
this-
<% #test = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
] %>
just outputs as text into the html
if the variable is coming from the controller then;
<script type="text/javascript">
var test = <%= #test %>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(test);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
I know it sounds weird but this demo http://jsbin.com/ixUzURUB/1/edit I can't convert it into http://jsfiddle.net/jhb2L/ What am I doing wrong? Thanks.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
JSFiddle have problems when you add external resources that doesn't end in .js it seems. Added a ?fake=.js to the path and it worked. Also removed the window.onload = function() {}; that JSFiddle adds and now it seems to be working.
http://jsfiddle.net/jhb2L/3/
Try pasting this code it should work :
<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 data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
http://j1309.hizliresim.com/1f/v/t1ux0.png
Thats my chart and my code;
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
how can i make my labels like that picture. i want it shows values outside of chart
http://o1309.hizliresim.com/1f/v/t1uy7.png
Use in your options:
var options = {
title: 'My Daily Activities',
legend: {position: 'labeled'}
};
More Information here:
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart