I have created a bar chart using google charts, this is a CORE Chart
I have tried getting the bar chart to change colours and adding an additional tooltip information to it, so that the tooltip shows a bit more information
I have gone through the google documentation and i cant see what i am doing wrong
For easy reading this is the output of my code on the source
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var exams = [["Date", "Score",({type: 'string', role: 'tooltip'})], ["18 Oct", 39,"TEST"], ["26 Oct", 20,"TEST"], ["26 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"]];
if(exams.length > 1){
var data = google.visualization.arrayToDataTable(exams);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Results",
width: 1170,
height: 700,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
else{
$("#columnchart_values").html('No Data found to show graph');
}
}
This is the google documentation i have been following, its slightly different
to mine as i am getting my data from a database, but it should give the same output.
I have gone through many examples and i am replicating them as close as possible and just not having any luck
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
I also have the exact same problem with color, i cant get colors on bar charts to change both having the same problem that it just doesn't do anything
Am i missing something??
the tooltip column is not being included in the data view.
view.setColumns([0, 1]);
to add the tooltip...
view.setColumns([0, 1, 2]);
Related
help me in upper or lower code problem must be appreciated
i want to make a bar chart and populate it from my collection from meteor i
want to print exercises with there status
but when i return one record from db it is working well graph is coming but
when coming two records its not working kindly help in it
Just help me that how i can make a correct JSON format for "google visualization graph" from meteor mongodb
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
console.log("graphData==========",graphData)
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Room' });
data.addColumn({ type: 'string', id: 'Name' });
data.addRows([
[ myDoc.status, myDoc.patientExerciseName]
])
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
Note : Foreach function when return two rows from database it not works
as i also try this
when i give JSON to my graph it is giving error "Invalid data table format:
must have at least 2 columns".
how i can make a JSON format which support Google visualization charts
please help me mine code is there
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var Mydoc=JSON.stringify(myDoc)
var data = new google.visualization.DataTable(Mydoc)
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
1) Check that the data is received: in Meteor it is sometimes tricky as publications may not be ready when you draw your chart. You need to make sure you wait for the publication to be ready. (Use console log to log the data and see if it's there, as within the debugger the data will be there by the time you look it up
2) once you are sure the data is there, read the GoogleChart docs: it is a fairly extensive library with lots of examples, so just make sure you data matches the right format.
this question and answer should help:
Building array and formatting JSON for Google Charting API
Using {role: 'style'} I can apply different colors to a single series bar chart. But if I use the new Google "Material" barcharts, I can't.
"regular" Google charts (works):
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Element', 'Density', {role: 'style'} ],
['Copper', 8.94, 'color: #FF9900'],
['Silver', 10.49,'color: #109618'],
['Gold', 19.30,'color: #3B3EAC'],
['Platinum', 21.45,'color: #0099C6']
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: '85%'},
legend: { position: 'none' },
};
var chart = new google.visualization.ColumnChart(document.getElementById('barchart_values'));
chart.draw(view, options);
}
Same chart but using Google "Material" bar chart (different colors are not applied)
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' } ],
['Copper', 8.94, 'color: #FF9900'],
['Silver', 10.49,'color: #109618'],
['Gold', 19.30,'color: #3B3EAC'],
['Platinum', 21.45,'color: #0099C6']
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: '95%'},
legend: { position: 'none' },
};
options = google.charts.Bar.convertOptions(options);
var chart = new google.charts.Bar(document.getElementById('barchart_values'));
chart.draw(view, options);
}
It really seems impossible. There is no clou anywhere for Material Charts using individual colors, and if you set a color array the old way, like colors: [...] the Material Chart just adopt the first color and add this to all the bars. I believe this is not implemented in Material Charts at all (yet?).
But if you really want to colorize the bars, you can do it by code :
function colorize() {
var colors = ['#FF9900', '#109618', '#3B3EAC', '#0099C6'],
svg = document.getElementById('barchart_values').querySelector('svg'),
bars = svg.querySelectorAll('path');
for (var i=0;i<bars.length;i++) {
if (i !== selected) bars[i].setAttribute('fill', colors[i]);
}
}
colors[] are the colors from your data DataTable above. It is safe just to target <path>'s, since the paths that visualizes the bars are the only one present inside the <svg>.
This function can be triggered by the ready event :
google.visualization.events.addListener(chart, 'ready', colorize);
Since the chart is continuously redrawn upon select and onmouseover, attach listeners to those events too :
google.visualization.events.addListener(chart, 'select', colorize);
google.visualization.events.addListener(chart, 'onmouseover', colorize);
and let the user be able to select a bar, i.e dont redraw a selected bar :
function colorize() {
var colors = ['#FF9900', '#109618', '#3B3EAC', '#0099C6'],
selection = chart.getSelection(),
selected = selection[0] ? selection[0].row : -1,
svg = document.getElementById('barchart_values').querySelector('svg'),
bars = svg.querySelectorAll('path');
for (var i=0;i<bars.length;i++) {
if (i !== selected) bars[i].setAttribute('fill', colors[i]);
}
}
your Material Chart added with the code from above -> http://jsfiddle.net/o00oayvu/
This one helps me out
var tmpColors = new Array(['orange'],['purple'],['red'],['green']);
loop{
.....
.....
options.colors = tmpColors[i];
....
....
}
I have made a Google column chart.
It displays ok. but the vertical axis label is showing an unit that I never set myself.
here is the screen shot.
I don't understand why it displays "1 td" instead of 1000 , "1,2 td" instead of 1200.
Here is my code:
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
….
….
]);
var options = {
title: 'My Test',
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
my code has nothing special part for the vertical axis and I used from google chart gallery. why it gets 'td' unit for vertical axis even I didn't set myself?
Is it Google column chart default option?
I try to manipulate the vertical axis value with vAxis:. but no luck.
Any advices?
Apparently, when using material bar charts, the y-axis (vAxis) default format is short, meaning showing td for thousands and so on. To reset this set format to '' :
var options = {
axes : {
y : {
all : {
format : {
pattern : ''
}
}
}
}
}
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
demo -> http://jsfiddle.net/sfc9aLd4/
But the material charts are still in beta, and a lot of the options are yet not documented or documented poorly. Luckily we can use the google visualization options object layout and convert it with convertOptions(options) :
var options = {
vAxis : {
format : '' //or #####
}
}
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
Will result in the same as above axes : { ... }
demo -> http://jsfiddle.net/3aq7gucd/
With material charts there seems to be some differences for format. 'none' is now ''. decimal should be changed to ####.## or likewise. scientific, currency and percent works as before.
Is there any way to make google charts tooltip always visible, no matter where the mouse pointer is?
it should be constantly on after page load
The best I could come up with is:
http://jsfiddle.net/xDfLd/
But if you interact with the chart (ie, click on different pie segments, or different line segments), the tooltip will disappear. Setting enableInteractivity:false I'll file a bug that tooltips and selections should still display when interactivity is off anyway.
I combined what Jeremy posted with Yasen's comment and came to this solution:
var options = {
enableInteractivity: false,
selectionMode: 'multiple',
tooltip: {
trigger: 'selection'
}
};
google.visualization.events.addListener(chart, 'ready', function(e) {
var selected_rows = [];
for (var i = 0; i < your_total_number_of_rows - 1; i++) {
selected_rows.push({row: i, column: null});
}
chart.setSelection(selected_rows);
});
chart.draw(data, options);
This shows all the tooltips on load and prevents the user from messing around with them. Works great with the Pie Chart.
Use tooltip: { trigger: 'selection' } when defining options for the chart.
I'm generating some Google Charts and I'm stuck here. Google allows you to have your columns stacked. But it's either limited or I can't configure it to work. Taken from Google, here is an example showing number of cups of coffee produced in each year for two countries:
Say I have another data set for the same two countries, but this time I have instant coffee instead of ground. Example:
What I'd like to do is to stack these two datasets on top of each other. So each column would be a single country, but two divisions: bean and instant coffee.
I was thinking if there was a way of formatting the data table in the following way:
['Year', 'Austria', 'Austria (instant)', 'Bulgaria', 'Bulgaria (instant')],
['2003', 1736060, 10051, 250361, 68564],
['2004', 1338156, 65161, 786849, 1854654],
['2005', 1276579, 65451, 120514, 654654]
to generate something like
Your help is appreciated.
I just ran into this same issue today and followed your submission link. It seems that just recently someone replied with this:
"This is actually possible with the new Material Bar chart (albeit in
a somewhat roundabout way). In the new chart, if you make a chart
stacked, but place some series on a different axis, that creates a
separate stack for those series. Unfortunately, there is currently no
way to completely hide an axis yet, and you will have to explicitly
set the view window. Eventually we will introduce options to hide axes
and to align view windows, but this will have to do for now."
This fiddle seemed to help me solve this problem: http://jsfiddle.net/p7o0pjgg/
Here's the code:
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');
data.addRows([
['2001', 321, 621, 816, 319],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 123, 578],
['2004', 197, 536, 613, 298]
]);
// Set chart options
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
vAxis: {
viewWindow: {
min: 0,
max: 1000
}
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
You can do it using a stacked column chart, where all data series of one group (e.g. ground coffee) is on the left axis, and all data series of the other group on the right axis (instant coffee).
data and stacked column chart set-up
series of group 2 moved to right axis
The Visualization API does not support creating multiple column stacks per row of data. You can make a feature request to add support for this if you want.
The answer by Dan Hogan worked for me. However, the JSFiddle example didn't seem to work (not sure, why.) Here is a version that works for me.
google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(function() {
$('.service-usage-graph').each(function() {
var table = new google.visualization.DataTable();
table.addColumn('string', 'Date');
table.addColumn('number', 'UL Peak');
table.addColumn('number', 'UL Off-peak');
table.addColumn('number', 'DL Peak');
table.addColumn('number', 'DL Off-peak');
table.addRow(['2001-01-01', 1, 2, 3, 4]);
table.addRow(['2001-01-03', 3, 2, 4, 2]);
table.addRow(['2001-01-04', 2, 2, 4, 2]);
table.addRow(['2001-01-05', 0, 1, 4, 5]);
table.addRow(['2001-01-06', 9, 2, 6, 8]);
table.addRow(['2001-01-07', 2, 2, 7, 3]);
var chart = new google.charts.Bar(this);
var options = google.charts.Bar.convertOptions({
isStacked: true,
series: {
2: { targetAxisIndex: 1 },
3: { targetAxisIndex: 1 }
},
vAxis: {
viewWindow: {
max: 15,
}
}
});
chart.draw(table, options);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="service-usage-graph"></div>