Comments (14)
Hi @Gervwyk,
It looks like you're using ES6 modules. In that case it should be like this instead:
import "amcharts3-export";
import React, {Component} from 'react';
import AmCharts from "amcharts3-react";
import "amcharts3/amcharts/gauge.js";
Note: You must import amcharts3/amcharts/gauge.js
after amcharts3-react
from amcharts3-react.
If someone comes here looking for how to get amstock working, it's similar:
import AmCharts from 'amcharts3-react'
import 'amstock3/amcharts/amstock'
after npm install
ing amstock of course
from amcharts3-react.
Hi @Gervwyk,
Are you using <script>
tags, or are you using Webpack?
from amcharts3-react.
Hi @Pauan. I'm using webpack. npm installations.
In my dependencies I have:
"amcharts3": "github:amcharts/amcharts3",
"amcharts3-export": "github:amcharts/export",
"amcharts3-react": "github:amcharts/amcharts3-react",
I create a new react component to draw the chart. Export also does not work. This is an summery of my chart draw file component file:
require("amcharts3-export");
import React, {Component} from 'react';
var AmCharts = require("amcharts3-react");
export class ChartBarDraw extends (Component) {
constructor(props){
super(props);
this.state = {
zoomoutflag: false
}
this.chart = this.initChart(props)
this.selectheight = 0
}
initChart(props){
... all chart settings ...
}
render(){
return(
<div id={this.props.tileid} style={chartSize} >
<AmCharts ref='chartref' {...this.chart} dataProvider={this.props.data} />
</div>
)
}
}
from amcharts3-react.
Thanks @Pauan. That solved the issue for the gauges.. However, the export feature still does not work. The export option does not show up. It is almost like it is disabled. However, I do have:
"export": {
"enabled": true,
"menu": [ {
"class": "export-main",
"menu": [ {
"label": "Download",
"menu": [ "PNG", "JPG", "CSV", "XLSX", "PRINT" ]
}, {
"label": "Annotate",
"action": "draw",
"menu": [ {
"class": "export-drawing",
"menu": [ "JPG", "PNG", "PRINT" ]
} ]
}]
}]
},
Defined in my chart settings.. Any ideas?
from amcharts3-react.
Hi @Gervwyk,
I just tested your export code with examples/webpack-export
and it works fine.
Could you please provide all of your code, so that I can figure out what the problem is?
from amcharts3-react.
Hi @Pauan
Will be a bit difficult for me to paste all the code since its quite a complex large application and I don't have it in n github repo..
I'm debugged further and found that if I include:
import "amcharts3-export/export.css"
On page load I get the following errors:
Uncaught SyntaxError: Unexpected token < FileSaver.min.js:1
Uncaught SyntaxError: Unexpected token < jszip.min.js:1
Uncaught SyntaxError: Unexpected token < xlsx.min.js:1
Uncaught SyntaxError: Unexpected token < pdfmake.min.js:1
Uncaught SyntaxError: Unexpected token < vfs_fonts.js:1
Uncaught SyntaxError: Unexpected token < fabric.min.js:1
If I then click on one of the menu options I get:
Uncaught ReferenceError: fabric is not defined(…)
So if I include these files manually:
import "amcharts3-export/libs/blob.js/blob.js"
import "amcharts3-export/libs/jszip/jszip.min.js"
import "amcharts3-export/libs/FileSaver.js/FileSaver.min.js"
import "amcharts3-export/libs/fabric.js/fabric.min.js"
import "amcharts3-export/libs/pdfmake/vfs_fonts.js"
I'm able to click on the download options but the download does not start only:
"Rightclick -> save picture as... to save image" appears on the chart. The save CSV option also does not download a file and only renders "CTRL + C to copy the data into the clipboard." on the chart with the data. If I include:
import "amcharts3-export/libs/xlsx/xlsx.min.js"
I get the following error:
Cannot find module './dist/cpexcel'(…)
I'm running my js stack on meteor and react.
Thanks for the help
from amcharts3-react.
js:1
Отправлено из мобильной Почты Mail.Ru
вторник, 8 ноября 2016 г., 11:26 +0300 от Gervwyk [email protected]:
Hi @Pauan
Will be a bit difficult for me to paste all the code since its quite a complex large application and I don't have it in n github repo..
I'm debugged further and found that if I include:
import "amcharts3-export/export.css"
On page load I get the following errors:
Uncaught SyntaxError: Unexpected token < FileSaver.min.js:1
Uncaught SyntaxError: Unexpected token < jszip.min.js:1
Uncaught SyntaxError: Unexpected token < xlsx.min.js:1
Uncaught SyntaxError: Unexpected token < pdfmake.min.js:1
Uncaught SyntaxError: Unexpected token < vfs_fonts.js:1
Uncaught SyntaxError: Unexpected token < fabric.min.js:1
If I then click on one of the menu options I get:
Uncaught ReferenceError: fabric is not defined(…)
So if I include these files manually:
import "amcharts3-export/libs/blob.js/blob.js"
import "amcharts3-export/libs/jszip/jszip.min.js"
import "amcharts3-export/libs/FileSaver.js/FileSaver.min.js"
import "amcharts3-export/libs/fabric.js/fabric.min.js"
import "amcharts3-export/libs/pdfmake/vfs_fonts.js"
I'm able to click on the download options but the download does not start only:
"Rightclick -> save picture as... to save image" appears on the chart. The save CSV option also does not download a file and only renders "CTRL + C to copy the data into the clipboard." on the chart with the data. If I include:
import "amcharts3-export/libs/xlsx/xlsx.min.js" I get the following error:
Cannot find module './dist/cpexcel'(500…)
I'm running my js stack on meteor and react.
Thanks for the help
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub , or mute the thread .
from amcharts3-react.
Hi @Gervwyk,
amcharts3-export/export.css
is a CSS file, you cannot import it into JavaScript.
Instead, it needs to go into your HTML code, like this:
<html>
<head>
<link rel="stylesheet" href="node_modules/amcharts3-export/export.css" type="text/css" media="all" />
</head>
</html>
After fixing that, if you are still having problems, try changing the export path:
"export": {
"libs": { "path": "node_modules/amcharts3-export/libs/" }
}
from amcharts3-react.
@Gervwyk try add window.saveAs = require('file-saver').saveAs;
to solve the saveAs issue.
from amcharts3-react.
Hey guys,
Having similar issue using Meteor + React.jsx.
I have the charts rendering and if I include the export.css file manually in my component folder I will see the export functionality, only the save as functionality will work where it will convert the chart to csv, json etc... I need to convert my chart to base64.
I see the following error messages in browser console:
fabric.min.js:1 Uncaught SyntaxError: Unexpected token <
FileSaver.min.js:1 Uncaught SyntaxError: Unexpected token <
jszip.min.js:1 Uncaught SyntaxError: Unexpected token <
xlsx.min.js:1 Uncaught SyntaxError: Unexpected token <
In the folder Chart I have the following files:
export.css
PaybackPeriod.jsx
My code looks as follows:
`import "amcharts3-export";
import React from 'react';
import ReactDOM from 'react-dom';
import AmCharts from 'amcharts3-react';
class PaybackPeriod extends React.Component {
constructor(props) {
super(props);
var data = props.component;
this.state = {
data: data
};
var lineItems = [];
var negativeField = '#bdc3c7';
var positiveField = '#2ecc71';
for (var key in data) {
var payback = data[key].payback;
var year = data[key].year;
var lineItem = {
"year": year,
"value": payback
};
if (payback >= 0) {
lineItem['lineColor'] = positiveField;
} else {
lineItem['lineColor'] = negativeField;
}
lineItems.push(lineItem);
}
this.state = {
lineItems: lineItems
}
}
render() {
const config = {
"type": "serial",
"theme": "light",
"categoryField": "year",
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Payback"
}
],
"animation": false,
"graphs":
[{
"type": "smoothedLine",
"balloonText": "[[title]] of [[year]]:[[value]]",
"bullet": "round",
"id": "AmGraph-1",
"title": "graph 1",
"valueField": "value",
"fillColorsField": "lineColor",
"lineColorField": "lineColor",
"fillAlphas": 0.3,
}],
"dataProvider": this.state.lineItems,
"export": {
"enabled": true
}
}
return (
<div id="amChart" className="amChart">
<AmCharts.React ref='chart' {...config} />
</div>
)
}
}
export default PaybackPeriod;
`
Any advice would be much appreciated. It is essentially a similar issue as above I believe.
from amcharts3-react.
@Gervwyk Did you solve your issue? I am using the same stack Meteor + React (see my comment above) Having the same problems. I believe it has something to do with the way meteor loads its files?
from amcharts3-react.
I asked a friend to help me solve this. So I'm not sure why it works. I copied the export js files into public/libs folder. Which did take away the errors but not sure why and if duplicate copies of the js will be bundled - will need to investigate. For the export component to work I then have these imports:
import 'amcharts3-export';
import 'amcharts3-export/export.css';
import AmCharts from 'amcharts3-react';
And I render the chart with:
render () {
return (
<div id={this.props.tileid} style={{width: '100%', height: this.props.height.toString()+'px'}} >
<AmCharts.React
ref="chartref"
{...this.chart}
dataProvider={this.props.data}
key={`tkam_${this.props.tile._id}`}
/>
</div>
);
where this.chart
is my chart setup obj.
Also include the path in the chart export setup obj:
"export": {
"enabled": true,
"libs": { "path": "/libs/" },
...
}
I also import 'amcharts3/amcharts/gauge.js';
when working with other chart types.
Also I wish amCharts would publish to npm.
from amcharts3-react.
I'm very sorry for the delay.
We've released amcharts3-react
version 2.0, which uses a different system for loading AmCharts.
Rather than using require
, you must instead use <script>
tags in your HTML, like this:
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<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/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
You can find more details here.
After making the necessary changes, the export feature should work correctly.
from amcharts3-react.
Related Issues (20)
- 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
- separate tooltip texts for columns and bullets in AmCharts 3
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.