AngularJS and Flotr2 (or any other charting library)

[m48u]

Hi,

I'm trying to combine AngularJS with a chart plotting library. I already tried jqplot, d3 flot and flotr2. But none of them work the way I expect.

Here is a plunker with flotr2: http://plnkr.co/edit/8Bo2YD9AWaUwLDXr6IGk?p=preview

By drawing the chart directly from my controller it works fine, but as soon as I put it into a directive the console blames about "The target container must be visible".

Any ideas for that?

Are there any projects that implement any of the charting libraries?  What are best practices by working with charts?

Thanks in advance

m48u

[m48u]

Hi,

now i managed to extract it into a directive without error but the chart doesn't display any data.

http://plnkr.co/edit/CuxBGs7JfbBujK87JHqk?p=preview

Any ideas to fix that?
Thanks

[Christopher Sexton]

Did you ever have any success here? I am battling the same situation. Flotr2 does not like it when you pass in the elem provided by the directive.

//this results in an error "The target container must be visible"
//Flotr.draw(elem, [flot.data], flot.options); 

//without a isolated scope everthing is working
//Flotr.draw(document.getElementById(flot.id), [scope.flotr.data], scope.flotr.options);

[E_lexy]

I am succesfully using Highcharts.

Here is my directive:

directive('appVersion', ['version', function(version) {

  return function(scope, elm, attrs) {

    elm.text(version);

  };

}]).directive('chart', function() {

  return {

    restrict: 'A',

    scope: {

      readings: '=',

      latest: '='

    },

    replace: true,

    controller: function($scope, $element, $attrs) {

      console.log(2);

    },

    template: '<div id="container" style="margin: 0 auto">not working</div>',

    link: function(scope, element, attrs) {

      console.log(3);

      var chart = new Highcharts.Chart({

        chart: {

          renderTo: 'container',

          zoomType: 'x',

          spacingRight: 20,

          alignTicks: false

        },

        title: {

          text: 'Heating overview SeretaLabs, Camarles'

        },

        tooltip: {

          shared: true

        },

        plotOptions: {

          series: {

            marker: {

              enabled: false

            }

          }

        },

        yAxis: [{ // Primary yAxis

          height: 200,

          labels: {

            formatter: function() {

              return this.value + '°C';

            }

          },

          title: {

            text: 'Temperature',

          }

        }, { // Secondary yAxis

          title: {

            text: 'Pump on/off',

            style: {

              color: '#4572A7'

            }

          },

          labels: {

            style: {

              color: '#4572A7'

            }

          },

          top: 270,

          height: 50,

          offset: 1,

          lineWidth: 2,

          max: 1,

          min: 0

          //opposite: true

        }],

        xAxis: {

          type: 'datetime',

          maxZoom: 60,

          title: {

            text: null

          }

        },

        legend: {

          // layout: 'vertical',

          // align: 'left',

          // x: 80,

          verticalAlign: 'top',

          y: 20,

          floating: true

        },

        series: [{

          type: 'spline',

          name: 'Top Tank',

          data: null,

        }, {

          type: 'spline',

          name: 'After heater',

          data: null,

        }, {

          type: 'spline',

          name: 'Panel out',

          data: null,

        }, {

          type: 'spline',

          name: 'Panel in',

          data: null,

        }, {

          type: 'spline',

          name: 'Temp Outside',

          data: null,

        }, {

          type: 'spline',

          name: 'Xchanger out',

          data: null,

        }, {

          type: 'spline',

          name: 'Floor in',

          data: null,

        }, {

          name: 'Gas heater',

          //color: '#4572A7',

          type: 'line',

          yAxis: 1,

          data: null

        }, {

          name: 'Floorpump',

          //color: '#4572A7',

          type: 'line',

          yAxis: 1,

          data: null

        }, {

          name: 'Solarpump',

          //color: '#4572A7',

          type: 'line',

          yAxis: 1,

          data: null

        }, ]

      });

      scope.$watch("readings", function(values) {

        var series = {};

        var arrBool = ['sp', 'fp', 'hp']

        angular.forEach(values, function(data, key) {

          var date = data.key;

          angular.forEach(data.value[0], function(value, key) {

            if(!Array.isArray(this[key])) this[key] = [];

            var divider = arrBool.indexOf(key) !== -1 ? 1 : 10;

            this[key].push([date, value / divider]);

            var tes;

          }, series);

        }, series);

        chart.series[0].setData(series.tt);

        chart.series[1].setData(series.ah);

        chart.series[2].setData(series.po);

        chart.series[3].setData(series.pi);

        chart.series[4].setData(series.pa);

        chart.series[5].setData(series.xo);

        chart.series[6].setData(series.fi);

        chart.series[7].setData(series.hp);

        chart.series[8].setData(series.fp);

        chart.series[9].setData(series.sp, true);

      }, true);

      scope.$watch("latest", function(reading) {

        if(reading) {

          var series = {};

          var arrBool = ['sp', 'fp', 'hp']

          var date = reading.key;

          angular.forEach(reading.value[0], function(value, key) {

            if(!Array.isArray(this[key])) this[key] = [];

            var divider = arrBool.indexOf(key) !== -1 ? 1 : 10;

            this[key] = [date, value / divider];

            var tes;

          }, series);

          chart.series[0].addPoint(series.tt, false, true);

          chart.series[1].addPoint(series.ah, false, true);

          chart.series[2].addPoint(series.po, false, true);

          chart.series[3].addPoint(series.pi, false, true);

          chart.series[4].addPoint(series.pa, false, true);

          chart.series[5].addPoint(series.xo, false, true);

          chart.series[6].addPoint(series.fi, false, true);

          chart.series[7].addPoint(series.hp, false, true);

          chart.series[8].addPoint(series.fp, false, true);

          chart.series[9].addPoint(series.sp, false, true);

          chart.redraw();

        }

      }, true);

    }

  }

})

Also here is some documentation on using nd3js

http://jeelabs.org/2013/02/13/historical-data-and-graphing/

I see he has now changed to use flotr2. Just check JPs repo here: https://github.com/jcw/housemon

It is all coffeescript...

[E_lexy]

Oh, my repo is here: https://bitbucket.org/E_lexy/jmonitor

It's based on the node angularJS seed app.

On Thursday, January 31, 2013 12:03:39 PM UTC+1, m48u wrote:

[Dan Kang]

Hi there,

I'm curious as to what problems you had with d3.js?  I've been looking into using d3.js in conjunction with AngularJS though I haven't done a whole lot of exploration yet.  Anyone else has experience using both the same project?

Dan

[Thomas Stapleton]

Brian Ford has a great write up on using D3.js with Angular - http://briantford.com/blog/angular-d3.html.

I built something pretty simple with D3.js and Angular - https://github.com/tstapleton/cbm. There were enough resources on the web to figure it out.

[Dan Kang]

Great stuff, thanks Thomas!

[kurt.t....@gmail.com]

Hi Christopher, I am not sure if you are still interested in this, but I have managed to successfully get

directives working with angular.

However, I was restricted to attribute directives. Also, the element should be referenced by elem[0]

i.e. //Flotr.draw(elem[0], [flot.data], flot.options);

an example bar chart can be seen below -- inspired by a google chart integration I saw a couple months ago.

http://jsfiddle.net/kurtteichman/KDYSN/

[Arnold Bockenbauer]

Hi guys ! We've built a directive that uses d3.js to provide versatile, ready out-of-the-box charts in AngularJS !

Here it is : http://n3-charts.github.io/line-chart/#/