mmathias01 / google-charts Goto Github PK
View Code? Open in Web Editor NEWES6 Google Charts Module that allows asynchronous loading
License: MIT License
ES6 Google Charts Module that allows asynchronous loading
License: MIT License
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
Could someone help me integrate this in an Angular Project?
I'm facing huge memory leak when using this with a couple of charts on same component
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?
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
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?
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?
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?
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
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:
loader.js:226 GET https://www.gstatic.com/charts/45.2/js/jsapi_compiled_1.1_module.js
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'],
});
`
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?
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!
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
What is module.hot
?
if (module.hot) {
module.hot.accept();
}
Hi,
it would be nice if the package let the user to choose the locale.
TY,
Fabio.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.