Develop Reference

Include pie chart and sankey diagram in Google Charts dashboard

I'm trying to combine two charts and a filter, specifically a Pie Chart and Sankey Diagram with no success. There is a similar answered question, but the difference with my problem is that I am embedding my charts inside a dashboard so I can use the slicer filter.
I have tried several ideas to solve it but only the Pie Chart and the slicer appear or simply nothing appears.
Ideas I have tried:
Passing only the columns I need in the view property of the ChartWrapper class.
Naming the columns and casting the data types as shown in the examples for the Sankey diagram
Passing only the data I need to the Sankey through the dataTable property of the ChartWrapper class
For the moment, I have used the sample code from Google Charts documentation. What I am trying to do is to make appear both charts, so I can arrange de visualizations in the dashboard and then use my own data.
Thanks for the help!
Sample code bellow:
I include the loader in the partials/header file
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<%- include("partials/header"); -%>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.charts.load('current', {
'packages': ['corechart', 'controls', 'sankey']
});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
// Create our data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Donuts eaten');
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
['Michael', 5, 'A', 'X', 2],
['Elisa', 7, 'A', 'Y', 7],
['Robert', 3, 'A', 'Z', 6],
['John', 2, 'B', 'X', 1],
['Jessica', 6, 'B', 'Y', 9],
['Aaron', 1, 'B', 'Z', 4],
['Margareth', 8, 'C', 'X', 4]
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var donutRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Donuts eaten'
},
'view': {
'columns': [0, 1]
}
});
// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'width': 300,
'height': 300,
'pieSliceText': 'value',
'legend': 'right'
},
'view': {
'columns': [0, 1]
}
});
var sankeyChart = new google.visualization.ChartWrapper({
'chartType': 'Sankey',
'containerId': 'sankey_div',
'options': {
'width': 600
},
'view': {
'columns': [2, 3, 4]
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(donutRangeSlider, pieChart, sankeyChart);
// Draw the dashboard.
dashboard.draw(data);
}
</script>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
<div id="sankey_div" style="width: 900px; height: 300px;"></div>
</div>
<%- include("partials/footer"); -%>

Google charts with tooltips and colors

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>

Google Charts - Custom Tooltip on Line Chart (Line Package) not Working

I'm using Google Charts (Visualization, 1.1, Line Package) to create a Simple Chart with 3 Lines and Month and Costs Axis. Everything works fine, except Tooltip customization:
Here's my code
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1");
data.addColumn('number', "Line 2");
data.addColumn('number', "Line 3");
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addRows([
[new Date(2015, 5), 1000, 980, 800, 'Custom Content 1'],
[new Date(2015, 6), 1100, 1000, 970, 'Custom Content 2'],
[new Date(2015, 7), 1550, 1420, 1200, 'Custom Content 3'],
[new Date(2015, 8), 1050, 1200, 930, 'Custom Content 4'],
[new Date(2015, 9), 1280, 1120, 1070, 'Custom Content 5'],
[new Date(2015, 10), 1100, 999, 880, 'Custom Content 6'],
]);
var options = {
chart: {
title: 'Custom ToolTips',
subtitle: 'not working!'
},
focusTarget: 'category',
tooltip: {isHtml: true},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
You can test on JSFiddle
When you Hover the first bottom line you'll get:
But I Want to remove the Date on Top and Calculate Total Cost (Value * 2):
This is possible?
I already tried everything I could, search on Internet and try other codes but it looks like this isn't possible using th Line Package (Instead of CoreChart Package), is that right?
Can anyone help me out?

copied from this answer: https://stackoverflow.com/a/29148517/4966682
After looking deeper into Google's Material Chart information I found on their website:
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not.
Trendlines and tooltips fall under the options section of creating charts since they need the options structure to further define them. Again, as of this date (March 2015) the Google Materials Charts do not support these features. If you want to use things like trendlines and tooltips you need to use non material charts (e.g. packages['corechart'] and not packages['scatter']).

How to remove number and percentage from tooltip in google chart?

I am trying to change tooltip value in google chart. I want to show only text field inside tooltip in my chart. But when I mouse hover on my chart it shows number and percentage. More clearly, (From image) I want to show only "Sleep" not the "7(29.2%)".Please share with me if any one have any idea.
My Jsfiddle link: http://jsfiddle.net/1c3atn9z/1/
My codes are below:
<html>
<head>
<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',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>
Image:

No standard way to do it, you can only choose slice text. You could do a workaround this way though:
var options = {
title: 'My Daily Activities',
is3D: true,
tooltip: { isHtml: true }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'onmouseover', function(hover){
if(hover){
$('.google-visualization-tooltip-item:eq(1)').remove() // remove the other info
}
})
chart.draw(data, options);
Be sure to add the tooltip: { isHtml: true } for it to work
Here is working fiddle: http://jsfiddle.net/juvian/1c3atn9z/2/

Show tooltip constantly with Google Pie Chart (quick javascript tweak)

I am interested in using a google pie chart and need it to display all the tooltips constantly. At the moment they come up individually on hover, just wondered if it's possible to do that by altering the js slightly?
Google says that you can use tooltip.trigger with either 'focus' which displays with hover or 'none' obviously to display nothing, but theres no function for show all
Heres the code:
<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'],
['Toe', 38],
['Jam', 22],
['Earl', 2]
]);
var options = {
legend: 'none',
lable: 'none',
is3D: true,
pieSliceText: 'none',
slices: [{offset:0.1}, {offset:0.1}, {offset:0.1},],
chartArea: {left:70,top:50,width:140,height:140},
colors: ['#99C9FF','#B7B7B7', '#CCC'],
pieSliceBorderColor: '#999',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>

You can keep the tooltips constantly if you use the follwing option:
tooltip: { trigger: 'selection' }
But then you need to click the slice to get it initially.