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.
Related
I am working on a dual-y axis line chart and am trying to show the data in x axis in reverse order.
The direction attribute dont seem to be working for me.
original - https://jsfiddle.net/api/post/library/pure/
here is my change - https://jsfiddle.net/3m8vjows/
I have tried to give the direction to the x axis as below. But is not working.
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
},
x:{direction:'-1'}
}
};
the following config option is not supported by material charts
{hAxis,vAxis,hAxes.*,vAxes.*}.direction
there are several options material charts do not support,
see --> Tracking Issue for Material Chart Feature Parity
material = google.charts.Line & packages: ['line']
classic = google.visualization.LineChart & packages: ['corechart']
there is an option you can use to make classic charts look similar to material
theme: 'material'
if you choose to use classic instead...
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]);
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];
....
....
}
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 am using ExtJS to render charts, but my column chart is getting with the same color for all series. I need different colors for the series. Only happens with column, bar and area charts, the line chart is working fine.
My code:
Ext.Ajax.request({
method: 'get',
url: Webapp.link('chart/' + key),
success: function(response){
var resposta = Ext.JSON.decode(response.responseText);
var chart = Ext.create('Hemisphere.view.chart.Chart', {
axes: resposta.chart.axes,
series: resposta.chart.series,
store: store (The store is defined previously)
});
panel.removeAll();
panel.add(chart);
}
}
});
Anyone could help me? Thanks.
One serie code example.
You can change the color using a renderer on your series.
Ext documentation has a working example of this:
http://docs.sencha.com/ext-js/4-1/#!/example/charts/Column2.html
series: [{
type: 'column',
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
}
.
.
}]