Im using google chart to drow pie chart. I need to change slice offset value slice onhover event. I wrote some code but the problem is chart does not display tooltip.
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {
is3D: true,
tooltip: { textStyle: { color: '#000000' }, showColorCode: true }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandlerOver(e) {
//alert('selectHandlerOver');
var row = e.row;
var s = $.parseJSON('{ ' +
'"is3D": "true",' +
'"slices": { "' + row + '": { "offset": "0.2" } },' +
'"animation": { "duration": "100", "easing": "out"}' +
'}')
chart.draw(data, s);
}
function selectHandlerOut(e) {
//alert('selectHandlerOut');
var row = e.row;
var s = $.parseJSON('{"is3D": "true", "slices": { "' + row + '": { "offset": "0.0" } } }')
chart.draw(data, s);
}
google.visualization.events.addListener(chart, 'onmouseover', selectHandlerOver);
google.visualization.events.addListener(chart, 'onmouseout', selectHandlerOut);
chart.draw(data, options);
}
I think this is because O override onmouseover event with custom behaviour. Any suggestions?
This is not because you have overridden the mouse over event. This is because you are calling chart.draw() inside it. Draw method cancels out any tooltips which rendered for the previous.
If you want fine-grained control, You are better off using something like jQueryUI to show your tooltips.
Related
I am having trouble getting the Google chart animations to work properly. I think the problem is that the chart keeps getting redrawn instead of just the data updated, but I'm not sure how to remedy this based on Google's example code and my limited knowledge of JavaScript. I do not want to include a button to update the chart as the chart will eventually update data dynamically from a data source. How do I update my chart to properly display the animations on data change?
Reference: https://developers.google.com/chart/interactive/docs/animation
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="pizzaChart" style="overflow: hidden"></div>
<p id="logger"></p>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var mushroomData = Math.floor(Math.random() * 11);
document.getElementById("logger").innerHTML = mushroomData;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', mushroomData],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {
title: 'How Much Pizza I Ate Last Night',
width: '100%',
animation: {duration: 1000, easing: 'out'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
chart.draw(data, options);
}
setInterval(drawChart, 1000);
</script>
</body>
</html>
in order to animate the chart from one dataset to the next,
you need to keep a reference to the same chart.
instead of creating a new chart each time it is drawn.
see following example...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(initChart);
var chart;
function initChart() {
chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
drawChart();
}
function drawChart() {
var mushroomData = Math.floor(Math.random() * 11);
document.getElementById("logger").innerHTML = mushroomData;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', mushroomData],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {
title: 'How Much Pizza I Ate Last Night',
width: '100%',
animation: {duration: 1000, easing: 'out'}
};
chart.draw(data, options);
}
setInterval(drawChart, 1000);
note: google pie charts do not animate
I have seen a lot of answers on the web for this question but everybody have answered in a different way. They have answered with examples of code 90+ lines of code so it's hard to understand the method for applying formats. Can somebody please explain the method of applying formats in google charts and there are different methods for different types of charts? I need to apply the formats on bar charts and donut charts. I want to change format to currency and decimals.
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders','Value of Order'],
var chart = new google.visualization.PieChart(document.getElementById('sales_total_quantity'));
chart.draw(data, options);
}
in order to format the chart values, as shown when the bar or pie slice is hovered,
you need to apply a format to the data table.
you can use google's number formatter.
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
if you also want the y-axis of the bar chart to show as currency,
you need to use config option --> vAxis.format
var optionsBar = {
// format y-axis
vAxis: {
format: patternCurrency
}
};
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders', 'Value of Order'],
['A', 10, 100.11],
['B', 20, 200.22],
['C', 30, 300.33],
]);
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
var optionsBar = {
tooltip: {
trigger: 'both'
},
// format y-axis
vAxis: {
format: patternCurrency
}
};
var chartBar = new google.visualization.ColumnChart(document.getElementById('chart-bar'));
google.visualization.events.addListener(chartBar, 'ready', function () {
// show tooltip
chartBar.setSelection([{column: 2, row: 0}]);
});
chartBar.draw(data, optionsBar);
var optionsPie = {
height: 300,
pieHole: 0.2
};
var chartPie = new google.visualization.PieChart(document.getElementById('chart-pie'));
chartPie.draw(data, optionsPie);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-bar"></div>
<div id="chart-pie"></div>
I'm starting out with google charts (gauges)
i need to put multiple gauges on the same page, each with a different max value (which is set in options)
but what it seems is that the options is somehow global for all charts
they all become 0 to 1
here's my code
<script type="text/javascript">
google.charts.load('current', { 'packages': ['gauge'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.getJSON("Dashboard/GaugeData", function (jsn) {
var dGauges = $('#gauges');
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
$.each(jsn, function (i, item) {
data.addRow([item.Label, item.Pending]);
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, {
width: 400, height: 400,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5, max: item.Max
});
});
});
} setInterval(function () {
drawChart();
}, 10000);
</script>
please note that i cannot prepare a new div for each chart, since the amount of charts is dynamic (from json)
i believe i could create the divs dynamically and then check before each refresh if i need to add the div or remove etc... but i'm hoping there's a better way
I am using the Google Charts and i need to update a map that is already instantiated as a map worth actually want when you click the refresh button the data inside of a map.
Today I am doing in the following way:
var dataGraf = google.visualization.arrayToDataTable(parsVal);
var chart = document.getElementById('curve_chart');
chart.draw(dataGraf);
But nothing happens. For i instantiate my map i used the following commands:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(parsVal);
var options = {
title: 'Membros x Visitantes',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
How can i do to update, just when I click the button. Remembering that my 'ataGraf' has my array with the new values.
I did a JsFiddle to illustrate my problem.
first...
google.charts.load & setOnLoadCallback should only be called once per page load
you can also include the callback in the load statement
next, by saving a reference to the original chart, you can animate from one dataset to another
on the button click, create data and call draw
also recommend not adding event handlers directly in html tags
see following working snippet, the data is "swapped" on each button click...
google.charts.load('current', {
callback: function () {
// draw first chart
var data = google.visualization.arrayToDataTable([
['Data', 'Membros', 'Visitantes'],
['1', 4, 6],
['2', 5, 7]
]);
var options = {
animation: {
startup: true,
duration: 1200,
easing: 'linear'
},
title: 'Membros x Visitantes',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
// draw same chart with new data on button click
var newData = null;
document.getElementById('chart_button').addEventListener('click', drawNewChart, false);
function drawNewChart() {
// switch between newData and data on each click
if (newData === null) {
newData = google.visualization.arrayToDataTable([
['Data', 'Membros', 'Visitantes'],
['1', 9, 2],
['2', 1, 7]
]);
chart.draw(newData, options);
} else {
chart.draw(data, options);
newData = null;
}
}
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="chart_button">Atualizar gráficos</button>
<div id="curve_chart"></div>
This is the code I've been working, I need to redirect to another page by clicking the slices.
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Cleaning Completed', $co1],
['Denied At Client Place', $co2],
['Denied', $co3],
['Postponed', $co4],
['Careless Driver', $co5],
['Cleaning Started', $co6],
['Emptyspace', $co22],
['Assigned to Vehicle', $co23],
['Select', $co24],
['Call Not Picked', $co25],
['Asked to Call Back', $co26],
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I believe Google visualization allows you to set a click handler. So in your drawChart function, add this. (AFTER chart.draw)
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
console.log(selection);
});
See what "selection" has in it and see if that has enough information to set where the browser should redirect to.
More info: https://developers.google.com/chart/interactive/docs/reference#addlistener