Very bad limitation in Google Visualization API - Gantt charts

ORESoftware commented 7 years ago

There are a couple problems I have seen in the google chart API

https://developers.google.com/chart/interactive/docs/gallery/ganttchart

Not sure if this is the right place to submit this issue.

Here are the problems I see:

Google JS api cannot take a string or number and convert it to a Date. This is a problem when I pass the API JSON.stringified data. Dates must be a primitive, yet the Google API cannot interpret a number or a string as a Date. This a huge limitation.
I am having trouble scaling things to millseconds, and working with millseconds. I am creating Gantt charts for computer processes, not human processes, so the scale is milliseconds. Is there an easy way to create Gantt charts that can scale to milliseconds? I don't see why not. Should be easy to implement. Just scale it down. But unfortunately it doesn't look like Google API can handle Dates with millisecond data.

Here is an example of the first problem:

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Time');
      data.addColumn('date', 'End Time');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows(JSON.parse('[["1","regexp.js","some-resource","2017-07-04T22:06:17.465Z","2017-07-04T22:06:18.132Z",null,100,null]]'));

      var options = {
        height: 1200,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

above you will clearly see I have worked had to generate date strings, but yet Google API cannot convert them, even though they are entirely valid.

Lame! :)

ORESoftware commented 7 years ago

I got it working like so:

      const val = JSON.parse('{{{arrayOfArrays}}}');

      const mapped = val.map(function(item){
         return [item[0], item[1], item[2], new Date(item[3]), new Date(item[4]), item[5], item[6], item[7] ];
      });

      data.addRows(mapped);

      var options = {
        height: 1200,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);

but frankly that was a bit tricky and I think you will make it harder for programming newbies, that it has to be.

ORESoftware commented 7 years ago

Yeah so I don't think the Gantt chart handles anything more granular than days. That really sucks. I passed the Chart API two different tasks with different start Date / end Dates that differed by seconds, and the API can't handle that. Considering that the Duration value can take milliseconds, it seems to me incredibly limiting to not also accept milliseconds for start date and end date.

I am going to open a different issue for the start date end date.

wesalvaro commented 7 years ago

The Gantt chart can do more resolution than days. This example shows using minutes but I haven't messed around too much with it myself.

As for the Date issue, how to represent them as strings is addressed here.

Let me know if you have any further questions, but these issues are unrelated to the Polymer element and you could probably get better, more timely help by posting to the discussion group or to the issue list.

wesalvaro commented 7 years ago

@ORESoftware I just saw your issue and the post over on the library's issue list. I think that your issue comes when specifying the start Date. As in the example that I posted, the start and end Dates are null. You only need to populate duration, which I tweaked the example and it will show resolutions as high as 0.01 seconds.

ORESoftware commented 7 years ago

Thanks for responding to this issue. If I just use a duration, then I won't get the right start time. This is what I am looking for:

However to achieve the above, I had to do some real gymnastics, like I said, I had to translate milliseconds into days, LOL, it was not pleasant at all.

I clicked the link to find the example that uses minutes for start/end date, I couldn't find it.

Being able to do this with milliseconds would be nice because then the numbers/labels would be correct.

wesalvaro commented 7 years ago

It looks like you might just want a timeline graph for that.

ORESoftware commented 7 years ago

@wesalvaro thanks, do you have a good link for that?

ORESoftware commented 7 years ago

Ok, I think this is what you mean: https://developers.google.com/chart/interactive/docs/gallery/timeline

yeah that's probably a lot better..my processes are always independent, whereas Gantt charts have process that are interdependent...thanks!

wesalvaro commented 7 years ago

Cool. Let me know if you have any questions.

ORESoftware commented 6 years ago

thanks for your help, I finally got this working with Timeline (I was using Gantt before)

the timeline has better default mouseover events, which is nice

I had this issue https://stackoverflow.com/questions/47734952/label-color-or-bar-color-by-row-for-google-timeline-chart

but I figured out a solution pretty quickly to that

ORESoftware commented 6 years ago

If you know how to add a legend to a Google Timeline chart, I could use one of those

wesalvaro commented 6 years ago

For legends, you have two options:

Roll your own
Label the rows

You also don't need to use one row for each as you have it. It's a bit ... tall ... haha. I would say something like the advanced example could fit your needs.

sanj79 commented 6 years ago

Hi @wesalvaro ,

Is it possible for Gantt chart labels to be placed inside the bars , instead of left aligned ?

wesalvaro commented 6 years ago

@sanj79 Please see here for options on the Gantt chart.

sanj79 commented 6 years ago

@wesalvaro Doesn't help. Tried it, there is no mention on formatting of the labels, I'd like it to have the same style as other Gantt charts have , text placed inside the bars instead of being left aligned. 68755f2f5691ae3ef6d7acf5212e3dea

Is there any way to achieve it from the in-built functionality ? Also, I'd like to remove them from the left, and any extra space which it might cause to be neutralized.

wesalvaro commented 6 years ago

@sanj79 I'm not very familiar with the Gantt chart but it looks like you're right that it's not an option currently. You'll have better luck asking the Google Visualization community or opening an issue with them. This Polymer wrapper only passes along the available options.

tawfikm commented 5 years ago

Hello I have a problem with google gantt chart, I can't see the chart drawing this is my code: ``

GoogleWebComponents / google-chart

Very bad limitation in Google Visualization API - Gantt charts #194