[visualization-api] timeline Dashboard/chartwrapper/controwrapper

Fri, 29 Oct 2021 01:07:38 -0700 

Hello, 

im trying to use a timeline with a control inside a dashboard.
But it fails to load with some sort of bugs.
below the dashboard, i put the chart alone in chart_div just to see that a 
timelinechart is working.
here is my code so far.
Can anyone give me a bit of help?

<html>
<head>
  <script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js";></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['timeline', 'controls'], 
'language': 'de'});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var dashboard = new 
google.visualization.Dashboard(document.getElementById('dashboard_div'));
      var timeRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
         'containerId': 'filter_div',
          'options': {
              'filterColumnLabel': 'Start'
                     }
      });
      var timelineChart = new google.visualization.ChartWrapper({
          'chartType': 'timeline',
          'containerId': 'chart_div1',
      });
      var data = google.visualization.arrayToDataTable([
      ['Role', 'Name', 'Start', 'End'],
        ['Research', 'Find sources', new Date(2021, 9, 1), new Date(2021, 
9, 5)],
        ['Outline', 'Outline paper', new Date(2021, 9, 6), new Date(2021, 
9, 8)]
          ]);
      var container = document.getElementById('chart_div');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Role' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'string', role: 'tooltip' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        ['BLAKE', 'Erster task', '',  new Date(2021, 9, 21,12,0,0), new 
Date(2021, 9, 23,15,0,0) ],
        ['GORDON', 'zweiter Task', 'Hier ist was zu tun',  new Date(2021, 
9, 25,12,0,0), new Date(2021, 9, 30,15,0,0) ],
      ]);
      var options = {
        timeline: { groupByRowLabel: false },
        backgroundColor: '#ffd'
      };
          dashboard.bind(timeRangeSlider, timelineChart)
          dashboard.draw(data);
      chart.draw(dataTable, options);
    }
</script>
</head>
<body>
    <div id="dashboard_div" style="border: 1px solid #ccc">
      <div id="filter_div"></div>
      <div id="chart_div1" style="height: 180px;"></div>
      <div id="chart_div" style="height: 180px;"></div>
    </div>
</body>
</html>




-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/09a6d710-aa73-4e02-8e6a-48dc07d833b0n%40googlegroups.com.

Reply via email to