Comments (8)
I've had this happen as well. It seemed to be around the time I updated everything from React 0.13 to 0.14, to me it seems like the GoogleChartLoader might have errored silently. I might not be completely following all of it properly but the Chart.js is hitting the render method which gives the empty div but then it gets to https://github.com/RakanNimer/react-google-charts/blob/master/src/components/Chart.js#L24 but that line might not be working? I didn't see any network traffic showing that the javascript for the google chart was getting downloaded which is probably why the chart doesn't load.
In my case at least, the issue seems to be as a part of the build process for my bundle since something isn't getting included. Even after including "scriptjs" it didn't seem to help. Have you fixed yours yet @TiagoGouvea ?
my package.json:
{
"name": "dashboard",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"browserify": "^12.0.1",
"combined-stream": "^1.0.5",
"eslint-plugin-react": "^3.8.0",
"gulp": "^3.9.0",
"gulp-babel": "^6.1.0",
"gulp-eol": "^0.1.1",
"gulp-plumber": "^1.0.1",
"gulp-react": "^3.1.0",
"gulp-watch": "^4.3.5",
"memory-streams": "^0.1.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-dropdown-button": "^1.0.11",
"react-google-charts": "^0.2.0",
"react-select": "^0.9.1",
"react-slick": "^0.10.0",
"react-widgets": "^3.1.7",
"scriptjs": "^2.5.8",
"vinyl-source-stream": "^1.1.0",
"xhr": "^2.2.0"
}
}
from react-google-charts.
I haven't @ericfowler303
from react-google-charts.
I have found the same thing. The problem is that errors cause some promise to be rejected, but then nothing is done with the rejection value. By adding a breakpoint in q.js (in the Promise.prototype.then
function) I was able to at least fix the problem. Once the configuration was correct my graph did show.
Unfortunately, I did not find which promise was rejected...
from react-google-charts.
I ran into the same problem -- specifically with the bar chart example. It seems like one of the more recent commits has not been published despite the version bump. When I run
npm install react-google-charts@latest
At line 91 of Chart.js I get:
if ((this.props.data !== null && this.props.data.length === 0) || this.props.columns.length === 0) {
return;
}
This doesn't match up with the latest version of Chart.js visible here within the project.
This bug (or at least one cause of it) seems to be fixed with @kmayer 's commit, but pulling the latest version of the package does not have his changes.
from react-google-charts.
Exactely as @jeffersonpark mentioned. The distribution in NPM directory is not up-to-date with the master branche. I solved this issue by installing direct from the git repository instead
npm install RakanNimer/react-google-charts
from react-google-charts.
Very good nanndoj!
Thanks!
from react-google-charts.
Hey !
Thanks for reporting this, I updated the npm package to match the the code in ther repo.
Let me know if the issue resurfaces.
Cheers !
from react-google-charts.
Same issue here with
<Chart
chartType="LineChart"
width="600px"
height="400px"
options={{
title: 'chart',
}}
data={[
['column_one_label', 'column_two_label'],
[1, 2],
[2, 3],
]}
/>
Can't use latest version unfortunately because of #26
from react-google-charts.
Related Issues (20)
- Options are not documented
- Allow to close tooltips programmatically
- Storage size formats
- [Bug]: addOneTimeListener this doesn't seem to be supported?
- [Bug]: Can't seem to get MutationObserver to work inside an event, but it works with the underlying library
- [Bug]: Bar Chart (and Other?) Examples Broken
- [Bug]: No Material UI Support?
- [Bug]: Scatter chart options not recognized (Material)
- Remove deprecated dependency react-scripts
- [Bug]: Diff tooltips prefix option
- [Bug]: Stacked Column Chart - Show Annotation on Bars HOT 1
- [Bug]: ReferenceError: Property 'document' doesn't exist
- [Bug]: sort and page events are not working with Table chart HOT 1
- [Bug]: Geo chart (maybe other) doesn't respect React@18 StrictMode
- [Bug]: Select event is not working in strict mode. HOT 1
- [Bug]: loadingStatus state for react-google-charts is set as loading permanantly HOT 5
- [Bug]: Org Chart does not render label on top node HOT 1
- [Bug]: Charts with spreadsheets does not work
- [Bug]: can't only show lable in tooltip
- [Bug]: ready event executed once if we have multiple table
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-google-charts.