Support for charting time series data

[Beau Raines]

Does this currently support using dates as values in the dataset?

This does not work

<chart data="[  {'date':'2015-11-01','value':12},
                {'date':'2015-11-02','value':18},
                {'date':'2015-11-03','value':22},
             ]"
        options="{  title: 'Downloads',
                    description: 'This graphic shows a time-series of downloads.',
                    x_accessor: date,
                    y_accessor: 'value',
        }">
</chart>

nor does using a data element like this one that is on the Metrics Graphics main page

           [{'date':new Date('2014-11-01'),'value':12},
           {'date':new Date('2014-11-02'),'value':18}],

I've been able to get numeric values to make charts, but I need to plot dates.

[Beau Raines]

I've forked this to work on this. I'm adding a new directive chart-time-series.

Should I just be changing the files in /dist or should I change the /src and rebuild it? If its the latter, I need some guidance on how to do that...

[Davis Marques]

hi Beau;

The problem with your example above is that the JSON representation of dates has to be converted into a JavaScript Date object before MetricsGraphics can use it.

I've added a new attribute convert-date-field="fieldname" to the library to enable you to do the data conversion. Please pull the latest version, then either look at src/index.html or do grunt serve to compile and show the example page. I've added an example for this specific case. Let me know if you have any other issues with it.

Davis

[Beau Raines]

Davis - thanks! This looks like it will do what I was looking for. It is a slightly different approach than I was taking in my fork but this will work. I'm relatively new to angular, so it was cool to see your method for doing this.

[Beau Raines]

While I was checking this out, I noticed that the changes from issue #2 got lost with this commit.

      // create the chart
      scope.$watch('data', function(){
        options.data = scope.data || [];
        MG.data_graphic(options);
      }); 

However, I've noticed two things with this. I don't know if these should be new issues or not.

1. It only watches the data not any of the components of data (say for instance data.value). This can be addressed by adding another argument to the scope.$watch() function, eg.

      // create the chart
      scope.$watch('data', function(){
        options.data = scope.data || [];
        MG.data_graphic(options);
      },true); 

1. By re-firing MG.data_graphics() everytime that data, it is attempting to convert the JS data object again which throws an error from the MG.convert.date(). In my branch, you'll see that I only do the conversion if the date field is a string (not if it's an object).

I was going down the route of a different directive rather than build it into the same directive. I was also handling multiple lines differently (each line in it's own array) but I like your method better (single array with multiple y_acessor values).

I'd like to help with this, but I am traveling this week and I am not nearly as fast as you are with this. If you spawn separate issues for these, I'll definitely try to work on them.

[Beau Raines]

Davis - can you check out what I did in this branch It's not 100% yet. There are some constraints on how the data much be shaped and it is limited to only one y-accessor. I'm sure that I'm missing something. Any suggestions would be welcomed. I added a few more examples to the examples page - some of which show what is not working right.

[Davis Marques]

I've opened issue #4 to restore riosc's patch. Thanks for catching that.

[Davis Marques]

I opened issue #5 to incorporate your patch and updated the example. The interpolation between graph states could use some finessing.