timeline Dashboard/chartwrapper/controwrapper

39 views

Skip to first unread message

Thomas B

unread,

Oct 29, 2021, 4:07:33 AM10/29/21

to Google Visualization API

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>

Reply all

Reply to author

Forward

0 new messages