Passing AngularJS scope to a JS Chart

Question

I am trying to use an Array from a controller which is within a $scope globally declared in that controller within some Javascript in my html file. Is this possible to do? I have tried to implement $rootScope without much success not sure if there is an issue with the implementation but the $rootScope gets called first and I get undefined in the console and then the controller sets the value after.

This is my controller

function HomeCtrl($rootScope, $scope, $http, $filter){
    $rootScope.temp1 = [[gd(2016, 6, 1), 82], [gd(2016, 6, 7), 23], [gd(2016, 6, 14), 66]];
}

This is my JS placed within my HTML

    $(document).ready(function($rootScope) {

    console.log($rootScope.temp1);

    var data1 = $rootScope.temp1;

    var data2 = [
      [gd(2016, 6, 1), 82],
      [gd(2016, 6, 7), 23],
      [gd(2016, 6, 14), 66],
      [gd(2016, 6, 21), 9],
      [gd(2016, 6, 28), 119],
      [gd(2016, 6, 29), 6],
      [gd(2016, 6, 30), 9]
    ];

    var data3 = [
      [gd(2016, 6, 1), 822],
      [gd(2016, 6, 7), 232],
      [gd(2016, 6, 14), 626],
      [gd(2016, 6, 21), 92],
      [gd(2016, 6, 28), 1219],
      [gd(2016, 6, 29), 62],
      [gd(2016, 6, 30), 92]
    ];
    $("#canvas_dahs").length && $.plot($("#canvas_dahs"), [
      data1, data2, data3
    ], {
      series: {
        lines: {
          show: false,
          fill: true
        },
        splines: {
          show: true,
          tension: 0.4,
          lineWidth: 1,
          fill: 0.4
        },
        points: {
          radius: 0,
          show: true
        },
        shadowSize: 2
      },
      grid: {
        verticalLines: true,
        hoverable: true,
        clickable: true,
        tickColor: "#d5d5d5",
        borderWidth: 1,
        color: '#fff'
      },
      colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
      xaxis: {
        tickColor: "rgba(51, 51, 51, 0.06)",
        mode: "time",
        tickSize: [1, "day"],
        //tickLength: 10,
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
      },
      yaxis: {
        ticks: 8,
        tickColor: "rgba(51, 51, 51, 0.06)",
      },
      tooltip: false

    });

    function gd(year, month, day) {
      return new Date(year, month - 1, day).getTime();
    }
  });

I don't understand why document.ready ?? Angular run after completely loaded the document again why?? — kernal_lora, Aug 31 '16 at 06:35
Any way can you show us your code in JSFIDDLE. Because your JS little bit confusing me — kernal_lora, Aug 31 '16 at 06:36
You can not call Angulars $rootScope like that outside of an Angular Controller or Service. Moreover, you are trying to load it using jquery as soon as the page loads, and it may be null at that time depending upon the load order of your scripts. The solution would depend upon your use case. As it is unclear, why you would want to use Angular like that. — Anjul Garg, Aug 31 '16 at 06:36
I am pulling data through a route which connects to Mongodb (mlab) and then aggregating the JSON in the controller on the date, which gives me the date and the sum of the amount column. Once I get that, I am trying to pass the resulting array to a pre-defined JS chart library to visualize the data on the page. — Akber Ali, Aug 31 '16 at 06:44
i do not know if you are aware of it, but there's a plugin for angularjs-jschart : angular-chart.js. It's working great you could use it or inspire of it — Nemeros, Aug 31 '16 at 06:47
Ok just looked at this, this is so good, I am going to use this instead, this is so much easier. Thanks Nemeros, this solved the problem for me. — Akber Ali, Aug 31 '16 at 06:52

score 0 · Accepted Answer · answered Jan 11 '17 at 03:30

We cannot pass AngularJs variables into a standalone JS chart library and need to use a chart that connects directly with the call. I found two of these and practically implemented angular-chart.js which @Nemeros suggested.

The other was Angular-nvD3 which I tested and it worked successfully.

Passing AngularJS scope to a JS Chart

1 Answers1