Google chart vertical axis strange label - charts

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

Line Chart (Dual-Y) x-axis data in reverse order

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...

Google Bar charts - ToolTips not showing

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]);

Google charts different colors w/ single series Material bar chart

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];
....
....
}

always visible tooltip on google chart on page load?

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.

Different colors for column 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;
}
.
.
}]