Google charts api with Angular

[wset...@google.com]

Hi all,

I'm trying to make this gviz pie chart from the example here example https://google-developers.appspot.com/chart/interactive/docs/quick_start in angular js.

What services do I need to write?

The example code above uses 1) A google ajax library to load the gviz library 2) A gviz dataTable. 3) A gviz pie chart 4) document.getElementById

It seems like I'll need to write my own service for each of these, except $document. Is this true? That seems like an awful lot of boiler plate =/ (Side question, why is this wrapping benefitial?)

Can someone take a stab at what the dataTable service might look like? I'm really not sure how to get access to google.visualization.DataTable() to 'translate' this line. var data = new google.visualization.DataTable();

-Will

[l...@google.com]

Any updates on this?  I, too, am trying to make a gviz chart in AngularJS with no success from the examples.

Thank you!

Loretta :o)

[Sergey Grabkovsky]

Hi, I'm not really familiar with AngularJS, but why can't you use the library as the docs say you should? Do you have any code that I can look at to help?

- Sergey

--
You received this message because you are subscribed to the Google Groups "gviz-users" group.
To view this discussion on the web visit https://groups.google.com/a/google.com/d/msg/gviz-users/-/b_qsSStzssYJ.
To post to this group, send email to gviz-...@google.com.
To unsubscribe from this group, send email to gviz-users+...@google.com.
For more options, visit this group at http://groups.google.com/a/google.com/group/gviz-users/?hl=en.

[Johannes Hiemer]

Think so too. Create a directive for the tags and get started...

[Loretta]

WOW!  This was tough... but it has been resolved!

Thank you so much to Will Setchell for all your time and help offline!!!

Thank you!

Loretta :o)

[tele...@gmail.com]

Hi all,

Would you mind posting some example code for us poor non-Googlers that can't get Will offline? hehehe :D

thanks,

marc

[Will Setchell]

Actually its a bit tricky to get this working on a jsfiddle (I think because of an iframe)

The trick is to delay angular bootstrapping itself until gviz loads.  This shows you the idea.  If you try to run the code locally, it *should* work.

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

-Will

[tfo...@google.com]

The example didn't work for me until I added

    google.load('visualization', '1', {packages: ['corechart']});

to the script, but then it works in plunker too.

Thanks!

/Tommy

[Will Setchell]

cool, I updated the plunker.  Thanks

http://plnkr.co/edit/9OLrpu?p=preview

[ma...@fargas.com]

Awesome, thanks people :)

[Konstantin Tarkus]

Thanks for the sample. But how to make this chart update itself based on new values from the controller (think of a chart which re-renders every X secs based on a new data)

[mikere]

You can use scope.$watch() or scope.$on() handlers

воскресенье, 23 декабря 2012 г., 5:52:17 UTC+2 пользователь Konstantin Tarkus написал:

[Esteve Avilés]

Hi,

Here there is an example:

Write a directive for each type:

.directive('columnChart', function() {

return function(scope, element, attrs) {

var chart = new google.visualization.ColumnChart(element[0]);

scope.$watch(attrs.columnChart, function(value) {

var data = google.visualization.arrayToDataTable(value);

var options = {

 title: attrs.chartTitle,

 hAxis: {title: attrs.chartHaxisTitle, titleTextStyle: {color: 'red'}}

}

chart.draw(data, options);

});

}

})

.directive('gaugeChart', function() {

return function(scope, element, attrs, MonitoringService) {

// Log element

console.log(scope, element, attrs);

var chart = new google.visualization.Gauge( element[0]);

scope.$watch(attrs.gaugeChart, function(value) {

var data = google.visualization.arrayToDataTable(value);

var options = {

width: attrs.chartWidth, height: attrs.chartHeight,

redFrom: attrs.chartRedfrom, redTo: attrs.chartRedto,

yellowFrom: attrs.chartYellowfrom, yellowTo: attrs.chartYellowto,

max: attrs.chartMax,

min: attrs.chartMin,

minorTicks: 1,

animation:{

       duration: 1000,

       easing: 'in',

     }

};

chart.draw(data, options);

});

}

})

.directive('areaChart', function() {

return function(scope, element, attrs, MonitoringService) {

// Log element

console.log(scope, element, attrs);

var chart = new google.visualization.AreaChart( element[0]);

scope.$watch(attrs.areaChart, function(value) {

//alert('New Array: '+value);

var data = google.visualization.arrayToDataTable(value);

var options = {

title: 'Company Performance',

hAxis: {title: 'Year',  titleTextStyle: {color: 'red'},

animation:{

       duration: 1000,

       easing: 'in',

     }

}

};

chart.draw(data, options);

});

}

})

In html use something like:

<div column-chart="chartData" chart-title="Eiii new Chart" chart-haxis-title="Esteve"></div>

<div gauge-chart="chartData" ng-controller="RequestChartCntl" chart-width="600"

chart-height="300" chart-redfrom="100" chart-redto="200" chart-yellowfrom="75" chart-yellowto="100" 

chart-max="200" chart-min="0"></div>

<div area-chart="chartData" ng-controller="ThreadCountCntl"></div>

And in the controller, update the data:

function MyCtrl1($scope, $timeout, $log) {

$scope.germanyData = 100;

$scope.title = 'Lorem Ipsum';

var timeoutId;

$scope.chartData = [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'], ['', $scope.germanyData, 300, 400, 500, 600, 800]];

}

Regards,

On Sunday, July 1, 2012 8:00:51 PM UTC+2, wset...@google.com wrote: