ngyewch / angular-rickshaw Goto Github PK

I either can figure out how to set the width and height of a rickshaw graph or the feature doesn't yet exist. Which is it?

Create a way to use an equality watch for 'series'. This way when series[i].data changes the watch will get triggered and the graph will update.

scope.$watch('series', function(newValue, oldValue) {
if (!angular.equals(newValue, oldValue)) {
update();
}
}, true);

This is in reference to PR #13

Hi,

I update the random values to simulate a realtime chart, using an $interval. After a few seconds the screen gets unresponsive. Here's my code. Any tips?

//
        // Rickshaw Realtime
        // -----------------

        var seriesData = [
            [],
            [],
            []
        ];
        var random = new Rickshaw.Fixtures.RandomData(50);
        for (var i = 0; i < 50; i++) {
            random.addData(seriesData);
        }

        $scope.rickshaw_realtime_options = {
            renderer: 'area',
            height: 500,
            padding: {
                top: 0.5
            }

        };

        $scope.rickshaw_realtime_series = [{
            data: seriesData[0],
            color: 'red',
            name: 'DB Server'
        }, {
            data: seriesData[1],
            color: 'blue',
            name: 'Web Server'
        }];

        $scope.rickshaw_realtime_features = {
            yAxis: {
                orientation: 'right',
                tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
            },
            hover: true,
        }

        // Update the graph with realtime data. 
        var timer = $interval(function() {
            random.removeData(seriesData);
            random.addData(seriesData);
        }, 1000);

        $scope.$on('$destroy', function() {
            if (angular.isDefined(timer)) {
                $interval.cancel(timer);
                timer = undefined;
            }
        });

Hey there, great integration thanks for that..

Am having a weird result with the output graph (have looked at your examples and many other support items in stackoverflow but to no avail.. its a timerange dataset with x: unixtimestamp and y: int value

but graph looks like

Any input would be appreciated

        // var time = new Rickshaw.Fixtures.Time();
        $scope.graph.features = {
          palette: 'colorwheel',
          // xAxis: {
          //     timeUnit: 'minute',
          //      tickFormat: 'formatKMBT',
          //     // legend: {
          //     //     toggle: true,
          //     //     highlight: true
          //     // }
          // }
        };

        angular.forEach($scope.object.sensors, function(sensor) {
          //console.log(sensor)
          SensorsService.chart(sensor.uuid).then(function (resp_data) {
            var data = [];
            angular.forEach(resp_data.series, function (row, key) {
              angular.forEach(row.values, function (values, key) {
                var x = moment(values[0]);
                var y = values[1];

                data.push({'x': x.unix(), 'y': y});
              });
            });
            //console.log(JSON.stringify(data))
            $scope.graph.series.push({
                'name': sensor.name,
                'color': 'steelblue',
                'data': data
            });
            //console.log($scope.graph)
          });
        });

I want a real-time graph. But the example given in the examples just add data. I know I can just add and shift data on my own. But, the example here is much more cleaner: http://code.shutterstock.com/rickshaw/examples/fixed.html

The code for that is following: How can I achieve it with angular-rickshaw?

var tv = 250;

// instantiate our graph!
var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 900,
    height: 500,
    renderer: 'line',
    series: new Rickshaw.Series.FixedDuration([{ name: 'one' }], undefined, {
        timeInterval: tv,
        maxDataPoints: 100,
        timeBase: new Date().getTime() / 1000
    }) 
} );

graph.render();

// add some data every so often

var i = 0;
var iv = setInterval( function() {

    var data = { one: Math.floor(Math.random() * 40) + 120 };

    var randInt = Math.floor(Math.random()*100);
    data.two = (Math.sin(i++ / 40) + 4) * (randInt + 400);
    data.three = randInt + 300;

    graph.series.addData(data);
    graph.render();

}, tv );

This is in reference to PR #18
Haven't noticed this in previous PR..

Thanks

I noticed that the charts don't refresh when the browser changes. It would be great to debounce this as well.

xFormatter works as does yFormatter. Formatter generic however does not.

When I e.g. resize the window (with the latest version), new elements are created for the y axis. These elements not only make the graph laggy, but the text becomes bold because the svg elements are overlapping.

The cause could be that every resize calls the update function, which re-renders the xAxis and the yAxis if they're configured.

The rickshaw element is only being resized when the data updates. The directive could watch for the resize event by e.g.

angular.element($window).on("resize", () => {
    // graph.render() and so on
});

This is also rather difficult to force from outside.

Here's a rickshaw resize example:
http://code.shutterstock.com/rickshaw/examples/resize

For people are looking for this :)
This module is just a copy of this (angular-rickshaw) but in Angular 2
https://github.com/daominhsangvn/ng2-rickshaw

$ npm install --save git+https://github.com/daominhsangvn/ng2-rickshaw

Hi,

The only option I've seen for x-axis formatting is the timeUnit property, but the problem is that my data is numbered 0-23 representing the hour, and rickshaw parses this as seconds rather than hours, so that if I use timeUnit = 'hour', it stays at 0 for the entire width of the graph. Is there a way to implement custom x-axis labels with this directive?

angular-rickshaw always interprets the xAxis as time units:
https://github.com/ngyewch/angular-rickshaw/blob/master/rickshaw.js#L92

It should be possible to visualize non-time data. See rickshaw documentation 'For x-axes with numeric or other non-time values' at http://code.shutterstock.com/rickshaw/

First I wanted to say thank you for creating this directive, it's been really useful. I had some feedback on my usages of the directive.

I've been using this library a lot the past week and started making modifications in my project which I want to contribute back: https://github.com/exceptionless/Exceptionless/blob/master/Source/Web/components/rickshaw/rickshaw.js. Please note that I added custom logic to handle RangeSelection which is an 3rd party add in for rickshaw. I also added logic to allow you to override the render method on the hoverdetail as well as filled in some extra functionality that didn't handle ticks for the xAxis and yAxis.

1. I was wondering how you use this on an attribute and why you would do this? It seems that you would always want to use it on an element.

2. I noticed that you don't use template: '< div > < /div > '. I tried to clean everything up by doing this but it messes with the chart width and height.. I think it would be best to convert this over at some point and use graph.configure({ width: x:, height, y }). I tried this but wasn't able to get it to work.

3. This directive recreates the graph on any update which could be very resource intensive and cause a lot of unneeded memory usage. I also added some checks to ensure creation doesn't happen unless the chart series data exists. I updated my code to update the graph but this could be way better:

        var seriesWatcher = scope.$watch(function() {
                   return scope.options.series[0].data;
               }, function(newValue, oldValue){
                   if (!angular.equals(newValue, oldValue)) {
                       if (!graph) {
                           create();
                       } else {
                           graph.update();
                       }
                   }
               });
   

4. Cleanup of resources. The watchers aren't being disposed when the scope is destroyed. I have fixed this by just calling the watcher.

5. The chart doesn't handle resizing the window, I brought in debounce library and watch the window resize. I wish I could take this a step further and get it to just resize the chart instead of recreating it. It would be nice to see if we could use the debounce logic that was added in 1.3 to accomplish this :).

6. I removed the series option as it was already included on options. Typically, you will be populating your series from external data and this made it easier to do this.

Do you think I should fork this completely or continue refining it and submit a pull request?

We are using GULP and WebPack (installing angular-rickshaw with bower) and the JS files are loaded in this order:

/bower_components/rickshaw/rickshaw.js
/bower_components/d3/d3.js
/bower_components/angular-rickshaw/rickshaw.js

Then, we obtain this error:

Uncaught ReferenceError: d3 is not defined

But, when we use the correct order:

/bower_components/d3/d3.js
/bower_components/rickshaw/rickshaw.js
/bower_components/angular-rickshaw/rickshaw.js

The problem is gone!

Fix: add this to .bower.json on rickshaw folder:

  "dependencies": {
    "d3": "~3.4.3"
  },

How can I propose this line to .bower.json?

Thanks...

Hi! Could you give any advise how to use tickTransformation in angular-rickshaw?
Thx.

Hi there, planning to implement this but a little worried about versioning. Maybe publishing the module?

For some reason angular rickshaw 0.5.0 works well, but in angular rickshaw 0.6.0 the chart is only updated once. My debugging so far has found that the update function is called in the directive, but for some reason rickshaw itself doesn't get the new series.