mmathias01/google-charts

ES6 Google Charts Module that allows asynchronous loading

google-charts's Issues

What is module.hot?

What is module.hot?

if (module.hot) {
    module.hot.accept();
}

With wicked_pdf gem google-charts lib don't work

I don't know why but when I use the google-chart import, the graphs don't load in pdf using wicked_pdf gem

Ruby version
2.5.0
Rails
5.1.1
Webpack
3.1.0

IE11: Syntax error

Syntax error caused by code above:

class googleCharts {
    [loadScript]() {
....

Using "normal" syntax (without [], and Symbol) worked, like

class googleCharts {
    loadScript() {
....

Any reasons to use Symbol instead of class name?

City wise data not displaying in geo chart map

Hi,
First of all I am thankful to you for such a very helpful plugin , I am using it on my project but now I have a case which is not working by using you package .
My case is I have to generate map based on cities but I am not able to generate it by using this package ,although by using

state wise example in you documentation am successful generate map state wise ,if you give an example of city wise it will really help.
Thanks
Aftab Ahmed
my sample data set:

GoogleCharts is undefined

Hi,

I am having some issues using this package in a Laravel application using Vue.js, using laravel-mix to handle Webpack.

As per the docs, I have added import {GoogleCharts} from 'google-charts'; to my app.js file, webpack builds everything without errors.

I have a Vue component which calls GoogleCharts.load(this.drawChart()); - this gives me ReferenceError: GoogleCharts is not defined

If I add window.GoogleCharts = GoogleCharts; to my app.js it will run the callback function drawChart() but then I get ReferenceError: googleCharts is not defined when it hits let chart = new GoogleCharts.api.visualization.AreaChart(document.getElementById(this.chartDiv));

I have attempted importing it into my app.js in different ways but none of them have been successful.

Any ideas?

Gauge

Is it possible to add the gauge option?
I get it to work if in the js I add gauge:

`            script.onload = function() {
                GoogleCharts.api = window.google;
                GoogleCharts.api.charts.load('current', {
                    packages: ['corechart', 'table', 'gauge'],
                });
`

hjel

first sorry
that subject is my bad

I do not know why there is no load function

console.log

component

package.json

How to use this?

I'm a newb in the js ecosystem - how do actually use this module in my project? The quick start says to use: import {GoogleCharts} from 'google-charts';, but I think that only works when the js-file that I'm putting the example code in is in the same dir as the google-charts package, right? What am I missing?

add locale

Hi,

it would be nice if the package let the user to choose the locale.

TY,
Fabio.

getImageURI

I having trouble with this function getImageURI
i'm using angular-google-charts 2.2.2
i have these function

public ChartReady(chart: GoogleChartComponent, name: string, caption: string)
{
this.Reporte.Graficas.push({Grafica: name,
IsGrafica: true,
IsTable: true,
Caption: this.ui.GetLabel(caption),
Source: chart.chartWrapper.getChart().getImageURI()});
}

but the compiler not found the function getImageURI

Something is wrong with import

loader.js:226 GET https://www.gstatic.com/charts/45.2/js/jsapi_compiled_1.1_module.js

Question regarding loading charts

Hi,

a short question regarding loading charts.
when using this lib, does the usage load the data from web every time opening the Webpage?
Or is everything inside the module?

Frank

ERROR TypeError: Cannot read property 'visualization' of undefined

Is this compatible with Angular 6?

Could someone help me integrate this in an Angular Project?

Memory leak

I'm facing huge memory leak when using this with a couple of charts on same component

Property 'api' does not exist on type 'GoogleChartsManager'.

        import {GoogleCharts} from 'google-charts';

        GoogleCharts.load(() => {
            let data = GoogleCharts.api.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            let $html = $("<div />").attr("style", "color:red; font-style:italic").append("President").get(0).outerHTML;

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
                [
                    {
                        v:'Mike',
                        f: "Mike" + $html
                    },
                    '',
                    'The President'
                ],
                [
                    {
                        v:'Jim',
                        f:'Jim<div style="color:#ff0000; font-style:italic">Vice President</div>'
                    },
                    'Mike',
                    'VP'
                ],
                ['Alice', 'Mike', ''],
                ['Bob', 'Jim', 'Bob Sponge'],
                ['Carol', 'Bob', '']
            ]);

            data.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');
            data.setRowProperty(3, 'style', 'border: 1px double red');

            // Create the chart.
            let chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            // Draw the chart, setting the allowHtml option to true for the tooltips.
            chart.draw(data, {
                allowHtml:true,
            });
        },
        "orgchart");

When I build, I met error

ParseError when running broserify task

I added an import command in my project and snippet from your simple example code:
import { GoogleCharts } from 'google-charts';

However, the browserify task throws the following error:

>> /Users/[...]/node_modules/google-charts/googleCharts.js:44
>> export let GoogleCharts = new googleCharts();
>> ^
>> ParseError: 'import' and 'export' may appear only with 'sourceType: module'

I use the es2015 babel preset in browserify Although changing this to env gives the same error.
Am I missing something?

Uncaught SyntaxError: Unexpected token export

I'm getting this error using google charts with node.js and React

I'm performing a request from a React server to the Node back-end server, and the Node server is routing the request and returning the GoogleCharts.js file, however I am getting the Unexpected token export error.

The error originates from line 44 in the googleCharts.js file:
export let GoogleCharts = new googleCharts();

Googling the error results in finding this solution:
module.exports = googleCharts
(https://stackoverflow.com/questions/51102034/unexpected-token-export-and-a-lot-more-errors-on-import-of-google-charts-in-mete)
However I am unable to implement this solution as it would require editing the googleCharts.js file in node_modules and the file would be overriden / would not be uploaded to the git repo.

Any chance this could be fixed?

Animations

I am trying apply a animation in a Pie Chart following the Official documentation but don't work for me.

This is available in this project?

Single chart type loading not working as expected

when trying to load a specific chart type (ex. sankey), using a single string instead of an array of 1 string item doesn't works.

assuming type = 'sankey',

if(!type.length) { <-- should only validate type is not an array, since a string as a length property
type=[type] <-- never gets hit
}

using ['sankey'] works as expected...

Thx for the library!