angular-google-chart/angular-google-chart

Google Chart Tools AngularJS Directive Module

Google Chart Tools Directive Module

for AngularJS

Install

Install with bower

bower install angular-google-chart --save

Goal

Wrapper directive for Google Chart Tools

Contributing

Interested in contributing to Angular Google Chart? Cool! Check out CONTRIBUTING.md for a brief guide to raising issues and submitting Pull Requests.

A note on branches

Development branch is development.

Release branch is master (idealy), and was created just because Bower needed it.

There is documentation on the gh-pages branch which hosts the project's documentation website.

Please send your pull requests to development.

Building with Grunt

In order to build the project you will need to have NodeJS and NPM installed. In commandline, from the root of the project, run npm install. This will install grunt and the required plugins. Run grunt or grunt build to build ng-google-chart.js and ng-google-chart.min.js with included source maps. grunt release builds without source maps.

Running Tests

Tests are run during build. Use grunt watch to run jshint and tests whenever source files are changed.

Usage and Demo

See examples in the Documentation

Other samples

• http://plnkr.co/edit/3RJ2HS?p=preview
• http://plnkr.co/edit/E4iPtQ?p=preview

Chart Data doc

See ChartWrapper and DataTable documentation.

Release notes

See CHANGELOG.md for a summary of changes.

Out of luck ?

Try another AngularJS directive that use Highcharts.

angular-google-chart's Issues

Add support for Annotation Chart

I am trying to figure out how to get this working with the annotation chart per:

https://developers.google.com/chart/interactive/docs/gallery/annotationchart

But I am not having any luck. Help would be appreciated.

AngularJS Repeats duplicates

my ng-repeats are iterated over again. Only this time, they are iterated over multiple times. For instance,

$scope.dataset.rows = [
{label: 'Test 1', value: 1},
{label: 'Test 2', value: 2},
{label: 'Test 3', value: 3}
];

normally will display

Test 1 (1)
Test 2 (2)
Test 3 (3)

when I have the chart directive turned off. When I turn the directive back on, I get this:

Test 1 (1)
Test 1 (1)
Test 1 (1)
Test 2 (2)
Test 2 (2)
Test 2 (2)
Test 3 (3)
Test 3 (3)
Test 3 (3)

Please tell me the solution for this....

Resize event still triggers even after scope is destroyed

Maybe something like this would help?

                // Redraw the chart if the window is resized
                var resizeOff = $rootScope.$on('resizeMsg', function (e) {
                    ...
                });
                $scope.$on('$destroy', function() { resizeOff(); });

[enhancement] Add missing bower.json.

Hey, maintainer(s) of bouil/angular-google-chart!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library bouil/angular-google-chart is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "bouil/angular-google-chart",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Add an example to the 'formatters'

first of all, I love this wrapper. It works excellent for my purpose and lets me dynamically update charts. There's one issue I can't figure out though.

The documented (different page) way to format data doesn't work. It says to use:
chart.numberFormat = { cols: { columnNum: 4, format: {prefix: "$"} } };
but that's outdated.

Please add an example formatter to the sample.js as any obvious way to define number formats seem to be ignored

Naming inconsistency.

I noticed very early on that there is an inconsistency in the naming of the onReady and select attributes. In my experience in other languages and event handler usually starts with "on" the way onReady does, whereas the name select implies an action rather than an event.

I'd like to see select replaced with onSelect, but with the number of people already using this project, I feel it's probably best to add onSelect, log to console with a deprecated warning when select is used, and then phase it out in a later user.

I'd like to know what you, the other users and developers think.

note: table chart example doesn't work with firebug

We just spent some time trying to get the table-chart example running. It doesn't work with Firefox 30.0 beta and Firebug 2.0b8. Turning Firebug off or using another browser solves the problem. The error message was 'Hv is undefined'. The other examples work.

Other bug in table-example:
$scope.chart.options.tooltip is undefined
$scope.chartSelectionChange@http://bouil.github.io/angular-google-chart/partials/fat.js:140:13

Redefining formatters

Hi,

When I first set the formatters, for example :

$scope.chart.formatters = {
"number": [
{
"columnNum": 1,
"pattern": "##.##%"
}
]
};

I can't redefine it later in the code (with a new data set).

$scope.chart.formatters = {
"number": [
{
"columnNum": 1,
"pattern": "##,###"
}
]
};

Error :
TypeError: Cannot read property 'columnNum' of undefined (chrome)
Error: $scope.chart.formatters[formatType][i] is undefined (Firefox/Aurora)

Please add support for the Google Chart Toolbar

Please add support for the Google Chart Toolbar

I love this angular module, however I wish that it had built-in support for Google's Chart Toolbar (for exporting, etc.).

For more info: https://developers.google.com/chart/interactive/docs/gallery/toolbar?hl=en

ng-repeat is repeated n*n times

I am using the Google Chart directive in a project. I have an issue wherein all ng-repeats are repeated a number of times equal to the number of rows being iterated across.

I have tried selectively removing all functionality from my script, and this problem only appears after I turn on the google charts directive.

What is happening is this: I have a chart that is attached to a controller. I have another controller that has data. I use a service to communicate the currently selected data from the user-editable controller into the chart-drawing controller. If I turn off the chart directive, my ng-repeats loop through each element correctly and everything is displayed appropriately.

When I turn on the chart directive, all my charts render initially correctly, then the chart is drawn, and then all of my ng-repeats are iterated over again. Only this time, they are iterated over multiple times. For instance,

$scope.dataset.rows = [ {label: 'Test 1', value: 1}, {label: 'Test 2', value: 2}, {label: 'Test 3', value: 3} ];

normally will display

Test 1 (1)
Test 2 (2)
Test 3 (3)

when I have the chart directive turned off. When I turn the directive back on, I get this:

Test 1 (1)
Test 1 (1)
Test 1 (1)
Test 2 (2)
Test 2 (2)
Test 2 (2)
Test 3 (3)
Test 3 (3)
Test 3 (3)

This is obviously not correct. I tried sticking some data into a plunkr, but it does not seem to understand or interpret standard angular correctly. (It only seems to work when setting functions and variables in the global scope, possibly due to the way it is interpreted on plunkr) As such I do not have any code that you can see this issue happen with.

Any suggestions on fixing this would be great, as I do not want to have to write a custom set of functionality to use either google charts or another chart library.

ReferenceError and chartWrapper.

ReferenceError: chartWrapper is not defined & https://netdna.booztstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js. This was working before.

Request for sample capturing of event

Hi,

Can you please show me a short example on how to capture the event when I select or click on part of a chart? I would like to use it so that I can drill down more.

Thanks,

Neil

Why was angular dependency updated to 1.3?

Is that necessary?

Is it possible to clear LineChart view along with its data?

Hello, I'm feeding $scope.chart.data (see example) with arrays multiple times during app runtime. Everything works fine and it redraws well. But sometimes I get empty arrays from the server which is normal, thats when the api starts complaining about empty columns and leaves me with an error.

Is there any way to clear the chart when I dont have any data to feed it with and really dont want to leave the old data visible as well as any irrelevant errors?

Thanks

"Table has no rows." error after merging pull #76

#76 seems to have introduced a bug for me. The chart doesn't seem to be getting the data. Possible differences as to why I might have an issue and the samples don't:

• I'm loading my data asynchronously from an HTTP API.
• I'm using Angular Routes, and my graph is inside a view.
• I'm passing the google-chart directive an instance of google.visualization.DataTable, not JSON or an Array.

I'd like to note that none of the above was a problem before this change, but are different from the samples. Also, reverting to the version before this commit fixes my problem for the moment. Any ideas why this might be happening?

PNG Retrieval

https://developers.google.com/chart/interactive/docs/printing

Can't seem to recreate this. I retrieve my element (using document.getEleme...) and pass it through to the google.visualization.LineChart function, but I simply receive an "undefined is not a function" TypeError. LineChart() is defined, and my element is defined, so I'm not sure how to proceed from here. Is my approach correct in the context of your library?

Thanks

How to add range filter support?

So i was wondering if there is a way to add range filters supported by the original google charts api using this directive.

Example I want to create something like this
https://code.google.com/apis/ajax/playground/?type=visualization#chartrangefilter_control

Thanks

select event listener

google.visualization.events.addListener($scope.chartWrapper, 'select', function () {
                                        var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];
                                        if (selectedItem) {
                                            $scope.$apply(function () {
                                                $scope.select({selectedItem: selectedItem});
                                            });
                                        }
                                    });

The select event throw an error if the table is not ready.
The event listener should be set in the onReady event as describe here https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject

Furthermore to get the event working I have updated

$scope.$apply(function (scope) {
            scope.select()({selectedItem: selectedItem});
});

and in my template I bound with my scope :

<div google-chart chart="chart" style="{{chart.cssStyle}}" select="select"></div>

I am doing wrong ?

'chart' $watch fires twice, so drawAsync() runs twice

The 'chart' $watch fires twice for the same chart. You can observe this on the examples.

The second time it fires is unnecessary because the correct chart has already been drawn. I'm not sure how to workaround the issue though, as the 'chart' object has technically changed the second time it is fired, with some automatically generated stuff. The changes aren't related to the data/title/dimensions changing.

The reason that I'm trying to avoid the second hit is that it causes another drawAsync(), which is very slow in Internet Explorer 8.

accessing the chart object

I'd like to fire the setSelection() on a chart, is there a way to do it ?

LineChart Annotations not working

When I use this for the cols:

data: {cols: [ {id: 'metricName', label: '', type: 'date', p: {}},
{id: 'metricVal', label: '1st Col', type: 'number', p: {}},
{id: 'metricVal', label: '2nd Col', type: 'number', p: {}},
{id: 'metricVal', label: '3rd Col', type: 'number', p: {}},
{type: 'string', role: 'annotation'},
{type: 'string', role: 'annotationText'}
]}

Include "annotations: 'line'" in my options, and populate the data properly, there are no annotation lines. The LineChart does work as expected, just no annotation lines. Does this package support line chart annotations?

Table with formatters triggers draw twice

When using formatters for a table-chart, the table is drawn twice which causes the ready function called twice. And that makes it impossible to attach own events to a chart, because the wrapper.getChart() for the first draw throws an exception.

A workaround would be to not use formatters, but that's not intended, I guess. I already thought of a solution but didn't found an approach. So... let's brainstorm :-)?

Best
André

using batarang + angular-google-chart makes chrome use 100% cpu for a minute or two

The combination of angular-google-chart and batarang gives a problem - not sure if it is a symptom of some problem in angular-google-chart or a problem with batarang.

It happens only when clicking on the scope of the charts directive. There is nothing to see in the console log.

Tested with 0.0.6, 0.0.9, and head of gh-pages branch. Same effect.

Works only with Static data and Not by Dynamic Data

When a async request is made to get the data to draw the chart , the chart just blanks out with an error saying "no columns to draw the chart". It works with static data but not with dynamic data

How do I add tooltip HTML?

Looking at the examples here it seems pretty straight forward but I can't seem to figure out how to work it into this directive.

Chart tag holder must be explicitly closed (i.e. <div></div> and not <div />)

Not sure if it is possible but I am struggling to see an option to setup multiple GoogleCharts. I know you can flip one chart into different types and change the data, but when you want to show multiple....

Wrong version number 0.0.9 in ng-google-chart.js version 0.0.10

There's a wrong version number in:

https://github.com/bouil/angular-google-chart/blob/0.0.10/ng-google-chart.js

• @Version 0.0.9

Repo seems not to be bower compatible.

When I try to install your repository using bower by following command,

bower install angular-google-chart

it says:

bower                        ENOTFOUND Package angular-google-chart not found

If I try to do following:

bower install bouil/angular-google-chart

It gives the following output:

bower angular-google-chart#*       not-cached git://github.com/bouil/angular-google-chart.git#*
bower angular-google-chart#*          resolve git://github.com/bouil/angular-google-chart.git#*
bower angular-google-chart#*     ENORESTARGET Tag/branch master does not exist

Additional error details:
No tags found in git://github.com/bouil/angular-google-chart.git
Available branches: gh-pages
[1]    14962 exit 1     bower install bouil/angular-google-chart

I don't know the problem, maybe it expects a master branch. I saw some page that says gh-pages is ok, though. Not sure what's wrong.

I currently resolved my problem by adding following dependency to my bower.json file:

    "angular-google-chart":"git://github.com/bouil/angular-google-chart#gh-pages"

---

In case you haven't heard of it, here are some resources on bower:
Bower presentation
Meet Bower: A package manager for the web
Registering bower packages

Event Handling: Chart Ready callback

I would like to be able to bind a callback to the google chart events. Specifically, I want to run a function when the charts have rendered: google.visualization.events.addListener(chart, 'ready', myReadyHandler);
After initially creating the charts I tried applying this but was unsuccessful.

Integrating with ControlWrapper

I would like to help with enhancing the functionality by adding support for ControlWrapper( https://code.google.com/apis/ajax/playground/?type=visualization#chartrangefilter_control ). Any hints or support on this side, would be very helpful. Since I am fairly new to Angular, a wiki of the whole directive would be very helpful.
Regards,

Error with hidden views

Put the chart in a collapsed bootstrap accordion panel and then it gave the following error (the panel had "display:none)

Error: Invalid negative value for attribute width="-0.5"

Update the bower.json

Hi,

Using bower, I can't get the latest changes. Could you please update the tag and bower file ?

Thanks !

chart width cannot use percentage representation

I have tried to use the percentage as above, but failed...
And I read Google Chart API, it seems that percentage is available.

At the same time, I have tried to set the width in options, but still cannot work.

Could you confirm this issue .. Really thanks !

Documentation update

Hi, this is not an issue with the code, but a documentation update suggestion. It took me a little while to get the chart up and running on my page. I was missing the include in the angular.module code. So I created a plunkr as an experiment/example, and decided to just document the steps that I needed to take. Here's the plunkr. Feel free to fork it and include it in your README.md or other documentation:

http://plnkr.co/edit/3RJ2HS?p=preview

PhoneGap apps not loading Charts

The loadScript() function in the factory does run (successfully) when the library is referenced inside a PhoneGap app.

I got it to work by downloading the jsAPI file from google as a static script and referencing that in the html. After that I replaced the loadScript function with "onLoad()". This got the chart to render in the app.

Dynamic inclusion of the directive

Hi,

I'm just looking at how i could use this within an ng-repeat, to show multiple charts on the page, it doesn't seem like the chart param accepts any dynamic variables i.e. chart="chart{{number}}" but i can't think of how to achieve something similar?

Hopefully you can point me in the right direction, here's an example of what i'm trying to do:

<div class="col-md-6" ng-repeat="question in questions">
    <div class="cardView cardViewCenter">
        <h3>{{ question.title }}</h3>
        <hr />
        <div google-chart chart="chart{{question.id}}" />
    </div>
</div>

Transition animation support

Hello, are animations supported? If yes, How can I use?

https://developers.google.com/chart/interactive/docs/animation

Thanks for all

Depends on jQuery

Nothing in the documentation suggests that this depends on jQuery, but it does. I was banging my head against the wall wondering why it wasn't working. You might want to document that little bit.

Code indendation looks horrible :(

Please fix the code indentation. There are great online tools for this, such as http://jsbeautifier.org/

In the future, please only use spaces in indentations, instead of tabs or mixture of tabs and spaces.

Readability and maintenance will be a lot easier with proper indentation.

Sparkline

Hi,

Is there anyway to use google sparkline with this directive ?

gauge chart not binding

gauge chart data not binding with value..
does it support all google chart type??

Documentation for retrieving `chartWrapper` in `onReady` function

Through some digging in the source code, I found out that it's possible to pass a variable named chartWrapper to a function given in the onReady attribute on the directive. This is very useful, e.g. for attaching event listeners:

$scope.chartReady = function(chartWrapper) {
    $window.google.visualization.events.addListener(chartWrapper, 'select', function() {
        console.log('select event fired!');
    });
};

It's a good feature, but it's not documented. In the sample, the onReady function passed in is not utilizing this feature.

Unselect event

Select event should trigger also without selection

Manually call drawAsync?

The chartOrig watch isn't firing when I receive new data for the chart.

                    $scope.$watch('chartOrig', function () {

Is there a way to manually call drawAsync?

IE8 compatibility

Hi,
The sample page(http://bouil.github.io/angular-google-chart/) does not render any charts on IE8. Are there any plans to make this directive compatible with IE8?

Provide a select attribute

Hi,

So we can pass a callback when something is selected in the graph.
Thanks !

Cannot get custom tooltip to work on scatter chart with multiple series

The Json format of data I feed to the scatter chart is show below.

I use the last column for the tooltip, but the custom tooltip only pops up on the
last series of values, the other values on the graph still seems to render the default
tooltip with x,y. ( check images below )

Any idea how to get the custom tooltip to popup on all the values rendered in the graph?

How to use formatter for more columns

On http://plnkr.co/edit/E4iPtQ?p=preview i see usage of formatter.
How do I use it when I have more columns of type number? Is it supported?

How to use google.visualization.Query to provide data?

Sorry if my question is more Angular-ish but I am really new to ng.

I am trying to use google.visualization.Query in my controller to query for data to be displayed in an angular-google-chart but don't know how to inject the "google" object. Please provide some sample code to see how to feed chart data from a backend.

How to change datetime formating

Hello,

Like in title. Any suggestions ?