Comments (4)
/**
* Created by shahartaite on 05/01/2017.
*/
import React, {Component} from 'react';
const AmCharts = require('amcharts3-react');
class StatusGantt extends Component {
render() {
const ganttConfig = {
"height" :"500",
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD",
"columnWidth": 0.5,
"valueAxis": {
"type": "date"
},
"brightnessStep": 7,
"graph": {
"lineAlpha": 1,
"lineColor": "#fff",
"fillAlphas": 0.85,
"balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDateField": "start",
"endDateField": "end",
"dataProvider": [ {
"category": "Module #1",
"segments": [ {
"start": "2016-01-01",
"end": "2016-01-14",
"color": "#b9783f",
"task": "Gathering requirements"
}, {
"start": "2016-01-16",
"end": "2016-01-27",
"color": "#000000",
"task": "Producing specifications"
}, {
"start": "2016-02-05",
"end": "2016-04-18",
"task": "Development"
}, {
"start": "2016-04-18",
"end": "2016-04-30",
"task": "Testing and QA"
} ]
}, {
"category": "Module #2",
"segments": [ {
"start": "2016-01-08",
"end": "2016-01-10",
"color": "#cc4748",
"task": "Gathering requirements"
}, {
"start": "2016-01-12",
"end": "2016-01-15",
"task": "Producing specifications"
}, {
"start": "2016-01-16",
"end": "2016-02-05",
"task": "Development"
}, {
"start": "2016-02-10",
"end": "2016-02-18",
"task": "Testing and QA"
} ]
}, {
"category": "Module #3",
"segments": [ {
"start": "2016-01-02",
"end": "2016-01-08",
"color": "#cd82ad",
"task": "Gathering requirements"
}, {
"start": "2016-01-08",
"end": "2016-01-16",
"task": "Producing specifications"
}, {
"start": "2016-01-19",
"end": "2016-03-01",
"task": "Development"
}, {
"start": "2016-03-12",
"end": "2016-04-05",
"task": "Testing and QA"
} ]
}, {
"category": "Module #4",
"segments": [ {
"start": "2016-01-01",
"end": "2016-01-19",
"color": "#2f4074",
"task": "Gathering requirements"
}, {
"start": "2016-01-19",
"end": "2016-02-03",
"task": "Producing specifications"
}, {
"start": "2016-03-20",
"end": "2016-04-25",
"task": "Development"
}, {
"start": "2016-04-27",
"end": "2016-05-15",
"task": "Testing and QA"
} ]
}, {
"category": "Module #5",
"segments": [ {
"start": "2016-01-01",
"end": "2016-01-12",
"color": "#448e4d",
"task": "Gathering requirements"
}, {
"start": "2016-01-12",
"end": "2016-01-19",
"task": "Producing specifications"
}, {
"start": "2016-01-19",
"end": "2016-03-01",
"task": "Development"
}, {
"start": "2016-03-08",
"end": "2016-03-30",
"task": "Testing and QA"
} ]
} ],
"valueScrollbar": {
"autoGridCount": true
},
"chartCursor": {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
},
"export": {
"enabled": true
}
};
return (
<AmCharts {...ganttConfig}/>
);
};
}
export default StatusGantt;
from amcharts3-react.
this happenned to me as well, i changed all require statements, put script tags instead:
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> <script src="https://www.amcharts.com/lib/3/gantt.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>and it worked.
followed this jsbin, i think the problem was mostly the missing gantt.js file.
http://jsfiddle.net/api/post/library/pure/
from amcharts3-react.
Thanks very much @sht5 ! A teammate also came to that conclusion. Got it working.
FYI, the jsfiddle link you posted appears to be empty. However the code you posted is spot-on.
As a general note which may be of use to others, and to @Pauan , I initially tried to require('amcharts3/amcharts/gantt.js')
(similarly to how, in the demo code for serial charts, serial.js
is required, however the JSX compiler then throws an error on line 44 of gantt.js
. However, when including gantt.js
from amcharts.com as a script, it works fine.
from amcharts3-react.
@adamcee Sorry for the delay.
You should configure your JSX compiler so that it ignores any files inside of node_modules
, then you should be able to use require('amcharts3/amcharts/gantt.js')
from amcharts3-react.
Related Issues (20)
- How to Hide "Js charts by Amcharts" message on the graphs HOT 3
- There is no horizontal scroll HOT 3
- Facing "this.legend.destroy is not a function" when component unmounts HOT 2
- Images are not visible HOT 1
- Issue in reconstructing amcharts in React HOT 1
- on
- Uncaught TypeError: Cannot read property 'capture' of undefined HOT 1
- color changin HOT 1
- valueAxes is not working for X axis HOT 1
- when to release amcharts4-react HOT 2
- d.AmStockChart is not a constructor HOT 1
- Test cases failing: ReferenceError: AmCharts is not defined HOT 1
- How do I use methods if I use JSX? HOT 1
- Does AmCharts support react native HOT 1
- Custom ID to AmCharts HOT 1
- Line with lower value is appearing above the others HOT 1
- How to update config for amChart4 HOT 1
- is it available to set a colums / options for exporting csv?
- chart.removeListener is not a function after upgrade the Webpack 4 to 5
- Support for react v17.x in peerDependencies HOT 1
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 amcharts3-react.