Code Samples: Google Charts

Showing posts with label Google Charts. Show all posts

Sunday, June 9, 2013

Google visualization charts tooltip formating

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

Wednesday, June 5, 2013

How to draw a two y axis line chart in google charts

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['x',                'Total Run', 'Centuary', 'Half Centuary'],
    ['January, 2013',    200,         1,           1],
    ['February, 2013',   105,         0,           1],
    ['March, 2013',      300,         1,           2],
    ['April, 2013',      305,         0,           5],
    ['May, 2013',        100,         0,           0],
    ['June, 2013',       290,         1,           2],
    ['July, 2013',       400,         2,           3],
    ['August, 2013',     180,         0,           1],
    ['September, 2013',  270,         1,           2],
    ['Ocotber, 2013',    170,         0,           1],
    ['November, 2013',   180,         1,           0],
    ['December, 2013',   240,         1,           2]
  ]);

  new google.visualization.AreaChart(document.getElementById('visualization')).
      draw(data, {
        curveType: "function",width: 500, height: 400,
        vAxes: {
          0: {logScale: false, maxValue: 100},
          1: {logScale: false, maxValue: 5}
        },
        focusTarget: 'category',
        series:{
          0:{targetAxisIndex:0},
          1:{targetAxisIndex:1},
          2:{targetAxisIndex:1}}
      }
   );
}

Example Image:

Tuesday, June 4, 2013

Google Charts: One Tooltip show values for Entire Column and domain data role

I have a basic Area Chart using Google Charts. I am able to set up tooltips for each point on the graph, but is there a way to have a single tooltip for all the points in a column.

All you need to do is add the following to your options (in the case of a line chart):
focusTarget: 'category'

Easy as pie! For more details, see focusTarget in the Google Documentation

If you want something more complex, you can fiddle around with the domain Data Role

Here is a sample bit of code:

google.load('visualization', '1.1', {'packages':['corechart']});

google.setOnLoadCallback(drawChart_C6);

function drawChart_C6() {
    var data = new google.visualization.DataTable();
    data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter');
    data.addColumn('number', '2009 Sales');
    data.addColumn('number', '2009 Expenses');
    data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter');
    data.addColumn('number', '2008 Sales');
    data.addColumn('number', '2008 Expenses');
    data.addRows([
      ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300],
      ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400],
      ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540],
      ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_C6'));
    chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'});
}

http://stackoverflow.com/questions/15351243/google-charts-one-tooltip-for-entire-column

Pages