Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

Existing issues with timeline visualization #12

Open
keithrz opened this issue Jan 8, 2018 · 1 comment
Open

Existing issues with timeline visualization #12

keithrz opened this issue Jan 8, 2018 · 1 comment

Comments

@keithrz
Copy link

keithrz commented Jan 8, 2018 •
edited
Loading

I'm having problems viewing most timelines generated from this tool. I think I'm running into this underlying Google Visualization Issue.
google/google-visualization-issues#2269

I always seem to get this error in Chrome:
Cannot read property 'v' of undefined

when viewing in Firefox, I sometimes get a timeline chart, and sometimes get this error:
this.tp[0] is undefined

My recommendation to other users of this plugin: Take the JSON generated from this tool, but don't bother with the result.html file; instead, create your own reports.

If I find a good HTML snippet to use in place of result.html, I will post it in this thread.
@keithrz
Copy link
Author

keithrz commented Jan 8, 2018

Here is a results.html that uses a different timeline library.

<html>
<head>
  <script src="//unpkg.com/timelines-chart@2"></script>
  <script type="text/javascript">
    getData();

    function getData() {
      var xmlhttp = new XMLHttpRequest();
      var url = "timeline.json";

      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var data = JSON.parse(xmlhttp.responseText);
          actualDraw(data);
        }
      };

      xmlhttp.open("GET", url, true);
      xmlhttp.send();

      function actualDraw(rawData) {
        var data = [];
        for (var i = 0; i < rawData.length; ++i) {
          var event = rawData[i];
          var dataToAdd = {
            label: event.command.name_ || event.command,
            data: [{
              timeRange: [event.start, event.end],
              val: event.command.name_
            }]
          };
          var existingDataRecord = data.find(record => record.group === event.source);
          if (existingDataRecord) {
            existingDataRecord.data.push(dataToAdd);
          } else {
            data.push({
              group: event.source,
              data: [dataToAdd]
            });
          }
        }

        // console.log('data', data);
        TimelinesChart()
          .data(data)
          .zQualitative(true)
          (document.getElementById('timeline'));
      }
    }
  </script>
</head>
<body>
<div id="timeline" style="width: 900px; height: 400px;"></div>
</body>
</html>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@keithrz