Search code examples
javascriptangularjsrickshaw

Set variable in angular

I want to use the rickshaw module to create a graph in my app. I followed the instruction in here and didnt succedd : http://ngyewch.github.io/angular-rickshaw/#/home this is my html : 

<rickshaw
            rickshaw-options="options1"
            rickshaw-features="features"
            rickshaw-series="series1">
        </rickshaw>

this is my controller:

app.controller('GraphsController', function ($scope ) {
    $scope.options1 = {
        renderer: 'area'
    };
    $scope.series1 = [{
            name: 'Series 1',
            color: 'steelblue',
            data: [{x: 0, y: 23}, {x: 1, y: 15}, {x: 2, y: 79}, {x: 3, y: 31}, {x: 4, y: 60}]
        }, {
            name: 'Series 2',
            color: 'lightblue',
            data: [{x: 0, y: 30}, {x: 1, y: 20}, {x: 2, y: 64}, {x: 3, y: 50}, {x: 4, y: 15}]
        }];
});

anyone knows what I'm doing wrong? Thank you!

Solution

  • Looks like you might need to specify the controller on the <rickshaw> tag. Add this attribute tag like this:

    <rickshaw ng-controller="GraphsController"
          rickshaw-options="options1"
          rickshaw-features="features1"
          rickshaw-series="series1">
</rickshaw>

    Notice that I have now added the ng-controller attribute to the tags on <rickshaw> and specified the name of the controller you have defined in your JavaScript as its value. Hope this helps!

    -- edit --

    So, after a little investigation, there are a couple things that I would suggest. The first was already pointed out in another answer, make sure you are using = and not == in your attribute tags.

    The second, make sure that you have used the correct variable names from your controllers scope object. I noticed that you are using features, but it doesn't look like it's being specified in the controller anywhere. Probably not causing any issues, but something to be aware of.

    Finally, what I am guessing is the issue is that in your module specification, you are not including the angular-rickshaw module. Where you instantiate your angular app, you must include the angular-rickshaw module, like this:

    var app = angular.module('myGraphApp', ['angular-rickshaw']);

    Without this, the rickshaw module will not be included and nothing will work. Here is a working example in plunker: http://plnkr.co/edit/cKumiX7kYc90gNA2jdZW?p=preview

    Hope this solves your problem!