<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
jQuery(document).ready(function() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true} });
dataTable.addColumn('number', 'Benefit');
dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true} });
dataTable.addRows([
['2010', 1990, '<b>$1990K in our first year!</b>', 1800, '<b>$1800K in our first year!</b>'], /* support any valid html */
['2011', 1500, '<i>$1500K in our second year!</i>', 1300, '<i>$1300K in our second year!</i>'],
['2012', 1200, '$1200K in 2012.', 1040, '$1040K in 2012.'],
['2013', 1000, '$1M in sales last year.', 910, '$910K in sales last year.']
]);
var options = {
tooltip: {isHtml: true},
chartArea: {width: "90%", left: 0, top: 0}
};
// Create and draw the visualization.
var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
ac.draw(dataTable, options);
});
</script>
</head>
<body>
<div id='visualization'></div>
</body>
</html>
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
The best data visualization tools such as ChartExpo has certain features that help you get what you want in less time. One major feature is the ease to get started. Here are some Best Data Visualization Tools .
ReplyDelete