Rgraph sample using Angular js

Question

I am new to AngularJS and I would like to draw R-graph in AngularJS. I searched a lot and could not find any result.I got a sample in drawing Google chart using angular js. In the same way i need to plot r-graph in AngularJS. Can anyone suggest a way or sample in drawing r-graph using AngularJS.

Please add more information to your question to get a better response. — Ashutosh Nigam, Mar 20 '15 at 06:30
I need to plot pie chart in rgraph but using angular js.In r-graph we are setting the data to the canvas id.Instead of using id I need to plot a pie chart in angularjs using canvas tag. — prabha baby, Mar 20 '15 at 07:09

score 0 · Answer 1 · answered Aug 09 '17 at 18:55

I am working on the same, and I've found a solution. I think you could develop it to suit your needs.

First and foremost, you have to define a <div> tag which will contain the chart:

 <div style="width: 750px; height: 300px" id="chart-container">

The second part is to create your controller. I won't dive into the details of creating an app, etc, etc. This is the example I've created:

//
// ChartController
//
app.controller('ChartControllerImpl', [
    '$element', 
    '$log', 
    function($element,$log){
        $log.info("Hello from ChartControllerImpl");

        $log.info($element);
        $log.info($element[0].id);

        var data = {
                id: $element[0].id,
                data: [0.05,0.06,0.01,0.06,0.09,0.02,0.07],
                options: {
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    key: ['Richard','Charlie'],

                    gutterTop: 55,

                    linewidth: 5,
                    hmargin: 0,

                    title: 'A basic linechart',

                    gutterLeft: 50,
                    gutterBottom: 50,
                    yaxisDecimals: 2,

                    tickmarksStyle: 'endcircle',
                    tickmarksFill: 'white',
                    tickmarksLinewidth: 3,
                    tickmarksSize: 10,

                    spline: true,
                    xaxis: false,
                    yaxis: false,
                    xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                    shadow: true
                }
            };

        new RGraph.SVG.Line(data).trace();
    } // function $http, $log
] ); // ChartControllerImpl

And finally, you have to link the controller with the html directive via directives:

 <div style="width: 750px; height: 300px" id="chart-container"
      ng-controller="ChartControllerImpl as chartController">

Rgraph sample using Angular js

1 Answers1