Include Gage and other charts plus using exporting feature with react and meteor? about amcharts3-react HOT 14 CLOSED

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 installing 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.