When using the google visualization api, how do you use getChartLayoutInterface() when using a dashboard

Question

I am using the google visualization dashboard api. And I have a chart that I am using along with a chart range filter, sort of like in the following example I found on jsfiddle:

http://jsfiddle.net/dlaliberte/pfTqP/

Here is the js fiddle code:

HTML code:

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>

  </head>
  <body>
    <div id="dashboard">
        <div id="chart" style='width: 915px; height: 300px;'></div>
        <div id="control" style='width: 915px; height: 50px;'></div>
    </div>
  </body>
</html>

Javascript Code:

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

function drawVisualization() {
  var dashboard = new google.visualization.Dashboard(
       document.getElementById('dashboard'));

   var control = new google.visualization.ControlWrapper({
     'controlType': 'ChartRangeFilter',
     'containerId': 'control',
     'options': {
       // Filter by the date axis.
       'filterColumnIndex': 0,
       'ui': {
         'chartType': 'LineChart',
         'chartOptions': {
           'chartArea': {'width': '90%'},
             'hAxis': {'baselineColor': 'none', format: "dd.MM.yyyy" }
         },
         // Display a single series that shows the closing value of the stock.
         // Thus, this view has two columns: the date (axis) and the stock value (line series).
         'chartView': {
           'columns': [0, 3]
         },
         // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
         'minRangeSize': 86400000
       }
     },
     // Initial range: 2012-02-09 to 2012-03-20.
     'state': {'range': {'start': new Date(2012, 1, 9), 'end': new Date(2012, 2, 20)}}
   });

   var chart = new google.visualization.ChartWrapper({
     'chartType': 'CandlestickChart',
     'containerId': 'chart',
     'options': {
       // Use the same chart area width as the control for axis alignment.
       'chartArea': {'height': '80%', 'width': '90%'},
       'hAxis': {'slantedText': false},
       'vAxis': {'viewWindow': {'min': 0, 'max': 2000}},
       'legend': {'position': 'none'}
     },
     // Convert the first column from 'date' to 'string'.
     'view': {
       'columns': [
         {
           'calc': function(dataTable, rowIndex) {
             return dataTable.getFormattedValue(rowIndex, 0);
           },
           'type': 'string'
         }, 1, 2, 3, 4]
     }
   });

   var data = new google.visualization.DataTable();
   data.addColumn('date', 'Date');
   data.addColumn('number', 'Stock low');
   data.addColumn('number', 'Stock open');
   data.addColumn('number', 'Stock close');
   data.addColumn('number', 'Stock high');

  
   // Create random stock values, just like it works in reality.
   var open, close = 300;
   var low, high;
   for (var day = 1; day < 121; ++day) {
     var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
     change = change >= 0 ? change + 10 : change - 10;
     open = close;
     close = Math.max(50, open + change);
     low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
     low = Math.max(0, low);
     high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
     var date = new Date(2012, 0 ,day);
     data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]);
   }

  /* Change the format of the date column, used in chart, but not chart range filter */  
  var formatter = new google.visualization.DateFormat({pattern: "dd.MM.yyyy"});
  formatter.format(data, 0);

  
   dashboard.bind(control, chart);
   dashboard.draw(data);
}

google.setOnLoadCallback(drawVisualization);

At first I just had a simple chart, and was able to get the layout of chart using getChartLayoutInterface(), but that doesn't work anymore, as I am drawing the chart through the Dashboard, in order to bind it with the ChartRangeFilter that I added. (see the example in the link above).

The reason I need this, is because I am trying to draw images on top of the chart according to where the data points are placed on it, and the layout interface contains that information.

The ChartRangeFilter has an embedded chart inside the control which, unfortunately, is inaccessible from the outside. We should add a getChart method on the control to give you access. ChartWrapper has a getChart method, btw, only documented on the main reference page. — dlaliberte
@dialiberte I am drawing using an html5 canvas that I lined up with the chart. How come eventhough I have them lined up, the positions are now off when I use the ChartRangeFilter and Dashboard and were lined up exactly when I was not using them? — user904542

WhiteHat WhiteHat · Accepted Answer · 2021-09-01T13:44:31

first, wait for the ready event on the chart wrapper.
then use the getChart method to get the chart from the chart wrapper.
then you can get the interface as normal...

var chart = new google.visualization.ChartWrapper({
  'chartType': 'CandlestickChart',
  'containerId': 'chart',
  'options': {
    // ...
  }
});

google.visualization.events.addListener(chart, 'ready', function () {
  var layout = chart.getChart().getChartLayoutInterface();
});

When using the google visualization api, how do you use getChartLayoutInterface() when using a dashboard

1 Answers