[CLOSED] Timeline Visualization using Google Charts

Hello there,
I'm hoping I get some ideas on this thread to make my chart more meaningful. Inspired by this post from David GantChart
I've attempted to show some event based activity using these Google Timeline charts More info . I've had some success but wondering if theres a way to show the overlapping events for e.g., Full Charge should display while its Charging inside the box (same row). Attaching some (not so elegant) code and screenshots for the same.

  TABLE FILE MYDATA
PRINT
COMPUTE EVENT_DATE1/A8MDYY = EVENT_START_TIME_YYMD;
-*COMPUTE EVENTTYPE/A4 = LTRIM(FPRINT(EVENT_TYPE,'I4','A4'));
LOOKUP_NAME AS EVENTTYPE
COMPUTE START_TIME/A8 = HCNVRT(EVENT_START_TIME,'(HHIS)',8,'A8'); AS BEGDATE
COMPUTE START_HR/A8 = HCNVRT(EVENT_START_TIME,'(HH)',8,'A8'); AS START_HR
COMPUTE START_MIN/A8 = EDIT(HCNVRT(EVENT_START_TIME,'(HHIS)',8,'A8'),'$$$99$$$') ; AS START_MIN
COMPUTE START_SEC/A8 = EDIT(HCNVRT(EVENT_START_TIME,'(HHIS)',8,'A8'),'$$$$$$99') ; AS START_SEC

COMPUTE END_TIME/A8 = HCNVRT(EVENT_END_TIME,'(HHIS)',8,'A8'); AS ENDDATE
COMPUTE END_HR/A8 = HCNVRT(EVENT_END_TIME,'(HH)',8,'A8'); AS END_HR
COMPUTE END_MIN/A8 = EDIT(HCNVRT(EVENT_END_TIME,'(HHIS)',8,'A8'),'$$$99$$$') ; AS END_MIN
COMPUTE END_SEC/A8 = EDIT(HCNVRT(EVENT_END_TIME,'(HHIS)',8,'A8'),'$$$$$$99') ; AS END_SEC
BY EVENT_START_TIME NOPRINT
ON TABLE HOLD AS H1
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE SET ASNAMES ON
END


-RUN
DEFINE FILE H1
ST_HR/A2V = IF START_HR LT '10' THEN EDIT(START_HR,'$9') ELSE START_HR;
ST_MIN/A2V = IF START_MIN LT '10' THEN EDIT(START_MIN,'$9') ELSE START_MIN;
ST_SEC/A2V = IF START_SEC LT '10' THEN EDIT(START_SEC,'$9') ELSE START_SEC;

ED_HR/A2V = IF END_HR LT '10' THEN EDIT(END_HR,'$9') ELSE END_HR;
ED_MIN/A2V = IF END_MIN LT '10' THEN EDIT(END_MIN,'$9') ELSE END_MIN;
ED_SEC/A2V = IF END_SEC LT '10' THEN EDIT(END_SEC,'$9') ELSE END_SEC;

END
TABLE FILE H1
PRINT 
COMPUTE OUTPUT/A511 = '[''' | EVENT_DATE1|| ''', ''' |
                      EVENTTYPE|| ''', ' |
      'new Date(' || '0,0,0,' || ST_HR || ','|| ST_MIN || ',' || ST_SEC || '), ' |
      'new Date(' || '0,0,0,' || ED_HR || ','|| ED_MIN || ',' || ED_SEC || ')],' ;
BY EVENT_DATE1 NOPRINT
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE HOLD AS HLDDATA FORMAT ALPHA
END
-RUN

-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

I should mention that we tried Gantt chart HTML5 extension but that did not work for us either.
Please let me know if you guys have any suggestions.

This message has been edited. Last edited by: FP Mod Chuck,

Posts: 289 | Location: Houston,TX | Registered: June 11, 2004

Francis Mariani

Expert

posted

Hide Post

If you provide some data, we could run the code in our environments and maybe come up with a solution for you.

Meanwhile, how did you get "LOW_BATTERY" (red) on the same row as "CHARGING"?

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Here's an example of creating data and a master so that a report can be run by anyone - it involves -WRITE statements for the data and master files.

-*-- Create the master for TEST1 -------------------------------------
FILEDEF DATAMAST DISK TEST1.MAS
-RUN
 
-*--
-WRITE DATAMAST FILE=TEST1, SUFFIX=FIX, $
-WRITE DATAMAST SEGNAME=SEG1, SEGTYPE=S0, $
-WRITE DATAMAST FIELD=COUNTRY  , ALIAS=COUNTRY  , USAGE=A10   , ACTUAL=A10, $
-WRITE DATAMAST FIELD=         , ALIAS=FILL1    , USAGE=A01   , ACTUAL=A01, $
-WRITE DATAMAST FIELD=MEASURE1 , ALIAS=MEASURE1 , USAGE=P08C  , ACTUAL=A04, $
-WRITE DATAMAST FIELD=         , ALIAS=FILL1    , USAGE=A01   , ACTUAL=A01, $
-WRITE DATAMAST FIELD=TEST_DTTM, ALIAS=TEST_DTTM, USAGE=HYYMDS, ACTUAL=A17, $
 
-WRITE DATAMAST $ This define just obtains the HOUR as a number
-WRITE DATAMAST DEFINE TMP_HOUR/I2 = HPART(TEST_DTTM, 'HOUR', 'I2'); $
-WRITE DATAMAST $ This define first sets the datetime to midnight for the date.
-WRITE DATAMAST $ it then removes the date, so we effectively have a time for midnight.
-WRITE DATAMAST DEFINE TMP_TIME/HhA = HHMS(HMIDNT(TEST_DTTM, 8, 'HhA'), 8, 'HhA'); $
-WRITE DATAMAST $ This function inserts a time component for us - in our case the hour.
-WRITE DATAMAST $ So we end up with exactly what we want, the hour in isolation!
-WRITE DATAMAST DEFINE THE_HOUR/HhA = HSETPT(TMP_TIME, 'HOUR', TMP_HOUR, 8, 'HhA'); $
 
-*-- Create the data file for TEST1 ----------------------------------
FILEDEF TEST1 DISK test1.ftm
-RUN
 
-WRITE TEST1 ENGLAND    0581 20171110130101200
-WRITE TEST1 ENGLAND    3348 20171112175305000
-WRITE TEST1 ENGLAND    8381 20171112195305000
-WRITE TEST1 CANADA     1223 20171112175305000
-WRITE TEST1 CANADA     6502 20171112083001000
-WRITE TEST1 CANADA     4054 20171113083001000
-WRITE TEST1 CANADA     2382 20171113172222000
-WRITE TEST1 USA        2349 20171023001143000
-WRITE TEST1 USA        2452 20171113172222000
-WRITE TEST1 CANADA     3452 20160531035457000
-WRITE TEST1 CANADA     1936 20171113120934000
-WRITE TEST1 CANADA     2331 20171114140030000
-WRITE TEST1 S KOREA    1341 20171114101030000
-WRITE TEST1 S KOREA    2344 20171014011114000
-WRITE TEST1 W GERMANY  1233 20171114101030000
-WRITE TEST1 S KOREA    0978 20171116110956000
-WRITE TEST1 USA        1698 20171114171030000
-WRITE TEST1 USA        0800 20171116190956000
 
-*-- Create the report -----------------------------------------------
TABLE FILE TEST1
SUM MEASURE1
BY COUNTRY
ACROSS THE_HOUR AS ''
ROW-TOTAL AS 'Total'
ON TABLE SUBTOTAL AS 'Total'
END
-RUN

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Here's a possible solution, as described in Google Charts - Timelines

quote:
Unlike popes, there can only be one U.S. president at a time, so if we label all of our rows as "President", the timeline will combine the three rows of our first chart into one row for a cleaner presentation. You can control this behavior with the groupByRowLabel option.

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

vaayu

Guru

posted

Hide Post

Thank you Francis,
I noticed your timeline ends and starts for each presidential term but in my case the data overlaps meaning if a device is charging from 2PM - 3:30 PM, we will see an event called "Fully Charged" at say 3:00PM which we'd like to see it in the same row/cell.
I hope it makes sense...

quote:
Originally posted by Francis Mariani:
Here's a possible solution, as described in Google Charts - Timelines

quote:
Unlike popes, there can only be one U.S. president at a time, so if we label all of our rows as "President", the timeline will combine the three rows of our first chart into one row for a cleaner presentation. You can control this behavior with the groupByRowLabel option.

Posts: 289 | Location: Houston,TX | Registered: June 11, 2004

Ignored post by vaayu posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

[CLOSED] Timeline Visualization using Google Charts

Focal Point | Privacy Statement | Terms of Service