angular-google-chart/angular-google-chart

Google Chart Tools AngularJS Directive Module

thao33

@thao33

oh! that means we cannot add scroll bar in y axis also? How about zoom in each column of graph? Any config?

abhirepo

@dimple720

Hi, did anyone used google table charts with color formatters?

Nicholas Bering

@nbering

There should be a sample of color formatted with the Table chart in the multi-chart demo on the project’s documentation site.

abhirepo

@dimple720

Got it Thankyou @nbering

Rushikesh

@Rushikesh89

Hi,I need to draw Combo column chart with ng-google-chart.js. With "type"="ComboChart" it display stack bars ,I need separate bars.

Nicholas Bering

@nbering

You must have isStacked set, as this is not the default behavior. See https://developers.google.com/chart/interactive/docs/gallery/combochart for options (near the bottom of the page). This library just passes all options you provide to the upstream library unchanged.

Rushikesh

@Rushikesh89

@nbering Yes, you are correct. Your answer really helped me.It is exactly what i want. Thank you.

Nicholas Bering

@nbering

Glad I could help!

SimoneSabbatiniBynd

@SimoneSabbatiniBynd

Hi guys, how's going?

I got a question about formatters for LineCharts

Nicholas Bering

@nbering

Ask away...

SimoneSabbatiniBynd

@SimoneSabbatiniBynd

I have a line chart where I display values like 1.65

and I would format that value as 1xx 65yy

is there a way to do it ?

Nicholas Bering

@nbering

Number formatter. Example in the docs site for AGC as multi-chart.

There should be a reference page on it with link to upstream properties as well.

SimoneSabbatiniBynd

@SimoneSabbatiniBynd

I'm using that...but not able to do just using pattern

does pattern accept a callback as well ?

I have a formatting function that would format the value as I want...can I pass that on the formatter ?

Nicholas Bering

@nbering

Not that I recall. You’ll have to check the upstream docs for what patterns are accepted.

SimoneSabbatiniBynd

@SimoneSabbatiniBynd

@nbering do you mean this doc http://angular-google-chart.github.io/angular-google-chart/docs/0.1.0/ ?

Nicholas Bering

@nbering

You can set formatted values in your DataTable, though. The Formatters feature is primarily to cover things like axis label values.

Those are the docs for this project. Upstream is the Google docs site.

SimoneSabbatiniBynd

@SimoneSabbatiniBynd

https://developers.google.com/chart/interactive/docs/reference#patternformat ?

SimoneSabbatiniBynd

@SimoneSabbatiniBynd

Does anyone ever created a custom pattern formatter ?

I have this value 542 that represent the number of days

and I want to format it and display on my chart 1yr5m

any ideas how I can do that ?

Thanks!

Nicholas Bering

@nbering

I would provided that as a formatted value in your DataTable rather than using a Formatter.

I would give you a more detailed answer but I’m limited in my time during the workday so I can’t go look for links for you.

maylin2019

@maylin2019

Hello, may I ask how to dynamic add data to google chart after initialize the chart object in AngularJS?

Nicholas Bering

@nbering

The library provides data binding using Angular’s regular change detection mechanism. Just change your object and the chart will be redrawn.

maylin2019

@maylin2019

Hi Nicholas, thanks for the response. It helped. Now I am trying to customize tooltip based on the post at https://codepen.io/Toomaaa/pen/EmBwwZ. However when I tried something as simple as {"v":"<div>My Customized Tooltip</div>"} , I did get "My Customized Tooltip", instead I got the raw HTML "<div>My Customized Tooltip</div>". I had all the options setup correctly.

Nicholas Bering

@nbering

There’s a property you can set on the column to support HTML.

Taking a look at your sample.

Nicholas Bering

@nbering

@maylin2019 Can you provide a sample of what you're trying that doesn't work?

maylin2019

@maylin2019

I did look deeply into the sample. I have options.tooltip: {isHtml: true}, as well as cols {id:"tooltip", type:"string", role:'tooltip', 'p':{'html':true}},

Nicholas Bering

@nbering

Looks correct.

maylin2019

@maylin2019

Of course I am NOT using generic Google Chart, but AngularJS Google Chart through inject of googlechart with <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.js" type="text/javascript"></script>

Should I try to consider using something other than 1.0.0-beta.1?

Nicholas Bering

@nbering

The primary changes for the beta version were around how the Google Chart library was loaded. Using the "stable" version shouldn't affect this.

maylin2019

@maylin2019

Don't worry. The default tooltip works fine for me. I certainly can customize the content of the tootip, just NOT the shape of the tooltip box. No big deal. Thanks anyway.

Rushikesh

@Rushikesh89

@nbering Can you please tell me.How can i display value over each bar in bar chart ? I am using ng-google-chart.js

Nicholas Bering

@nbering

I’m in transit at the moment, but if you look at Labels in the upstream Google Charts docs, that might help you.

Rushikesh

@Rushikesh89

@nbering Thanks for quick reply. I am using ng-google-chart and setting data array to the chart object. I tried setting role-annotation to data array but it is not working.

Nicholas Bering

@nbering

Can you provide a sample of what you tried on CodePen or JSFiddle?

Rushikesh

@Rushikesh89

@nbering Can you please tell me,How to add Suffix in Gauge chart ? I tried for formatter and added suffix:'%' but suffix is not displaying.

Weigand

@kweigand-uxguy

Anyone tried hiding columns in a table? I need to hide my annotation columns when rendering a table view.
My code:

<div google-chart chart="cellularChart" agc-before-draw="drawHandler(cellularChart, cellularChart.type)" style="{{ chartStyle }}"></div>

$scope.drawHandler = drawHandler;
    function drawHandler (chart, type) {
      if(type === "Table") {
        chart.data.hideColumns([3, 5]);
      }
    }

FernandoRiffo

@FernandoRiffo

How to always see the tooltip active?

Where communities thrive

People

Repo info

Activity