Timeline chart with overlapping events

47 views

Skip to first unread message

Pawan Vuppala

unread,

May 16, 2018, 1:00:24 PM5/16/18

to Google Visualization API

Hello, I have been using this timeline package of google charts which is fabulous. Just wondering how I can merge my events to showup the overlaps. For instance If I'm charging a device and a "full charge" event occurred while its charging I'd like to see it inside the same bar.

Hope it makes sense. Please let me know.

Thank you!

-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Battery Charging Activity</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        google.charts.load("current", { packages: ["timeline"] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('mytimeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({ type: 'string', id: 'EventDate' });
            dataTable.addColumn({ type: 'string', id: 'EventType' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
             !IBI.FIL.HLDDATA;
            ]);
var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };
            chart.draw(dataTable);
        }
    </script>
    </head>
    <body>
     <div id="mytimeline" style="height: 600px;width:1000px"></div>
    </body>
</html>
-HTMLFORM END

SCREEN2.png

SCREEN1.png

Reply all

Reply to author

Forward

0 new messages