I have seen one post which shows how to make color but it uses a method which is i didnt understand and its little dificult for me. im using this method in fiddle which is easy But it didnt work HTML inside tooltips .
google.charts.load('current', {'packages':['corechart','bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Statistics', 'Amount', { role: 'style' } , { role: 'tooltip' }],
['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"],
['Posts', 4, '#337AB7' , 'my tooltip'],
['Comments', 8, '#5CB85C' ,'<div>fff</div>'],
['Users', 3, '#F0AD4E' , '<b>hhh</b>'],
]);
var options = {
chart: {
title: 'Analysis',
tooltip: { isHtml: true},
subtitle: '',
},
/* colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // Another coloring method*/
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.visualization.BarChart(document.getElementById('barchart_material'));
chart.draw(data, options);
}
Js Fiddle here
thanks , hope if someone have a question i can edit and add something before votingdown :) .
first, need to understand difference between Classic and Material charts...
Classic = google.visualization.BarChart -- packages: ['corechart']
Material = google.charts.Bar -- packages: ['bar']
Material charts do not support column roles -- {role: 'style'} , {role: 'tooltip'}
next, there are two things needed for html tooltips on a Classic chart...
1) a property on the column must exist -- {role: 'tooltip', p: {html: true}}
2) and the chart option -- tooltip: { isHtml: true}
however, it should not be within the chart option, which is for Material charts only
(remove chart: {})
var options = {
title: 'Analysis',
tooltip: { isHtml: true}
};
see following working snippet...
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Statistics', 'Amount', {role: 'style'} , {role: 'tooltip', p: {html: true}}],
['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"],
['Posts', 4, '#337AB7' , 'my tooltip'],
['Comments', 8, '#5CB85C' ,'<div>fff</div>'],
['Users', 3, '#F0AD4E' , '<b>hhh</b>'],
]);
var options = {
title: 'Analysis',
tooltip: { isHtml: true}
};
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart"></div>
Related
I am using the Google Charts API to create a stepped area chart and I'd like to remove all horizontal lines in my chart. I've looked at all the documentation for the options, but I don't see any way to remove it. Is there some way to trick the API into removing them or am I stuck with them? The lines I am talking about is in the picture below, just to clear possible confusion.
Set vAxis.gridlines.color to transparent. You see more options in the Configuration Options section from the docs.
Use (using example from docs):
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
title: 'The decline of \'The 39 Steps\'',
vAxis: {
title: 'Accumulated Rating',
gridlines: {
color: 'transparent'
}
},
isStacked: true
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 500px; height: 250px;"></div>
you can use the following option...
vAxis: {
gridlines: {
count: 0
}
}
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
['Alfred Hitchcock (1935)', 8.4, 7.9],
['Ralph Thomas (1959)', 6.9, 6.5],
['Don Sharp (1978)', 6.5, 6.4],
['James Hawes (2008)', 4.4, 6.2]
]);
var options = {
isStacked: true,
vAxis: {
gridlines: {
count: 0
}
}
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've run into a problem creating a bar chart with google charts.
Which is if you're creating a dynamic chart and there's a low amount of rows, the individual bars will be too thick.
I understand that this question has been asked, the problem with the awnser that has been most frequent is that it does not work if there is only a single bar in the chart, that awnser is:
to input bar: {groupWidth: <value>}
I have actually also found an awnser for if there is a single bar in the chart which is to insert an empty bar, so groupWidth works, but there are two problems with this solution, which are:
-the bar will not be centered
-and it will have an undefined title.
enter image description here
My question is, how can I set the maxWidth of a bar in google charts without using groupWidth.
also here is the code for my google chart
$(document).ready(function() {
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(chartCreate);
function chartCreate() {
data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number', 'Movimentos');
data.addRows([[ "ola", 4 ]]);
var options = {
height: 405,
width: 400,
legend: {
position: 'none'
},
titleTextStyle: {
fontSize: '24',
bold: 'true',
color: '#242354'
},
bar: {groupWidth: "80%"},
colors: ['#242354']
};
var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
});
you can use two additional bars to center,
use a space for the first column to avoid undefined
[' ', null],
['ola', 4],
[' ', null]
otherwise, bar.groupWidth will not work
it's actually reported here as not working period, for material charts...
Tracking Issue for Material Chart Feature Parity
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number', 'Movimentos');
data.addRows([
[' ', null],
['ola', 4],
[' ', null]
]);
var options = {
height: 405,
width: 400,
legend: {
position: 'none'
},
titleTextStyle: {
fontSize: '24',
bold: 'true',
color: '#242354'
},
bar: {groupWidth: "80%"},
colors: ['#242354']
};
var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="graph"></div>
I have done a small graph with Google charts combochart combining
a stacked bar chart with a line chart.
The tooltips appear on all stacks and points of the line chart triggered by
mouse actions: 'focus' (mouse on the target), 'selection' (on click) and 'both' both click and focus.
I wanted to have all tooltips from line chart appeared after a click, trigger: set to 'selection' and all tooltips from stacked bar chart after a focus on the zone, trigger: set to 'focus'. Is this possible with Google Charts to set different tooltip behaviour in the same chart? How do I develop this?
Play my example here:
https://jsfiddle.net/machesne/xf1kccdq/
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var tooltipdata = [["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "]]
var valuedata = [[50, 10, 15, 15, 90, 90],[50, 12, 15, 15, 92, 92],[60, 10, 15, 15, 100, 100]];
var data = google.visualization.arrayToDataTable([
['Date', 'Apples', { role: 'tooltip' }, 'Tomatoes', { role: 'tooltip' }, 'Orange', { role: 'tooltip' }, 'Strawberries', { role: 'tooltip' }, { role: 'annotation' }, 'Sum' , { role: 'tooltip' }],
['', valuedata[0][0], tooltipdata[0][0], valuedata[0][1], tooltipdata[0][1], valuedata[0][2], tooltipdata[0][2], valuedata[0][3], tooltipdata[0][3], valuedata[0][4],valuedata[0][5], tooltipdata[0][4]],
['', valuedata[1][0], tooltipdata[1][0], valuedata[1][1], tooltipdata[1][1], valuedata[1][2], tooltipdata[1][2], valuedata[1][3], tooltipdata[1][3], valuedata[1][4],valuedata[1][5], tooltipdata[1][4]],
['', valuedata[2][0], tooltipdata[2][0], valuedata[2][1], tooltipdata[2][1], valuedata[2][2], tooltipdata[2][2], valuedata[2][3], tooltipdata[2][3], valuedata[2][4],valuedata[2][5], tooltipdata[2][4]], ]);
var options = {
width: 1200,
height: 1000,
legend: { position: 'bottom', maxLines: 2 },
seriesType: 'bars',
bar: { groupWidth: '90%' },
isStacked: true,
tooltip: { isHtml: true, trigger: 'both' }, // CSS styling affects only HTML tooltips.
series: {4: {type: 'line', pointSize: 15 } }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Thanks a lot for your answers!
I have created a Google bar chart, with two x-axis.
My problem is that I cannot seem to get the correct format on the bottom axis, which should be shown in percentage.
I have tried to use the following
axes:{{},{format:'#%'}}}
And in general inserting format:'#%' at places that would make sense, but nothing seems to work.
Is there anyone who has an idea for this?
See the entire code here: https://jsfiddle.net/laursen92/azr4kfn0/1/
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Slave number', 'Voltage', '%'],
['Slave 1', 12.15, 0.40],
['Slave 2', 12.18, 0.50],
['Slave 3', 11.80, 0.60],
['Slave 4', 13.12, 0.70],
]);
var formatter = new google.visualization.NumberFormat({
pattern: '##0.00'
});
var formatter2 = new google.visualization.NumberFormat({
pattern: '##0%'
});
formatter.format(data, 1);
formatter2.format(data, 2);
var options = {
width: 800,
chart: {
title: 'Status of slaves',
subtitle: 'Overview of the voltage and SOC of connected slaves. '
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: {
axis: 'voltage'
}, // Bind series 0 to an axis named 'voltage'.
1: {
axis: 'percent'
} // Bind series 1 to an axis named 'soc'.
},
axes: {
x: {
voltage: {
side: 'top',
label: 'Voltage'
}, // Top x-axis.
percent: {
label: 'Percent',
} // Bottom x-axis.
}
},
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
Here's an update to your fidde: https://jsfiddle.net/Balrog30/azr4kfn0/4/
I used the a little codepen I wrote to reverse-engineer the changes to the material chart options, which are still mostly undocumented. You can find that here: http://codepen.io/nbering/pen/Kddvge
Here's how the option should be formatted:
var options = {
axes: {
x: {
yourAxis: {
format: {
pattern: "#%"
}
}
}
};
-- Or --
options.axes.x.yourAxis.format.pattern = "#%";
I use code from example page to create horizontal bars chart:
Option backgroundColor work for other chart types, like this and that.
Is there are way to change background color for Bars charts?
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>
chart
You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not. If you are
converting a Classic Bar Chart to a Material Bar Chart, you'll want to
replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().
Have a try, it works great. See a jsfiddle of it here.