amcharts / amcharts3-react Goto Github PK
View Code? Open in Web Editor NEWOfficial amCharts V3 React component
License: Apache License 2.0
amcharts3-react's People
Contributors
Stargazers
Watchers
Forkers
mshibl npmcdn-to-unpkg-bot timurib tooyz ofirk12 gish4409 mobapi wangfengli666 3dsig rahavlussato cemremengu arieldf santhanakumar izumi-kun lipp biomasscontrolspbc megakaka dingchaoyan1983 johnshoe thilinaucsc iy3r aleksandrchukhray surenderboora angelyaaaaa decodedmrq vxb1766 alexisjouanneaux neurosatan mikayelabrahamyan arunlodhi shivangkumar oleksandr-maksymenko-axon dramalcolm bitjelly tsanislavivanov mohamedkdidi trieutuanvnu darkone23 ssilve1989 sameerul97 blegork reactthings szamanr khileshchauhan jessicahamby datalabs-apps-tools-docs-tips eduardoconceic08amcharts3-react's Issues
ReferenceError: window is not defined
Hi guys,
how to fix this please?
Thanks!
/Users/kontra/Sites/spendee-web/src/browser/charts/AmCharts/Amcharts3.js:1
(function (exports, require, module, __filename, __dirname) { (function(){var d;window.AmCharts?d=window.AmCharts:(d={},window.AmCharts=d,d.themes={},d.maps={},d.inheriting={},d.charts=[],d.onReadyArray=[],d.useUTC=!1,d.updateRate=60,d.uid=0,d.lang={},d.translations={},d.mapTranslations={},d.windows={},d.initHandlers=[],d.amString="am",d.pmString="pm");d.Class=function(a){var b=function b(){arguments[0]!==d.inheriting&&(this.events={},this.construct.apply(this,arguments));};a.inherits?(b.prototype=new a.inherits(d.inheriting),b.base=a.inherits.prototype,delete a.inherits):(b.prototype.createEvents=function(){for(var a=0;a<arguments.length;a++){this.events[arguments[a]]=[];}},b.prototype.listenTo=function(a,b,c){this.removeListener(a,b,c);a.events[b].push({handler:c,scope:this});},b.prototype.addListener=function(a,b,c){this.removeListener(this,a,b);a&&this.events[a]&&this.events[a].push({handler:b,scope:c});},b.prototype.removeListen
React 15.5.x
React 15.5.x displays an error when accessing React.createClass:
console.error node_modules/fbjs/lib/warning.js:36
Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
Can not install trough package.json webpack
I'm trying to install amcharts3 through package.json in react application created by
https://github.com/facebookincubator/create-react-app
{ "name": "test2", "version": "0.0.1", "private": true, "devDependencies": { "react-scripts": "0.8.4", "amcharts3": "amcharts/amcharts3", "amcharts3-react": "amcharts/amcharts3-react" }, "dependencies": { "react": "^15.4.1", "react-dom": "^15.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }
After npm install I get error:
npm ERR! git submodule -q update --init --recursive: git: 'submodule' is not a git command. See 'git --help'. npm ERR! git submodule -q update --init --recursive: npm ERR! git submodule -q update --init --recursive: git: 'submodule' is not a git command. See 'git --help'. npm ERR! git submodule -q update --init --recursive: The authenticity of host 'github.com (192.30.253.113)' can't be established. [...]
(my node v6.4.0 and npm v3.10.3)
amcharts3-react.js:253 Uncaught ReferenceError: AmCharts is not defined
I have followed the step-by-step instructions but get:
amcharts3-react.js:253 Uncaught ReferenceError: AmCharts is not defined
at eval (amcharts3-react.js:253)
at eval (amcharts3-react.js:298)
at Object.<anonymous> (vendor.js?version=0.9.9d:2732)
at __webpack_require__ (vendor.js?version=0.9.9d:55)
at eval (index.js:6)
at Object.<anonymous> (vendor.js?version=0.9.9d:2738)
at __webpack_require__ (vendor.js?version=0.9.9d:55)
at eval (stages.jsx:9)
at Object.<anonymous> (loader-main.js?version=0.9.9d:1806)
at __webpack_require__ (vendor.js?version=0.9.9d:55)
Any ideas?
React is not defined.
I'm importing React via npm so when AmCharts.React tries to do React.createClass, it can't find React since its not in the scope of window. Does that mean that unless I import React and ReactDOM via a script tag in window, I can't use this?
amcharts with multiple data set in react compoent
Im using amcharts with react component. My requirement is I want to change amcharts data[multi] set dynamically when select from drop down, chart dataSet is changes but in UI not render with new data. i tried this,
import React, {Component} from "react";
import {withRouter} from "react-router";
import { autobind } from "core-decorators";
import {connect} from "react-redux";
import * as actions from "./ChartReducer";
import css from "./chartComponent.less";
import Chart from "./widgets/Chart";
@connect((store) => {
// Object should contain every store prop that this component needs.
// Example:
// {
// ...store.chartApp.chart
// otherComponentProp: store.otherComponent.propterty
// }
return {
...store.chartApp.chart
};
})
@autobind
class ChartComponent extends Component {
constructor(props) {
super(props);
this.state = {
chartProps: null
};
}
componentWillMount() {
console.log('Component WILL MOUNT!');
let chartProps = this.getChartProps();
this.setState({chartProps: chartProps});
}
getChartProps(){
let propsData=null;
let chartLabel=[];
propsData = {
dataSet: {
"response": [
{"country": "USA", "visits": 3025, "color": "#FF0F00"},
{"country": "China", "visits": 1882, "color": "#FF6600"},
{"country": "Japan", "visits": 1809, "color": "#FF9E01"},
{"country": "Germany", "visits": 1322, "color": "#FCD202"},
{"country": "India", "visits": 984, "color": "#04D215"},
{"country": "Indiaxxx", "visits": 984, "color": "#04D215"}
]
},
chartType: "lineCustom",
xAxisTitle: "Countries",
xAxisField: "country",
yAxisTitle: "# of Visits",
yAxisProps: [{
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}]
}
return propsData;
}
selectDataset(key) {
if(key=="0"){
this.state.chartProps.dataSet={
"response": [
{"country": "India", "visits": 984, "color": "#04D215"}
]
};
}else if(key=="1"){
this.state.chartProps.dataSet={
"response": [
{"country": "USA", "visits": 3025, "color": "#FF0F00"},
{"country": "China", "visits": 1882, "color": "#FF6600"}
]
};
}
console.info("this.state.chartProps",this.state.chartProps);
}
render() {
const baseClass = "col-xs-12 col-centered " + css.chartComponent;
return (
<div class={baseClass}>
<div id="selector">Select a dataset:
<label><input type="radio" value="0" name="dataset" checked="checked" onClick={()=>this.selectDataset('0')}/> Data set #1</label>
<label><input type="radio" value="1" name="dataset" onClick={()=>this.selectDataset('1')}/> Data set #2</label>
</div>
<div class="chartPanel panel">
<Chart {...this.state.chartProps}></Chart>
</div>
</div>
);
}
}
export default withRouter(ChartComponent);Uncaught ReferenceError: AmCharts is not defined, in webpack2 import
I just failed to import AmCharts with guidelines from the tutorial.
Below are my files:
chart.js
import React, {Component, PropTypes} from 'react';
import AmCharts from "@amcharts/amchart3-react";
....
return (<AmCharts.React
{...config} />)package.json
"devDependencies": {
"@amcharts/amcharts3-react": "^2.0.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"webpack": "^2.3.2",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.2",
"webpack-md5-hash": "0.0.5"
},webpack.config.js
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
export default {
devtool: 'cheap-module-eval-source-map',
entry: [
'./src/webpack-public-path',
'webpack-hot-middleware/client?reload=true',
'./src/index'
],
devServer: {
historyApiFallback: true,
noInfo: true,
},
target: 'web',
output: {
path: `${__dirname}/src`,
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
}),
new webpack.LoaderOptionsPlugin({
options: {
context: '/',
postcss: [
autoprefixer({
cascade: false,
browsers: ['Chrome >= 49', 'Firefox >= 49', 'Edge >= 13']
})
],
}
})
],
module: {
rules: [
{
test: /\.js$/, exclude: /node_modules/, use: [{
loader: 'babel-loader',
// options: { presets: ['es2015'] },
}],
},
{
test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: [{
loader: 'file-loader',
}]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/font-woff',
}
}]
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/octet-stream',
}
}]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'image/svg+xml',
}
}]
},
{
test: /\.(jpe?g|png|gif)$/i,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}]
},
{
test: /\.ico$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}]
},
{
test: /(\.css|\.scss)$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader',
}, {
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, "some-folder")
],
sourceMap: true
}
}]
}
]
}
};Animate plugin
When working with React we don't update data manually but pass it through the props.
Is there a way to activate animated updates? like:
chart.animateData(newData, { duration: 1000 });Maybe an animated prop can suit this case?
Settings a Language for AmCharts for React+Webpack
Hi,
Is there anyway to set a language for amCharts for react? i tried .."language": "zh", but it seems not to work, according to the official documentation that all i need. I look inside the node_modules folder and can see node_modules/amcharts3/amcharts/lang/zh.js so I included:
require("amcharts3/amcharts/lang/zh");
And it works, but sure is this correct way to do it?
Thanks
Chart not reflecting changes after validateNow is called
When I change the configuration for chart, it calls validateNow but this is not causing the chart to redraw
https://github.com/amcharts/amcharts3-react/blob/master/amcharts3-react.js#L195
Licensed version?
I'm switching to using react and so going from including amcharts with script tags to installing with npm and requiring/importing. Works pretty smoothly, but now I see "JS chart by amCharts" on all my charts. Is there a way to import the licensed version somehow?
not work the example
i am try to write :
class ofir extends React.Component {
constructor(props) {
super(props);
}
render() {
return (React.createElement(AmCharts, {
"path": "node_modules/amcharts3/amcharts",
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop": true,
"adjustBorderColor": false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable": true
},
"valueScrollbar":{
"oppositeAxis": false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": [{
"date": "2012-07-27",
"value": 13
}, {
"date": "2012-07-28",
"value": 11
}]
})
)
}
}
and in some render i write but nothing happen , what the problem ?
SVG height exceeds containing div
Hi,
I am having two separate issues and a solution for either one would be greatly appreciated.
I am trying to add a chart within a widget using react-grid-layout. Whenever header text is added to my widget, within a div, the rendered AmCharts SVG hangs off the edge of the parent container div. I've tried a bunch of configurations but can't seem to figure out how to fix this. In my most recent attempt I've set the config.height property to "100%" but am still having issues.
My second solution was to call the component within a div, but when doing so the resulting chart does not show up. I have some code pasted below and some screenshots of what I am seeing. Any help would be greatly appreciated. I haven't seen this issue anywhere else on StackOverflow.
var LineGraph = React.createClass({
render: function () {
var config = require("../chart-configs/line-graph.js");
config["dataProvider"] = this.props.dataProvider;
return React.createElement(AmCharts, config);
}
});
The LineGraph component is being used like so:
render: function () {
return (
<ReactGridLayout className="layout" layout={this.state.layout} cols={12} rowHeight={30} onLayoutChange={this.onLayoutChange} draggableHandle='.drag'>
<div key={'a'} data-grid={{draggableHandle: 'drag'}}>
<div className="panel panel-default">
<div className="panel-heading drag">
<h3 className="panel-title">Impressions</h3>
</div>
</div>
<LineGraph dataProvider={this.state.dataProvider}/>
</div>
<div key={"b"} data-grid={{draggableHandle: 'drag'}}>
<div>Header</div>
<LineGraph dataProvider={this.state.dataProvider}/>
</div>
</ReactGridLayout>
)
}
For widget "a"
For widget "b"
Include Gage and other charts plus using exporting feature with react and meteor?
I'm trying to make a Gage chart. But I it seems that AmAngularGauge is not included:
TypeError: d.AmAngularGauge is not a constructor at Object.d.makeChart
How can I include this and other modules?
The event listener for the chart is not working.
I tried add listener to the graph but it won't work, could you please if there anything wrong in my code or issue in the plugin? Thanks
<AmChart
config={config}
listeners={[
{
"event": "clickGraphItem",
"method": (e)=>{console.debug(e,33333333)}
},
{
"event":"dataUpdated",
"method": (e)=>{console.debug(e,444444)}
}
]}
/>
My config is
const config = {
"type": "serial",
"categoryField": "date",
"startDuration": 1,
"autoMarginOffset": 20,
"fontSize": 13,
"colors": [
"#caadfa",
"#afe2f3"
],
"categoryAxis": {
"startOnAxis": true,
"autoWrap": true,
"offset" : 10,
"gridThickness": 0,
"axisThickness": 0
},
"graphs": [
{
"balloonText": "[[date]]:[[value]]",
"fillColors": "#caadfa",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"lineThickness" : 0,
"markerType": "circle",
"title": "Non-Identifiable",
"valueField": "non-Identifiable"
},
{
"balloonText": "[[date]]:[[value]]",
"fillColors": "#afe2f3",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"lineThickness" : 0,
"markerType": "circle",
"title": "Identifiable",
"valueField": "identifiable"
}
],
"valueAxes": [
{
"stackType": "regular",
"gridThickness": 0,
"axisThickness": 0,
"offset": 20
}
],
"legend": {
"autoMargins": false,
"equalWidths": true,
"position": "absolute",
"right": 10,
"top": 0,
"align" : "right",
"valueText": ""
},
"balloon": {},
"chartCursor": {
"enabled": true,
"animationDuration": 0,
"categoryBalloonEnabled": false,
"oneBalloonOnly": true,
"cursorAlpha": 0,
"balloonPointerOrientation": "vertical",
"oneBalloonOnly": true,
"selectWithoutZooming": true,
"fullWidth": false,
"graphBulletSize": 5,
"leaveCursor": false,
"tabIndex": 1,
"zoomable": false
},
"dataProvider": [],
"listeners" : []
};
AmMaps - access to the map object?
I'm struggling to figure out how I can call the validateNow against the map object function. It's straightforward with normal javascript, but in the scope of this react package I'm not finding any examples of how to do this or if it's possible to access the actual chart/map instance.
class Map extends Component {
constructor(props) {
this.state = {
mapstyle: {
width: '100%',
height: '450px'
},
mapConfig: {
type: "map",
theme: "light",
dataProvider: this.continentsDataProvider,
listeners: ...
},
chart: {}
}
}
continentsDataProvider = { ... }
someOtherDataProvider = { ... }
...
render() {
return (
<div className="map" style={this.state.mapstyle}>
<AmCharts.React {...this.state.mapConfig} />
</div>
)
}
}
window not defined error when loading server side
Hi,
I have a React component that loads server-side. In NodeJS, I get an error window not defined. AmCharts is bundled and rendered via webpack.
ReferenceError: window is not defined
at Object. (~/myproject/node_modules/amcharts3-react/index.js:1:1)
Code:
import React, { Component } from 'react'
import AmCharts from 'amcharts3-react' //window not defined error is here
const config = {...}
class MyChart extends Component {
render() { return <AmCharts {...config} />)
}
I am using the following workaround, but I don't think I should have to do this if AmCharts either can allow server-side rendering OR check presence of window.
var AmCharts = {}
if (process.browser) {
AmCharts = require('amcharts3-react')
}
class MyChart extends Component {
if (process.browser) return null;
render() { return <AmCharts {...config} />)
}
Of course a problem with the above approach is, I get the React warning in Browser console:
Warning: React attempted to reuse markup in a container but the checksum was invalid.
Is there anyway AmCharts React can check for this? Thanks!
Calling Method on chart element
Hi.
Is there a way to evoke a method on a chart. Such as:
chart.zoomOut()
I'm struggling to find a handle for the chart object.
To render the chart i use:
<AmCharts ref={chart_${this.props.tileid}} {...this.chart} dataProvider={this.props.data} />
I tried to inspect the element to see if I can access these methods through:
ch = this.refs[chart_${this.props.tileid}]
However in the 'ch' object I can not seem to find any of the methods mentioned in:
https://docs.amcharts.com/3/javascriptcharts/AmSerialChart#zoomOut
How would one reference a element to evoke a method on it?
Make clear this package provides AmMap
As AmMap is a different module and the name suggests it's only for charts.
Gantt Chart Help - "d.AmGanttChart is not a constructor"
Hi,
AmCharts looks great, and I am trying to get a basic Gantt chart up and running in react. I am running into the following error: Uncaught TypeError: d.AmGanttChart is not a constructor.
Any insight you could offer would be greatly appreciated. Following is the relevant code.
// This must be at the top of the file
require("amcharts3-export");
import React, { PropTypes } from 'react'
import Immutable from 'immutable'
// ... project-specific imports ...
var d3 = require('d3')
var AmCharts = require('amcharts3-react');
var ReactFauxDOM = require('react-faux-dom')
var ReactFauxDOM = require('react-faux-dom')
const LSOPanel = React.createClass({
getDefaultProps: function() {
// ... a bunch of default prop vals for main component ...
},
getInitialState: function() {
return {windowWidth: window.innerWidth,
windowHeight: window.innerHeight,
filterSearch: ""};
},
handleResize: function(e) {
this.setState({windowWidth: window.innerWidth,
windowHeight: window.innerHeight});
},
updateSearch: function(e) {
this.setState({filterSearch: this.refs.search.getValue()})
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount: function() {
window.removeEventListener('resize', this.handleResize);
},
// ... a bunch of functioning code which should not effect AmCharts ...
// This should be the relevant code - create basic Gantt chart .jsx style ...
getGanttChart: function () {
var config = {
type: "gantt",
period: "DD",
valueAxis: {"type": "date" },
brightnessStep: 10,
graph: {
"fillAlphas": 1,
"balloonText": "[[open]] - [[value]]"
},
rotate: true,
categoryField: "category",
segmentsField: "segments",
dataDateFormat: "YYYY-MM-DD",
startDateField: "start",
endDateField: "end",
dataProvider: [{
"category": "John",
"segments": [{
"start": "2015-01-02",
"end": "2015-01-03"
}, {
"start": "2015-01-04",
"end": "2015-01-05"
}, {
"start": "2015-01-07",
"end": "2015-01-10"
}]
}, {
"category": "Smith",
"segments": [{
"start": "2015-01-01",
"end": "2015-01-02"
}, {
"start": "2015-01-10",
"end": "2015-01-15"
}]
}, {
"category": "Ben",
"segments": [{
"start": "2015-01-06",
"end": "2015-01-09"
}, {
"start": "2015-01-11",
"end": "2015-01-18"
}, {
"start": "2015-01-22",
"end": "2015-01-21"
}]
}],
chartCursor: {
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueZoomable":true,
"zoomable":false
},
valueScrollbar: {
"position":"top",
"autoGridCount":true,
"color":"#000000"
},
};
return <AmCharts {...config} />;
},
// ... More functioning code which should not eaffect AmCharts
// Rendering logic. This functions and calls getGantt() as expected, has been tested ...
render: function(){
// ... Our rendering logic ...
},
});
LSOPanel.PropTypes = {
// proptypes set here
}
export default LSOPanel
AmMaps - Uncaught TypeError: Cannot read property '0' of undefined
Hi,
I have been building a prototype for a drilldown map (continents -> world -> country) and I have added labels at each stage which is working correctly.
I am now trying to update the maps labels (images) via a button click. The button simply updates the state where the label text is coming from. This is working fine if I click the button on the "Continent" view however if I click on "North America" for example, the map switches to World view and if I now click on the Update Labels button, it causes the following error:
amcharts3-react.js:154 Uncaught TypeError: Cannot read property '0' of undefined
at update (amcharts3-react.js:154)
at updateArray (amcharts3-react.js:121)
at update (amcharts3-react.js:148)
at updateObject (amcharts3-react.js:210)
at update (amcharts3-react.js:154)
at updateObject (amcharts3-react.js:210)
at update (amcharts3-react.js:154)
at updateArray (amcharts3-react.js:121)
at update (amcharts3-react.js:148)
at updateObject (amcharts3-react.js:210)
update @ amcharts3-react.js:154
updateArray @ amcharts3-react.js:121
update @ amcharts3-react.js:148
updateObject @ amcharts3-react.js:210
update @ amcharts3-react.js:154
updateObject @ amcharts3-react.js:210
update @ amcharts3-react.js:154
updateArray @ amcharts3-react.js:121
update @ amcharts3-react.js:148
updateObject @ amcharts3-react.js:210
update @ amcharts3-react.js:154
updateObject @ amcharts3-react.js:210
componentDidUpdate @ amcharts3-react.js:260
measureLifeCyclePerf @ ReactCompositeComponent.js:75
(anonymous) @ ReactCompositeComponent.js:729
notifyAll @ CallbackQueue.js:76
close @ ReactReconcileTransaction.js:80
closeAll @ Transaction.js:206
perform @ Transaction.js:153
perform @ Transaction.js:140
perform @ ReactUpdates.js:89
flushBatchedUpdates @ ReactUpdates.js:172
closeAll @ Transaction.js:206
perform @ Transaction.js:153
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147
Below is the React application so far:
import React from 'react';
import ReactDOM from 'react-dom';
import AmCharts from '@amcharts/amcharts3-react';
import 'ammap3/ammap/ammap.js';
import 'ammap3/ammap/maps/js/continentsLow.js';
import 'ammap3/ammap/maps/js/worldHigh.js';
import 'ammap3/ammap/maps/js/usa2High.js';
import 'ammap3/ammap/maps/js/canadaHigh.js';
import 'ammap3/ammap/maps/js/unitedKingdomHigh.js';
import 'ammap3/ammap/maps/js/switzerlandHigh.js';
import 'ammap3/ammap/maps/js/swedenHigh.js';
import 'ammap3/ammap/maps/js/spainHigh.js';
import 'ammap3/ammap/maps/js/singaporeHigh.js';
import 'ammap3/ammap/maps/js/norwayHigh.js';
import 'ammap3/ammap/maps/js/netherlandsHigh.js';
import 'ammap3/ammap/maps/js/newZealandHigh.js';
import 'ammap3/ammap/maps/js/luxembourgHigh.js';
import 'ammap3/ammap/maps/js/japanHigh.js';
import 'ammap3/ammap/maps/js/italyHigh.js';
import 'ammap3/ammap/maps/js/irelandHigh.js';
import 'ammap3/ammap/maps/js/hungaryHigh.js';
import 'ammap3/ammap/maps/js/germanyHigh.js';
import 'ammap3/ammap/maps/js/franceHigh.js';
import 'ammap3/ammap/maps/js/finlandHigh.js';
import 'ammap3/ammap/maps/js/denmarkHigh.js';
import 'ammap3/ammap/maps/js/czechRepublicHigh.js';
import 'ammap3/ammap/maps/js/chinaHigh.js';
import 'ammap3/ammap/maps/js/canadaHigh.js';
import 'ammap3/ammap/maps/js/belgiumHigh.js';
import 'ammap3/ammap/maps/js/austriaHigh.js';
import 'ammap3/ammap/maps/js/australiaHigh.js';
import 'ammap3/ammap/maps/js/southAfricaHigh.js';
import 'ammap3/ammap/maps/js/southKoreaHigh.js';
import 'ammap3/ammap/maps/js/chileHigh.js';
export default class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
mapstyle: {
width: '100%',
height: '500px'
},
counts: {
continents: {
europe: 100,
north_america: 400
},
countries: {
US: 350,
CA: 50
}
},
defaultProvider: {},
mapconfig: {
type: "map",
theme: "light",
areasSettings: {
autoZoom: true,
rollOverOutlineColor: "#9a7bca",
selectedColor: "#9a7bca",
color: "#a791b4",
rollOverColor: "#9a7bca"
},
dataProvider: {
"map": "continentsLow",
},
listeners: [
{
event: "clickMapObject",
method: this.onMapClick
},
{
event: "dataUpdated",
method: this.onDataUpdated
}
]
},
maps: [
{country:'US', map:'usa2High'},
{country:'GB', map:'unitedKingdomHigh'},
{country:'CH', map:'switzerlandHigh'},
{country:'SE', map:'swedenHigh'},
{country:'ES', map:'spainHigh'},
{country:'SG', map:'singaporeHigh'},
{country:'NO', map:'norwayHigh'},
{country:'NL', map:'netherlandsHigh'},
{country:'NZ', map:'newZealandHigh'},
{country:'LU', map:'luxembourgHigh'},
{country:'JP', map:'japanHigh'},
{country:'IL', map:'isrealHigh'},
{country:'IT', map:'italyHigh'},
{country:'IE', map:'irelandHigh'},
{country:'HU', map:'hungaryHigh'},
{country:'DE', map:'germanyHigh'},
{country:'FR', map:'franceHigh'},
{country:'FI', map:'finlandHigh'},
{country:'DK', map:'denmarkHigh'},
{country:'CZ', map:'czechRepublicHigh'},
{country:'CN', map:'chinaHigh'},
{country:'CA', map:'canadaHigh'},
{country:'BE', map:'belgiumHigh'},
{country:'AT', map:'austriaHigh'},
{country:'AU', map:'australiaHigh'},
{country:'ZA', map:'southAfricaHigh'},
{country:'KR', map:'southKoreaHigh'},
{country:'CL', map:'chileHigh'}
]
};
this.renderMap = this.renderMap.bind(this);
this.onDataUpdated = this.onDataUpdated.bind(this);
this.onMapClick = this.onMapClick.bind(this);
this.getLatLong = this.getLatLong.bind(this);
this.changeLabel = this.changeLabel.bind(this);
}
changeLabel(event) {
console.log("Changing Labels");
//var mapConfig = this.state.mapconfig;
//var defaultProvider = this.state.defaultProvider;
//mapConfig.dataProvider = defaultProvider;
this.setState({
counts: {
continents: {
europe: 10,
north_america: 100
},
countries: {
US: 50,
CA: 4
}
}
}, function() {
this.renderMap();
});
}
onDataUpdated(event) {
console.log("Data Updated!");
console.log(event);
}
onMapClick(event) {
//console.log(event);
}
getLatLong(area) {
var latlong = {};
latlong["AD"] = {"latitude":42.5, "longitude":1.5};
latlong["AE"] = {"latitude":24, "longitude":54};
latlong["AF"] = {"latitude":33, "longitude":65};
latlong["AG"] = {"latitude":17.05, "longitude":-61.8};
latlong["AI"] = {"latitude":18.25, "longitude":-63.1667};
latlong["AL"] = {"latitude":41, "longitude":20};
latlong["AM"] = {"latitude":40, "longitude":45};
latlong["AN"] = {"latitude":12.25, "longitude":-68.75};
latlong["AO"] = {"latitude":-12.5, "longitude":18.5};
latlong["AP"] = {"latitude":35, "longitude":105};
latlong["AQ"] = {"latitude":-90, "longitude":0};
latlong["AR"] = {"latitude":-34, "longitude":-64};
latlong["AS"] = {"latitude":-14.3333, "longitude":-170};
latlong["AT"] = {"latitude":47.3333, "longitude":13.3333};
latlong["AU"] = {"latitude":-27, "longitude":133};
latlong["AW"] = {"latitude":12.5, "longitude":-69.9667};
latlong["AZ"] = {"latitude":40.5, "longitude":47.5};
latlong["BA"] = {"latitude":44, "longitude":18};
latlong["BB"] = {"latitude":13.1667, "longitude":-59.5333};
latlong["BD"] = {"latitude":24, "longitude":90};
latlong["BE"] = {"latitude":50.8333, "longitude":4};
latlong["BF"] = {"latitude":13, "longitude":-2};
latlong["BG"] = {"latitude":43, "longitude":25};
latlong["BH"] = {"latitude":26, "longitude":50.55};
latlong["BI"] = {"latitude":-3.5, "longitude":30};
latlong["BJ"] = {"latitude":9.5, "longitude":2.25};
latlong["BM"] = {"latitude":32.3333, "longitude":-64.75};
latlong["BN"] = {"latitude":4.5, "longitude":114.6667};
latlong["BO"] = {"latitude":-17, "longitude":-65};
latlong["BR"] = {"latitude":-10, "longitude":-55};
latlong["BS"] = {"latitude":24.25, "longitude":-76};
latlong["BT"] = {"latitude":27.5, "longitude":90.5};
latlong["BV"] = {"latitude":-54.4333, "longitude":3.4};
latlong["BW"] = {"latitude":-22, "longitude":24};
latlong["BY"] = {"latitude":53, "longitude":28};
latlong["BZ"] = {"latitude":17.25, "longitude":-88.75};
latlong["CA"] = {"latitude":54, "longitude":-100};
latlong["CC"] = {"latitude":-12.5, "longitude":96.8333};
latlong["CD"] = {"latitude":0, "longitude":25};
latlong["CF"] = {"latitude":7, "longitude":21};
latlong["CG"] = {"latitude":-1, "longitude":15};
latlong["CH"] = {"latitude":47, "longitude":8};
latlong["CI"] = {"latitude":8, "longitude":-5};
latlong["CK"] = {"latitude":-21.2333, "longitude":-159.7667};
latlong["CL"] = {"latitude":-30, "longitude":-71};
latlong["CM"] = {"latitude":6, "longitude":12};
latlong["CN"] = {"latitude":35, "longitude":105};
latlong["CO"] = {"latitude":4, "longitude":-72};
latlong["CR"] = {"latitude":10, "longitude":-84};
latlong["CU"] = {"latitude":21.5, "longitude":-80};
latlong["CV"] = {"latitude":16, "longitude":-24};
latlong["CX"] = {"latitude":-10.5, "longitude":105.6667};
latlong["CY"] = {"latitude":35, "longitude":33};
latlong["CZ"] = {"latitude":49.75, "longitude":15.5};
latlong["DE"] = {"latitude":51, "longitude":9};
latlong["DJ"] = {"latitude":11.5, "longitude":43};
latlong["DK"] = {"latitude":56, "longitude":10};
latlong["DM"] = {"latitude":15.4167, "longitude":-61.3333};
latlong["DO"] = {"latitude":19, "longitude":-70.6667};
latlong["DZ"] = {"latitude":28, "longitude":3};
latlong["EC"] = {"latitude":-2, "longitude":-77.5};
latlong["EE"] = {"latitude":59, "longitude":26};
latlong["EG"] = {"latitude":27, "longitude":30};
latlong["EH"] = {"latitude":24.5, "longitude":-13};
latlong["ER"] = {"latitude":15, "longitude":39};
latlong["ES"] = {"latitude":40, "longitude":-4};
latlong["ET"] = {"latitude":8, "longitude":38};
latlong["EU"] = {"latitude":47, "longitude":8};
latlong["FI"] = {"latitude":62, "longitude":26};
latlong["FJ"] = {"latitude":-18, "longitude":175};
latlong["FK"] = {"latitude":-51.75, "longitude":-59};
latlong["FM"] = {"latitude":6.9167, "longitude":158.25};
latlong["FO"] = {"latitude":62, "longitude":-7};
latlong["FR"] = {"latitude":46, "longitude":2};
latlong["GA"] = {"latitude":-1, "longitude":11.75};
latlong["GB"] = {"latitude":54, "longitude":-2};
latlong["GD"] = {"latitude":12.1167, "longitude":-61.6667};
latlong["GE"] = {"latitude":42, "longitude":43.5};
latlong["GF"] = {"latitude":4, "longitude":-53};
latlong["GH"] = {"latitude":8, "longitude":-2};
latlong["GI"] = {"latitude":36.1833, "longitude":-5.3667};
latlong["GL"] = {"latitude":72, "longitude":-40};
latlong["GM"] = {"latitude":13.4667, "longitude":-16.5667};
latlong["GN"] = {"latitude":11, "longitude":-10};
latlong["GP"] = {"latitude":16.25, "longitude":-61.5833};
latlong["GQ"] = {"latitude":2, "longitude":10};
latlong["GR"] = {"latitude":39, "longitude":22};
latlong["GS"] = {"latitude":-54.5, "longitude":-37};
latlong["GT"] = {"latitude":15.5, "longitude":-90.25};
latlong["GU"] = {"latitude":13.4667, "longitude":144.7833};
latlong["GW"] = {"latitude":12, "longitude":-15};
latlong["GY"] = {"latitude":5, "longitude":-59};
latlong["HK"] = {"latitude":22.25, "longitude":114.1667};
latlong["HM"] = {"latitude":-53.1, "longitude":72.5167};
latlong["HN"] = {"latitude":15, "longitude":-86.5};
latlong["HR"] = {"latitude":45.1667, "longitude":15.5};
latlong["HT"] = {"latitude":19, "longitude":-72.4167};
latlong["HU"] = {"latitude":47, "longitude":20};
latlong["ID"] = {"latitude":-5, "longitude":120};
latlong["IE"] = {"latitude":53, "longitude":-8};
latlong["IL"] = {"latitude":31.5, "longitude":34.75};
latlong["IN"] = {"latitude":20, "longitude":77};
latlong["IO"] = {"latitude":-6, "longitude":71.5};
latlong["IQ"] = {"latitude":33, "longitude":44};
latlong["IR"] = {"latitude":32, "longitude":53};
latlong["IS"] = {"latitude":65, "longitude":-18};
latlong["IT"] = {"latitude":42.8333, "longitude":12.8333};
latlong["JM"] = {"latitude":18.25, "longitude":-77.5};
latlong["JO"] = {"latitude":31, "longitude":36};
latlong["JP"] = {"latitude":36, "longitude":138};
latlong["KE"] = {"latitude":1, "longitude":38};
latlong["KG"] = {"latitude":41, "longitude":75};
latlong["KH"] = {"latitude":13, "longitude":105};
latlong["KI"] = {"latitude":1.4167, "longitude":173};
latlong["KM"] = {"latitude":-12.1667, "longitude":44.25};
latlong["KN"] = {"latitude":17.3333, "longitude":-62.75};
latlong["KP"] = {"latitude":40, "longitude":127};
latlong["KR"] = {"latitude":37, "longitude":127.5};
latlong["KW"] = {"latitude":29.3375, "longitude":47.6581};
latlong["KY"] = {"latitude":19.5, "longitude":-80.5};
latlong["KZ"] = {"latitude":48, "longitude":68};
latlong["LA"] = {"latitude":18, "longitude":105};
latlong["LB"] = {"latitude":33.8333, "longitude":35.8333};
latlong["LC"] = {"latitude":13.8833, "longitude":-61.1333};
latlong["LI"] = {"latitude":47.1667, "longitude":9.5333};
latlong["LK"] = {"latitude":7, "longitude":81};
latlong["LR"] = {"latitude":6.5, "longitude":-9.5};
latlong["LS"] = {"latitude":-29.5, "longitude":28.5};
latlong["LT"] = {"latitude":55, "longitude":24};
latlong["LU"] = {"latitude":49.75, "longitude":6};
latlong["LV"] = {"latitude":57, "longitude":25};
latlong["LY"] = {"latitude":25, "longitude":17};
latlong["MA"] = {"latitude":32, "longitude":-5};
latlong["MC"] = {"latitude":43.7333, "longitude":7.4};
latlong["MD"] = {"latitude":47, "longitude":29};
latlong["ME"] = {"latitude":42.5, "longitude":19.4};
latlong["MG"] = {"latitude":-20, "longitude":47};
latlong["MH"] = {"latitude":9, "longitude":168};
latlong["MK"] = {"latitude":41.8333, "longitude":22};
latlong["ML"] = {"latitude":17, "longitude":-4};
latlong["MM"] = {"latitude":22, "longitude":98};
latlong["MN"] = {"latitude":46, "longitude":105};
latlong["MO"] = {"latitude":22.1667, "longitude":113.55};
latlong["MP"] = {"latitude":15.2, "longitude":145.75};
latlong["MQ"] = {"latitude":14.6667, "longitude":-61};
latlong["MR"] = {"latitude":20, "longitude":-12};
latlong["MS"] = {"latitude":16.75, "longitude":-62.2};
latlong["MT"] = {"latitude":35.8333, "longitude":14.5833};
latlong["MU"] = {"latitude":-20.2833, "longitude":57.55};
latlong["MV"] = {"latitude":3.25, "longitude":73};
latlong["MW"] = {"latitude":-13.5, "longitude":34};
latlong["MX"] = {"latitude":23, "longitude":-102};
latlong["MY"] = {"latitude":2.5, "longitude":112.5};
latlong["MZ"] = {"latitude":-18.25, "longitude":35};
latlong["NA"] = {"latitude":-22, "longitude":17};
latlong["NC"] = {"latitude":-21.5, "longitude":165.5};
latlong["NE"] = {"latitude":16, "longitude":8};
latlong["NF"] = {"latitude":-29.0333, "longitude":167.95};
latlong["NG"] = {"latitude":10, "longitude":8};
latlong["NI"] = {"latitude":13, "longitude":-85};
latlong["NL"] = {"latitude":52.5, "longitude":5.75};
latlong["NO"] = {"latitude":62, "longitude":10};
latlong["NP"] = {"latitude":28, "longitude":84};
latlong["NR"] = {"latitude":-0.5333, "longitude":166.9167};
latlong["NU"] = {"latitude":-19.0333, "longitude":-169.8667};
latlong["NZ"] = {"latitude":-41, "longitude":174};
latlong["OM"] = {"latitude":21, "longitude":57};
latlong["PA"] = {"latitude":9, "longitude":-80};
latlong["PE"] = {"latitude":-10, "longitude":-76};
latlong["PF"] = {"latitude":-15, "longitude":-140};
latlong["PG"] = {"latitude":-6, "longitude":147};
latlong["PH"] = {"latitude":13, "longitude":122};
latlong["PK"] = {"latitude":30, "longitude":70};
latlong["PL"] = {"latitude":52, "longitude":20};
latlong["PM"] = {"latitude":46.8333, "longitude":-56.3333};
latlong["PR"] = {"latitude":18.25, "longitude":-66.5};
latlong["PS"] = {"latitude":32, "longitude":35.25};
latlong["PT"] = {"latitude":39.5, "longitude":-8};
latlong["PW"] = {"latitude":7.5, "longitude":134.5};
latlong["PY"] = {"latitude":-23, "longitude":-58};
latlong["QA"] = {"latitude":25.5, "longitude":51.25};
latlong["RE"] = {"latitude":-21.1, "longitude":55.6};
latlong["RO"] = {"latitude":46, "longitude":25};
latlong["RS"] = {"latitude":44, "longitude":21};
latlong["RU"] = {"latitude":60, "longitude":100};
latlong["RW"] = {"latitude":-2, "longitude":30};
latlong["SA"] = {"latitude":25, "longitude":45};
latlong["SB"] = {"latitude":-8, "longitude":159};
latlong["SC"] = {"latitude":-4.5833, "longitude":55.6667};
latlong["SD"] = {"latitude":15, "longitude":30};
latlong["SE"] = {"latitude":62, "longitude":15};
latlong["SG"] = {"latitude":1.3667, "longitude":103.8};
latlong["SH"] = {"latitude":-15.9333, "longitude":-5.7};
latlong["SI"] = {"latitude":46, "longitude":15};
latlong["SJ"] = {"latitude":78, "longitude":20};
latlong["SK"] = {"latitude":48.6667, "longitude":19.5};
latlong["SL"] = {"latitude":8.5, "longitude":-11.5};
latlong["SM"] = {"latitude":43.7667, "longitude":12.4167};
latlong["SN"] = {"latitude":14, "longitude":-14};
latlong["SO"] = {"latitude":10, "longitude":49};
latlong["SR"] = {"latitude":4, "longitude":-56};
latlong["ST"] = {"latitude":1, "longitude":7};
latlong["SV"] = {"latitude":13.8333, "longitude":-88.9167};
latlong["SY"] = {"latitude":35, "longitude":38};
latlong["SZ"] = {"latitude":-26.5, "longitude":31.5};
latlong["TC"] = {"latitude":21.75, "longitude":-71.5833};
latlong["TD"] = {"latitude":15, "longitude":19};
latlong["TF"] = {"latitude":-43, "longitude":67};
latlong["TG"] = {"latitude":8, "longitude":1.1667};
latlong["TH"] = {"latitude":15, "longitude":100};
latlong["TJ"] = {"latitude":39, "longitude":71};
latlong["TK"] = {"latitude":-9, "longitude":-172};
latlong["TM"] = {"latitude":40, "longitude":60};
latlong["TN"] = {"latitude":34, "longitude":9};
latlong["TO"] = {"latitude":-20, "longitude":-175};
latlong["TR"] = {"latitude":39, "longitude":35};
latlong["TT"] = {"latitude":11, "longitude":-61};
latlong["TV"] = {"latitude":-8, "longitude":178};
latlong["TW"] = {"latitude":23.5, "longitude":121};
latlong["TZ"] = {"latitude":-6, "longitude":35};
latlong["UA"] = {"latitude":49, "longitude":32};
latlong["UG"] = {"latitude":1, "longitude":32};
latlong["UM"] = {"latitude":19.2833, "longitude":166.6};
latlong["US"] = {"latitude":38, "longitude":-97};
latlong["UY"] = {"latitude":-33, "longitude":-56};
latlong["UZ"] = {"latitude":41, "longitude":64};
latlong["VA"] = {"latitude":41.9, "longitude":12.45};
latlong["VC"] = {"latitude":13.25, "longitude":-61.2};
latlong["VE"] = {"latitude":8, "longitude":-66};
latlong["VG"] = {"latitude":18.5, "longitude":-64.5};
latlong["VI"] = {"latitude":18.3333, "longitude":-64.8333};
latlong["VN"] = {"latitude":16, "longitude":106};
latlong["VU"] = {"latitude":-16, "longitude":167};
latlong["WF"] = {"latitude":-13.3, "longitude":-176.2};
latlong["WS"] = {"latitude":-13.5833, "longitude":-172.3333};
latlong["YE"] = {"latitude":15, "longitude":48};
latlong["YT"] = {"latitude":-12.8333, "longitude":45.1667};
latlong["ZA"] = {"latitude":-29, "longitude":24};
latlong["ZM"] = {"latitude":-15, "longitude":30};
latlong["ZW"] = {"latitude":-20, "longitude":30};
return latlong[area];
}
renderMap() {
// Icons
var icon = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";
var backIconSVG = "M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466zM27.436,17.39c0.001,0.002,0.004,0.002,0.005,0.004c-0.022,0.187-0.054,0.37-0.085,0.554c-0.015-0.012-0.034-0.025-0.047-0.036c-0.103-0.09-0.254-0.128-0.318-0.115c-0.157,0.032,0.229,0.305,0.267,0.342c0.009,0.009,0.031,0.03,0.062,0.058c-1.029,5.312-5.709,9.338-11.319,9.338c-4.123,0-7.736-2.18-9.776-5.441c0.123-0.016,0.24-0.016,0.28-0.076c0.051-0.077,0.102-0.241,0.178-0.331c0.077-0.089,0.165-0.229,0.127-0.292c-0.039-0.064,0.101-0.344,0.088-0.419c-0.013-0.076-0.127-0.256,0.064-0.407s0.394-0.382,0.407-0.444c0.012-0.063,0.166-0.331,0.152-0.458c-0.012-0.127-0.152-0.28-0.24-0.318c-0.09-0.037-0.28-0.05-0.356-0.151c-0.077-0.103-0.292-0.203-0.368-0.178c-0.076,0.025-0.204,0.05-0.305-0.015c-0.102-0.062-0.267-0.139-0.33-0.189c-0.065-0.05-0.229-0.088-0.305-0.088c-0.077,0-0.065-0.052-0.178,0.101c-0.114,0.153,0,0.204-0.204,0.177c-0.204-0.023,0.025-0.036,0.141-0.189c0.113-0.152-0.013-0.242-0.141-0.203c-0.126,0.038-0.038,0.115-0.241,0.153c-0.203,0.036-0.203-0.09-0.076-0.115s0.355-0.139,0.355-0.19c0-0.051-0.025-0.191-0.127-0.191s-0.077-0.126-0.229-0.291c-0.092-0.101-0.196-0.164-0.299-0.204c-0.09-0.579-0.15-1.167-0.15-1.771c0-2.844,1.039-5.446,2.751-7.458c0.024-0.02,0.048-0.034,0.069-0.036c0.084-0.009,0.31-0.025,0.51-0.059c0.202-0.034,0.418-0.161,0.489-0.153c0.069,0.008,0.241,0.008,0.186-0.042C8.417,8.2,8.339,8.082,8.223,8.082S8.215,7.896,8.246,7.896c0.03,0,0.186,0.025,0.178,0.11C8.417,8.091,8.471,8.2,8.625,8.167c0.156-0.034,0.132-0.162,0.102-0.195C8.695,7.938,8.672,7.853,8.642,7.794c-0.031-0.06-0.023-0.136,0.14-0.153C8.944,7.625,9.168,7.708,9.16,7.573s0-0.28,0.046-0.356C9.253,7.142,9.354,7.09,9.299,7.065C9.246,7.04,9.176,7.099,9.121,6.972c-0.054-0.127,0.047-0.22,0.108-0.271c0.02-0.015,0.067-0.06,0.124-0.112C11.234,5.257,13.524,4.466,16,4.466c3.213,0,6.122,1.323,8.214,3.45c-0.008,0.022-0.01,0.052-0.031,0.056c-0.077,0.013-0.166,0.063-0.179-0.051c-0.013-0.114-0.013-0.331-0.102-0.203c-0.089,0.127-0.127,0.127-0.127,0.191c0,0.063,0.076,0.127,0.051,0.241C23.8,8.264,23.8,8.341,23.84,8.341c0.036,0,0.126-0.115,0.239-0.141c0.116-0.025,0.319-0.088,0.332,0.026c0.013,0.115,0.139,0.152,0.013,0.203c-0.128,0.051-0.267,0.026-0.293-0.051c-0.025-0.077-0.114-0.077-0.203-0.013c-0.088,0.063-0.279,0.292-0.279,0.292s-0.306,0.139-0.343,0.114c-0.04-0.025,0.101-0.165,0.203-0.228c0.102-0.064,0.178-0.204,0.14-0.242c-0.038-0.038-0.088-0.279-0.063-0.343c0.025-0.063,0.139-0.152,0.013-0.216c-0.127-0.063-0.217-0.14-0.318-0.178s-0.216,0.152-0.305,0.204c-0.089,0.051-0.076,0.114-0.191,0.127c-0.114,0.013-0.189,0.165,0,0.254c0.191,0.089,0.255,0.152,0.204,0.204c-0.051,0.051-0.267-0.025-0.267-0.025s-0.165-0.076-0.268-0.076c-0.101,0-0.229-0.063-0.33-0.076c-0.102-0.013-0.306-0.013-0.355,0.038c-0.051,0.051-0.179,0.203-0.28,0.152c-0.101-0.051-0.101-0.102-0.241-0.051c-0.14,0.051-0.279-0.038-0.355,0.038c-0.077,0.076-0.013,0.076-0.255,0c-0.241-0.076-0.189,0.051-0.419,0.089s-0.368-0.038-0.432,0.038c-0.064,0.077-0.153,0.217-0.19,0.127c-0.038-0.088,0.126-0.241,0.062-0.292c-0.062-0.051-0.33-0.025-0.367,0.013c-0.039,0.038-0.014,0.178,0.011,0.229c0.026,0.05,0.064,0.254-0.011,0.216c-0.077-0.038-0.064-0.166-0.141-0.152c-0.076,0.013-0.165,0.051-0.203,0.077c-0.038,0.025-0.191,0.025-0.229,0.076c-0.037,0.051,0.014,0.191-0.051,0.203c-0.063,0.013-0.114,0.064-0.254-0.025c-0.14-0.089-0.14-0.038-0.178-0.012c-0.038,0.025-0.216,0.127-0.229,0.012c-0.013-0.114,0.025-0.152-0.089-0.229c-0.115-0.076-0.026-0.076,0.127-0.025c0.152,0.05,0.343,0.075,0.622-0.013c0.28-0.089,0.395-0.127,0.28-0.178c-0.115-0.05-0.229-0.101-0.406-0.127c-0.179-0.025-0.42-0.025-0.7-0.127c-0.279-0.102-0.343-0.14-0.457-0.165c-0.115-0.026-0.813-0.14-1.132-0.089c-0.317,0.051-1.193,0.28-1.245,0.318s-0.128,0.19-0.292,0.318c-0.165,0.127-0.47,0.419-0.712,0.47c-0.241,0.051-0.521,0.254-0.521,0.305c0,0.051,0.101,0.242,0.076,0.28c-0.025,0.038,0.05,0.229,0.191,0.28c0.139,0.05,0.381,0.038,0.393-0.039c0.014-0.076,0.204-0.241,0.217-0.127c0.013,0.115,0.14,0.292,0.114,0.368c-0.025,0.077,0,0.153,0.09,0.14c0.088-0.012,0.559-0.114,0.559-0.114s0.153-0.064,0.127-0.166c-0.026-0.101,0.166-0.241,0.203-0.279c0.038-0.038,0.178-0.191,0.014-0.241c-0.167-0.051-0.293-0.064-0.115-0.216s0.292,0,0.521-0.229c0.229-0.229-0.051-0.292,0.191-0.305c0.241-0.013,0.496-0.025,0.444,0.051c-0.05,0.076-0.342,0.242-0.508,0.318c-0.166,0.077-0.14,0.216-0.076,0.292c0.063,0.076,0.09,0.254,0.204,0.229c0.113-0.025,0.254-0.114,0.38-0.101c0.128,0.012,0.383-0.013,0.42-0.013c0.039,0,0.216,0.178,0.114,0.203c-0.101,0.025-0.229,0.013-0.445,0.025c-0.215,0.013-0.456,0.013-0.456,0.051c0,0.039,0.292,0.127,0.19,0.191c-0.102,0.063-0.203-0.013-0.331-0.026c-0.127-0.012-0.203,0.166-0.241,0.267c-0.039,0.102,0.063,0.28-0.127,0.216c-0.191-0.063-0.331-0.063-0.381-0.038c-0.051,0.025-0.203,0.076-0.331,0.114c-0.126,0.038-0.076-0.063-0.242-0.063c-0.164,0-0.164,0-0.164,0l-0.103,0.013c0,0-0.101-0.063-0.114-0.165c-0.013-0.102,0.05-0.216-0.013-0.241c-0.064-0.026-0.292,0.012-0.33,0.088c-0.038,0.076-0.077,0.216-0.026,0.28c0.052,0.063,0.204,0.19,0.064,0.152c-0.14-0.038-0.317-0.051-0.419,0.026c-0.101,0.076-0.279,0.241-0.279,0.241s-0.318,0.025-0.318,0.102c0,0.077,0,0.178-0.114,0.191c-0.115,0.013-0.268,0.05-0.42,0.076c-0.153,0.025-0.139,0.088-0.317,0.102s-0.204,0.089-0.038,0.114c0.165,0.025,0.418,0.127,0.431,0.241c0.014,0.114-0.013,0.242-0.076,0.356c-0.043,0.079-0.305,0.026-0.458,0.026c-0.152,0-0.456-0.051-0.584,0c-0.127,0.051-0.102,0.305-0.064,0.419c0.039,0.114-0.012,0.178-0.063,0.216c-0.051,0.038-0.065,0.152,0,0.204c0.063,0.051,0.114,0.165,0.166,0.178c0.051,0.013,0.215-0.038,0.279,0.025c0.064,0.064,0.127,0.216,0.165,0.178c0.039-0.038,0.089-0.203,0.153-0.166c0.064,0.039,0.216-0.012,0.331-0.025s0.177-0.14,0.292-0.204c0.114-0.063,0.05-0.063,0.013-0.14c-0.038-0.076,0.114-0.165,0.204-0.254c0.088-0.089,0.253-0.013,0.292-0.115c0.038-0.102,0.051-0.279,0.151-0.267c0.103,0.013,0.243,0.076,0.331,0.076c0.089,0,0.279-0.14,0.332-0.165c0.05-0.025,0.241-0.013,0.267,0.102c0.025,0.114,0.241,0.254,0.292,0.279c0.051,0.025,0.381,0.127,0.433,0.165c0.05,0.038,0.126,0.153,0.152,0.254c0.025,0.102,0.114,0.102,0.128,0.013c0.012-0.089-0.065-0.254,0.025-0.242c0.088,0.013,0.191-0.026,0.191-0.026s-0.243-0.165-0.331-0.203c-0.088-0.038-0.255-0.114-0.331-0.241c-0.076-0.127-0.267-0.153-0.254-0.279c0.013-0.127,0.191-0.051,0.292,0.051c0.102,0.102,0.356,0.241,0.445,0.33c0.088,0.089,0.229,0.127,0.267,0.242c0.039,0.114,0.152,0.241,0.19,0.292c0.038,0.051,0.165,0.331,0.204,0.394c0.038,0.063,0.165-0.012,0.229-0.063c0.063-0.051,0.179-0.076,0.191-0.178c0.013-0.102-0.153-0.178-0.203-0.216c-0.051-0.038,0.127-0.076,0.191-0.127c0.063-0.05,0.177-0.14,0.228-0.063c0.051,0.077,0.026,0.381,0.051,0.432c0.025,0.051,0.279,0.127,0.331,0.191c0.05,0.063,0.267,0.089,0.304,0.051c0.039-0.038,0.242,0.026,0.294,0.038c0.049,0.013,0.202-0.025,0.304-0.05c0.103-0.025,0.204-0.102,0.191,0.063c-0.013,0.165-0.051,0.419-0.179,0.546c-0.127,0.127-0.076,0.191-0.202,0.191c-0.06,0-0.113,0-0.156,0.021c-0.041-0.065-0.098-0.117-0.175-0.097c-0.152,0.038-0.344,0.038-0.47,0.19c-0.128,0.153-0.178,0.165-0.204,0.114c-0.025-0.051,0.369-0.267,0.317-0.331c-0.05-0.063-0.355-0.038-0.521-0.038c-0.166,0-0.305-0.102-0.433-0.127c-0.126-0.025-0.292,0.127-0.418,0.254c-0.128,0.127-0.216,0.038-0.331,0.038c-0.115,0-0.331-0.165-0.331-0.165s-0.216-0.089-0.305-0.089c-0.088,0-0.267-0.165-0.318-0.165c-0.05,0-0.19-0.115-0.088-0.166c0.101-0.05,0.202,0.051,0.101-0.229c-0.101-0.279-0.33-0.216-0.419-0.178c-0.088,0.039-0.724,0.025-0.775,0.025c-0.051,0-0.419,0.127-0.533,0.178c-0.116,0.051-0.318,0.115-0.369,0.14c-0.051,0.025-0.318-0.051-0.433,0.013c-0.151,0.084-0.291,0.216-0.33,0.216c-0.038,0-0.153,0.089-0.229,0.28c-0.077,0.19,0.013,0.355-0.128,0.419c-0.139,0.063-0.394,0.204-0.495,0.305c-0.102,0.101-0.229,0.458-0.355,0.623c-0.127,0.165,0,0.317,0.025,0.419c0.025,0.101,0.114,0.292-0.025,0.471c-0.14,0.178-0.127,0.266-0.191,0.279c-0.063,0.013,0.063,0.063,0.088,0.19c0.025,0.128-0.114,0.255,0.128,0.369c0.241,0.113,0.355,0.217,0.418,0.367c0.064,0.153,0.382,0.407,0.382,0.407s0.229,0.205,0.344,0.293c0.114,0.089,0.152,0.038,0.177-0.05c0.025-0.09,0.178-0.104,0.355-0.104c0.178,0,0.305,0.04,0.483,0.014c0.178-0.025,0.356-0.141,0.42-0.166c0.063-0.025,0.279-0.164,0.443-0.063c0.166,0.103,0.141,0.241,0.23,0.332c0.088,0.088,0.24,0.037,0.355-0.051c0.114-0.09,0.064-0.052,0.203,0.025c0.14,0.075,0.204,0.151,0.077,0.267c-0.128,0.113-0.051,0.293-0.128,0.47c-0.076,0.178-0.063,0.203,0.077,0.278c0.14,0.076,0.394,0.548,0.47,0.638c0.077,0.088-0.025,0.342,0.064,0.495c0.089,0.151,0.178,0.254,0.077,0.331c-0.103,0.075-0.28,0.216-0.292,0.47s0.051,0.431,0.102,0.521s0.177,0.331,0.241,0.419c0.064,0.089,0.14,0.305,0.152,0.445c0.013,0.14-0.024,0.306,0.039,0.381c0.064,0.076,0.102,0.191,0.216,0.292c0.115,0.103,0.152,0.318,0.152,0.318s0.039,0.089,0.051,0.229c0.012,0.14,0.025,0.228,0.152,0.292c0.126,0.063,0.215,0.076,0.28,0.013c0.063-0.063,0.381-0.077,0.546-0.063c0.165,0.013,0.355-0.075,0.521-0.19s0.407-0.419,0.496-0.508c0.089-0.09,0.292-0.255,0.268-0.356c-0.025-0.101-0.077-0.203,0.024-0.254c0.102-0.052,0.344-0.152,0.356-0.229c0.013-0.077-0.09-0.395-0.115-0.457c-0.024-0.064,0.064-0.18,0.165-0.306c0.103-0.128,0.421-0.216,0.471-0.267c0.051-0.053,0.191-0.267,0.217-0.433c0.024-0.167-0.051-0.369,0-0.457c0.05-0.09,0.013-0.165-0.103-0.268c-0.114-0.102-0.089-0.407-0.127-0.457c-0.037-0.051-0.013-0.319,0.063-0.345c0.076-0.023,0.242-0.279,0.344-0.393c0.102-0.114,0.394-0.47,0.534-0.496c0.139-0.025,0.355-0.229,0.368-0.343c0.013-0.115,0.38-0.547,0.394-0.635c0.013-0.09,0.166-0.42,0.102-0.497c-0.062-0.076-0.559,0.115-0.622,0.141c-0.064,0.025-0.241,0.127-0.446,0.113c-0.202-0.013-0.114-0.177-0.127-0.254c-0.012-0.076-0.228-0.368-0.279-0.381c-0.051-0.012-0.203-0.166-0.267-0.317c-0.063-0.153-0.152-0.343-0.254-0.458c-0.102-0.114-0.165-0.38-0.268-0.559c-0.101-0.178-0.189-0.407-0.279-0.572c-0.021-0.041-0.045-0.079-0.067-0.117c0.118-0.029,0.289-0.082,0.31-0.009c0.024,0.088,0.165,0.279,0.19,0.419s0.165,0.089,0.178,0.216c0.014,0.128,0.14,0.433,0.19,0.47c0.052,0.038,0.28,0.242,0.318,0.318c0.038,0.076,0.089,0.178,0.127,0.369c0.038,0.19,0.076,0.444,0.179,0.482c0.102,0.038,0.444-0.064,0.508-0.102s0.482-0.242,0.635-0.255c0.153-0.012,0.179-0.115,0.368-0.152c0.191-0.038,0.331-0.177,0.458-0.28c0.127-0.101,0.28-0.355,0.33-0.444c0.052-0.088,0.179-0.152,0.115-0.253c-0.063-0.103-0.331-0.254-0.433-0.268c-0.102-0.012-0.089-0.178-0.152-0.178s-0.051,0.088-0.178,0.153c-0.127,0.063-0.255,0.19-0.344,0.165s0.026-0.089-0.113-0.203s-0.192-0.14-0.192-0.228c0-0.089-0.278-0.255-0.304-0.382c-0.026-0.127,0.19-0.305,0.254-0.19c0.063,0.114,0.115,0.292,0.279,0.368c0.165,0.076,0.318,0.204,0.395,0.229c0.076,0.025,0.267-0.14,0.33-0.114c0.063,0.024,0.191,0.253,0.306,0.292c0.113,0.038,0.495,0.051,0.559,0.051s0.33,0.013,0.381-0.063c0.051-0.076,0.089-0.076,0.153-0.076c0.062,0,0.177,0.229,0.267,0.254c0.089,0.025,0.254,0.013,0.241,0.179c-0.012,0.164,0.076,0.305,0.165,0.317c0.09,0.012,0.293-0.191,0.293-0.191s0,0.318-0.012,0.433c-0.014,0.113,0.139,0.534,0.139,0.534s0.19,0.393,0.241,0.482s0.267,0.355,0.267,0.47c0,0.115,0.025,0.293,0.103,0.293c0.076,0,0.152-0.203,0.24-0.331c0.091-0.126,0.116-0.305,0.153-0.432c0.038-0.127,0.038-0.356,0.038-0.444c0-0.09,0.075-0.166,0.255-0.242c0.178-0.076,0.304-0.292,0.456-0.407c0.153-0.115,0.141-0.305,0.446-0.305c0.305,0,0.278,0,0.355-0.077c0.076-0.076,0.151-0.127,0.19,0.013c0.038,0.14,0.254,0.343,0.292,0.394c0.038,0.052,0.114,0.191,0.103,0.344c-0.013,0.152,0.012,0.33,0.075,0.33s0.191-0.216,0.191-0.216s0.279-0.189,0.267,0.013c-0.014,0.203,0.025,0.419,0.025,0.545c0,0.053,0.042,0.135,0.088,0.21c-0.005,0.059-0.004,0.119-0.009,0.178C27.388,17.153,27.387,17.327,27.436,17.39zM20.382,12.064c0.076,0.05,0.102,0.127,0.152,0.203c0.052,0.076,0.14,0.05,0.203,0.114c0.063,0.064-0.178,0.14-0.075,0.216c0.101,0.077,0.151,0.381,0.165,0.458c0.013,0.076-0.279,0.114-0.369,0.102c-0.089-0.013-0.354-0.102-0.445-0.127c-0.089-0.026-0.139-0.343-0.025-0.331c0.116,0.013,0.141-0.025,0.267-0.139c0.128-0.115-0.189-0.166-0.278-0.191c-0.089-0.025-0.268-0.305-0.331-0.394c-0.062-0.089-0.014-0.228,0.141-0.331c0.076-0.051,0.279,0.063,0.381,0c0.101-0.063,0.203-0.14,0.241-0.165c0.039-0.025,0.293,0.038,0.33,0.114c0.039,0.076,0.191,0.191,0.141,0.229c-0.052,0.038-0.281,0.076-0.356,0c-0.075-0.077-0.255,0.012-0.268,0.152C20.242,12.115,20.307,12.013,20.382,12.064zM16.875,12.28c-0.077-0.025,0.025-0.178,0.102-0.229c0.075-0.051,0.164-0.178,0.241-0.305c0.076-0.127,0.178-0.14,0.241-0.127c0.063,0.013,0.203,0.241,0.241,0.318c0.038,0.076,0.165-0.026,0.217-0.051c0.05-0.025,0.127-0.102,0.14-0.165s0.127-0.102,0.254-0.102s0.013,0.102-0.076,0.127c-0.09,0.025-0.038,0.077,0.113,0.127c0.153,0.051,0.293,0.191,0.459,0.279c0.165,0.089,0.19,0.267,0.088,0.292c-0.101,0.025-0.406,0.051-0.521,0.038c-0.114-0.013-0.254-0.127-0.419-0.153c-0.165-0.025-0.369-0.013-0.433,0.077s-0.292,0.05-0.395,0.05c-0.102,0-0.228,0.127-0.253,0.077C16.875,12.534,16.951,12.306,16.875,12.28zM17.307,9.458c0.063-0.178,0.419,0.038,0.355,0.127C17.599,9.675,17.264,9.579,17.307,9.458zM17.802,18.584c0.063,0.102-0.14,0.431-0.254,0.407c-0.113-0.027-0.076-0.318-0.038-0.382C17.548,18.545,17.769,18.529,17.802,18.584zM13.189,12.674c0.025-0.051-0.039-0.153-0.127-0.013C13.032,12.71,13.164,12.725,13.189,12.674zM20.813,8.035c0.141,0.076,0.339,0.107,0.433,0.013c0.076-0.076,0.013-0.204-0.05-0.216c-0.064-0.013-0.104-0.115,0.062-0.203c0.165-0.089,0.343-0.204,0.534-0.229c0.19-0.025,0.622-0.038,0.774,0c0.152,0.039,0.382-0.166,0.445-0.254s-0.203-0.152-0.279-0.051c-0.077,0.102-0.444,0.076-0.521,0.051c-0.076-0.025-0.686,0.102-0.812,0.102c-0.128,0-0.179,0.152-0.356,0.229c-0.179,0.076-0.42,0.191-0.509,0.229c-0.088,0.038-0.177,0.19-0.101,0.216C20.509,7.947,20.674,7.959,20.813,8.035zM14.142,12.674c0.064-0.089-0.051-0.217-0.114-0.217c-0.12,0-0.178,0.191-0.103,0.254C14.002,12.776,14.078,12.763,14.142,12.674zM14.714,13.017c0.064,0.025,0.114,0.102,0.165,0.114c0.052,0.013,0.217,0,0.167-0.127s-0.167-0.127-0.204-0.127c-0.038,0-0.203-0.038-0.267,0C14.528,12.905,14.65,12.992,14.714,13.017zM11.308,10.958c0.101,0.013,0.217-0.063,0.305-0.101c0.088-0.038,0.216-0.114,0.216-0.229c0-0.114-0.025-0.216-0.077-0.267c-0.051-0.051-0.14-0.064-0.216-0.051c-0.115,0.02-0.127,0.14-0.203,0.14c-0.076,0-0.165,0.025-0.14,0.114s0.077,0.152,0,0.19C11.117,10.793,11.205,10.946,11.308,10.958zM11.931,10.412c0.127,0.051,0.394,0.102,0.292,0.153c-0.102,0.051-0.28,0.19-0.305,0.267s0.216,0.153,0.216,0.153s-0.077,0.089-0.013,0.114c0.063,0.025,0.102-0.089,0.203-0.089c0.101,0,0.304,0.063,0.406,0.063c0.103,0,0.267-0.14,0.254-0.229c-0.013-0.089-0.14-0.229-0.254-0.28c-0.113-0.051-0.241-0.28-0.317-0.331c-0.076-0.051,0.076-0.178-0.013-0.267c-0.09-0.089-0.153-0.076-0.255-0.14c-0.102-0.063-0.191,0.013-0.254,0.089c-0.063,0.076-0.14-0.013-0.217,0.012c-0.102,0.035-0.063,0.166-0.012,0.229C11.714,10.221,11.804,10.361,11.931,10.412zM24.729,17.198c-0.083,0.037-0.153,0.47,0,0.521c0.152,0.052,0.241-0.202,0.191-0.267C24.868,17.39,24.843,17.147,24.729,17.198zM20.114,20.464c-0.159-0.045-0.177,0.166-0.304,0.306c-0.128,0.141-0.267,0.254-0.317,0.241c-0.052-0.013-0.331,0.089-0.242,0.279c0.089,0.191,0.076,0.382-0.013,0.472c-0.089,0.088,0.076,0.342,0.052,0.482c-0.026,0.139,0.037,0.229,0.215,0.229s0.242-0.064,0.318-0.229c0.076-0.166,0.088-0.331,0.164-0.47c0.077-0.141,0.141-0.434,0.179-0.51c0.038-0.075,0.114-0.316,0.102-0.457C20.254,20.669,20.204,20.489,20.114,20.464zM10.391,8.802c-0.069-0.06-0.229-0.102-0.306-0.11c-0.076-0.008-0.152,0.06-0.321,0.06c-0.168,0-0.279,0.067-0.347,0C9.349,8.684,9.068,8.65,9.042,8.692C9.008,8.749,8.941,8.751,9.008,8.87c0.069,0.118,0.12,0.186,0.179,0.178s0.262-0.017,0.288,0.051C9.5,9.167,9.569,9.226,9.712,9.184c0.145-0.042,0.263-0.068,0.296-0.119c0.033-0.051,0.263-0.059,0.263-0.059S10.458,8.861,10.391,8.802z";
const mapConfig = this.state.mapconfig;
var maps = this.state.maps;
var worldDataProviderAreas = [];
const backToContinents = {
"svgPath": backIconSVG,
"id": "contBackButton",
"label": "Back to continent map",
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"useTargetsZoomValues": false,
"left": 30,
"bottom": 30,
"labelFontSize": 15,
"selectable": true
};
const backToWorld = {
"svgPath": backIconSVG,
"id": "worldBackButton",
"label": "Back to world map",
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"useTargetsZoomValues": false,
"left": 30,
"bottom": 30,
"labelFontSize": 15,
"selectable": true
};
Object.keys(maps).forEach(function(key) {
var mapObj = maps[key];
var area = {
"id": mapObj.country,
"linkToObject": {
"map": mapObj.map,
"getAreasFromMap": true,
"images": [
{
"svgPath": icon,
"color": "#e49224",
"latitude": 38.013476,
"longitude": -121.26709,
"title": "COMPANY NAME",
"description": "DESCRIPTION GOES HERE PER COMPANY"
},
{
"svgPath": icon,
"color": "#e49224",
"latitude": 38.272689,
"longitude": -85.759277,
"title": "COMPANY NAME 2",
"description": "DESCRIPTION GOES HERE PER COMPANY"
},
backToWorld
],
},
"color": "#605675",
};
worldDataProviderAreas.push(area);
});
var worldDataProvider = {
"map": "worldHigh",
"getAreasFromMap": true,
"areas": worldDataProviderAreas,
"images": [
{
"type": "circle",
"label": this.state.counts.countries.US,
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"latitude": this.getLatLong("US").latitude,
"longitude": this.getLatLong("US").longitude,
"scale": 4,
"labelShiftX": -20,
"linkToObject": "US",
},
{
"type": "circle",
"label": this.state.counts.countries.CA,
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"latitude": this.getLatLong("CA").latitude,
"longitude": this.getLatLong("CA").longitude,
"scale": 4,
"labelShiftX": -20,
"linkToObject": "CA",
},
{
"type": "circle",
"label": "8",
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"latitude": this.getLatLong("GB").latitude,
"longitude": this.getLatLong("GB").longitude,
"scale": 2,
"labelShiftX": -12,
"linkToObject": "GB",
},
{
"type": "circle",
"label": "2",
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"latitude": this.getLatLong("FR").latitude,
"longitude": this.getLatLong("FR").longitude,
"scale": 2,
"labelShiftX": -12,
"linkToObject": "FR",
},
backToContinents
],
};
var continentsDataProvider = {
"map": "continentsLow",
"areas": [
{
"id": "africa",
"linkToObject": worldDataProvider,
"color": "#605675",
"passZoomValuesToTarget": true
}, {
"id": "asia",
"linkToObject": worldDataProvider,
"color": "#a791b4",
"passZoomValuesToTarget": true
}, {
"id": "australia",
"linkToObject": worldDataProvider,
"color": "#7f7891",
"passZoomValuesToTarget": true
}, {
"id": "europe",
"linkToObject": worldDataProvider,
"color": "#9186a2",
"passZoomValuesToTarget": true
}, {
"id": "north_america",
"linkToObject": worldDataProvider,
"color": "#868191",
"passZoomValuesToTarget": true
}, {
"id": "south_america",
"linkToObject": worldDataProvider,
"color": "#8f7ea9",
"passZoomValuesToTarget": true
}
],
"images": [
{
"type": "circle",
"label": this.state.counts.continents.north_america,
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"latitude": this.getLatLong("US").latitude,
"longitude": this.getLatLong("US").longitude,
"scale": 4,
"labelShiftX": -20,
"linkToObject": "north_america",
},
{
"type": "circle",
"label": this.state.counts.continents.europe,
"labelColor": "#fffdcf",
"labelRollOverColor": "#fffdcf",
"color": "#e49224",
"rollOverColor": "#f2a43c",
"latitude": this.getLatLong("DE").latitude,
"longitude": this.getLatLong("DE").longitude,
"scale": 4,
"labelShiftX": -20,
"linkToObject": "europe",
},
],
};
console.log(continentsDataProvider);
mapConfig.dataProvider = continentsDataProvider;
this.setState({
mapconfig: mapConfig,
defaultProvider: continentsDataProvider
});
}
componentDidMount() {
this.renderMap();
}
render() {
return (
<div style={this.state.mapstyle}>
<AmCharts.React
ref="reactmap"
{...this.state.mapconfig}
/>
<button onClick={()=> this.changeLabel()}>Change Labels</button>
</div>
);
}
}
Here is the HTML page which displays the map (attached is the index.html with JS):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Map</title>
<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>
</head>
<body>
<h1>React AmCharts Map</h1>
<!-- React element goes here -->
<div id="react-map"></div>
<script src="./js/jquery-3.1.1.min.js"></script>
<!-- one script to rule them all (in production) -->
<script src="js/tracker-map/tracker-map.js"></script>
<script src="js/tracker-map/tracker-map-bundled.js"></script>
</body>
</html>
Pie Chart
Please, update index.js:
require("amcharts3/amcharts/amcharts.js");
require("amcharts3/amcharts/serial.js");
require("amcharts3/amcharts/themes/light.js");
// add this line to make pie charts work
require("amcharts3/amcharts/pie.js");
Not rendering properly
I am following the example that uses webpack. The chart is created, however, it doesn't show up in my page. It can only be seen when I use inspect element.
<div id="__AmCharts_React_1__" style="width: 100%; height: 100%; overflow: hidden; text-align: left;">
<div class="amcharts-main-div" style="position: relative;">
<div class="amcharts-chart-div" style="overflow: hidden; position: relative; text-align: left; cursor: default; touch-action: auto;">
<svg version="1.1" style="position: absolute; width: 1098px; height: 10px;">
<desc>JavaScript chart by amCharts 3.20.17</desc>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g transform="translate(100,20)"></g>
<g></g>
<g></g>
</svg>
</div>
</div>
</div>
function generateData() {
var firstDate = new Date();
var dataProvider = [];
for (var i = 0; i < 100; ++i) {
var date = new Date(firstDate.getTime());
date.setDate(i);
dataProvider.push({
date: date,
value: Math.floor(Math.random() * 100)
});
}
return dataProvider;
}
// Component which contains the dynamic state for the chart
var Chart = React.createClass({
getInitialState: function () {
return {
dataProvider: generateData()
};
},
render: function () {
var config = {
"path": "node_modules/amcharts3/amcharts",
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop": true,
"adjustBorderColor": false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable": true
},
"valueScrollbar":{
"oppositeAxis": false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": generateData()
};
return (
<AmCharts {...config} />
);
}
});
Export amchart
Hey There,
I am using Meteor + React (jsx style)
I have the charts rendering and this all working fine.
I have now added the require('amcharts3-export'); module on the top of my file.
I get the following error in the browser console when the charts render:
'Uncaught SyntaxError: Unexpected token <' for the files:
fabric.min.js:1
FilSaver.min.js:1
jszip.js:1
xlsx.min.js:1
This is the line mentioned in all of the files:
"< ! DOCTYPE html >"
I assume it might be something to do with the way Meteor loads the files? But am not sure.
Any advice would be much appreciated.
Thanks
Chart does not update when going to another route then going back
I am using this example https://github.com/amcharts/amcharts3-react/tree/master/examples/create-react-app and it worked! However, one thing I noticed is that when I change page/route, like when I go to page b then I go back to page A (where the amchart resides) the chart would not render the updated data.
Please help. Thank you
page scroller
in my case i have couple of serial charts on the same div.
when i'm hover on one of the charts its always scroll to the first one.
how i can disable scroll on hover ?
Charts are not rendered using create-react-app version v1.0.7
Whats the reason behind the V2 change to download script and when is proper npm integration comming?
I struggle to understand why we should use the <script> import in version 2.. This goes against modern web app architecture and module / bundler management. Can you please give some reasons why it should be installed like this?
Also when can we expect to see proper npm integration with module and version management ? - especially regarding the export libs. I also use xlsx in my app and have to jump though hoops to not make users download the xlsx lib twice. If this was managed in npm version, the bundler in meteor would make sure that build size is minimized for best results.
React ^15.5.0 support - Warning: A Component: React.createClass is deprecated ...
Hello there,
firstly thank you for work on this package.
With the release of React 15.5.0, the deprecation of the react-addons-testutilsand the new prop-types package is causing a lot of console warnings.
Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
Can't make sliced chart type working (donut, pie, etc.)
Hi, I tried to use pie chart with no success, it's the same with all sliced type, nothing is generated.
With :
const config = {
"path": "node_modules/amcharts3/amcharts",
"type": "pie",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"innerRadius": "40%",
"titleField": "category",
"valueField": "column-1",
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle"
},
"titles": [],
"dataProvider": [
{
"category": "category 1",
"column-1": 8
},
{
"category": "category 2",
"column-1": 6
},
{
"category": "category 3",
"column-1": 2
}
]
}return (
<div className="item">
<div className="pie">
<AmCharts {...config} />
</div>
</div>
)I get only an empty div :
<div id="__AmCharts_React_9__" style="width: 100%; height: 100%;"></div>Is it possible I'm doing something wrong ?
If I use other charts like serial, it works without problem and generate the chart :
const config = {
"path": "node_modules/amcharts3/amcharts",
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop": true,
"adjustBorderColor": false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable": true
},
"valueScrollbar":{
"oppositeAxis": false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": data
}Thanks.
Should probably replace "devDependencies" in README.md
This is alright for development environment,
{
"devDependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"@amcharts/amcharts3-react": "^2.0.0"
}
}but ideally these should be dependencies as that's the place where most people expect to find packages that get bundled in the production version. Of course, in most cases it does not break anything, but I think it's still forth fixing to reduce confusion.
d.AmXYChart is not a constructor
I am trying to use the XYChart but I am getting the error TypeError: d.AmXYChart is not a constructor.
I tried using the imports but unfortunately no luck
import AmCharts from 'amcharts3-react';
require("amstock3/amcharts/amstock");
Is this currently implemented ?
d.AmStockChart is not a constructor
Im trying to use the stock price chart, is this possible?
var React = require("react");
var ReactDOM = require("react-dom");
var AmCharts = require("amcharts3-react");
var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];
// Generate random data
function generateChartData() {
var firstDate = new Date();
firstDate.setDate( firstDate.getDate() - 500 );
firstDate.setHours( 0, 0, 0, 0 );
for ( var i = 0; i < 500; i++ ) {
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );
var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;
var a2 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;
var a3 = Math.round( Math.random() * ( 100 + i ) ) + 200;
var b3 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;
var a4 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
var b4 = Math.round( Math.random() * ( 100 + i ) ) + 600 + i;
chartData1.push( {
"date": newDate,
"value": a1,
"volume": b1
} );
chartData2.push( {
"date": newDate,
"value": a2,
"volume": b2
} );
chartData3.push( {
"date": newDate,
"value": a3,
"volume": b3
} );
chartData4.push( {
"date": newDate,
"value": a4,
"volume": b4
} );
}
}
// Component which contains the dynamic state for the chart
class Chart extends React.Component{
render() {
const config = {
"path": "node_modules/amcharts3/amcharts",
"type": "stock",
"theme": "light",
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData1,
"categoryField": "date"
}, {
"title": "second data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData2,
"categoryField": "date"
}, {
"title": "third data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData3,
"categoryField": "date"
}, {
"title": "fourth data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData4,
"categoryField": "date"
}
],
"panels": [ {
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
} ],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [ {
"valueField": "volume",
"type": "column",
"showBalloon": false,
"fillAlphas": 1
} ],
"stockLegend": {
"periodValueTextRegular": "[[value.close]]"
}
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [ {
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"dataSetSelector": {
"position": "left"
},
"export": {
"enabled": true
}
};
// Render the chart
console.log('chartData3',chartData3);
return (
<div style={{height:500,width:'50%'}}>
<AmCharts {...config} />
</div>
)
}
}
export default Chart
graph displays 'show all' on update
I don't know if this is configurable, but everytime 'dataProvider' is updated, the graph displays a button that says 'show all'. I'd like it to display the new data inmediatly.
this is how the chart data is being generated:
this.GRAPH_DATA = {
...
'dataProvider': this.props.data.previous,
...
}and this is how it is displayed
<AmCharts {...this.GRAPH_DATA}/>this.props.data is updated via an api that is being fetched after a button is clicked by the parent component.
Thanks in advance for any help you can offer.
Chart's dataProvider state update makes the chart flashing on every update
Note sure if this is a bug, but here is the client code:
var MyChart = React.createClass({
getInitialState: function () {
return {
dataProvider: {},
timer: null
};
},
generateData: function() {
$.ajax({
url: <url>,
dataType: 'json',
data: {},
cache: false,
success: function(data) {
this.setState({dataProvider: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function () {
var self = this;
self.setState({
// Update the chart dataProvider every 3 seconds
timer: setInterval(function () {
self.setState({
dataProvider: self.generateData()
});
}, 5000)
});
this.generateData();
},
componentWillUnmount: function () {
clearInterval(this.state.timer);
},
render: function () {
// Render the chart
return React.createElement(AmCharts.React,
{
"type": "serial",
"listeners": [ {
"event": "clickGraphItem",
"method": function(event) {
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(document.getElementById('comp-data')));
ReactDOM.render(
<AdminTable component={event.item.dataContext.component} />,
document.getElementById("comp-data")
);
}
}],
"dataProvider": this.state.dataProvider,
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "regular",
"labelsEnabled": false
}
],
"fontFamily": "Helvetica Neue, Helvetica, sans-serif",
"colors": [ "#0D4D4D", "#625E5E", "#33A827", "#FFBA0F", "#D63A00", ],
"graphs": [
{
"fillAlphas": 1,
"lineAlpha": 0,
"type": "column",
"id": "Bar0",
"valueField": "noflag",
"labelsEnabled": false,
"balloonText": "[[category]] <b>[[value]]</b>",
},
{# SNIP #}
],
"categoryField": "component",
"categoryAxis": {
"labelsEnabled": false,
"lineAlpha": 0
},
}
);
}
});
When I use the above code, and every few seconds I update the state of the dataProvider. I see the graph is flashing. I switched off animation, even tried with skipEvents = true for the validateNow.
Please let me know if this is bug, I would like to contribute too.
example.html in webpack folder vs scripts folder
While I can open
example/script/example.html
I can't open
example/webpack/example.html
Failed to load resource: the server responded with a status of 404 (Not Found)
This is after I did npm install
AmCharts is not defined error when loading libraries from local server
I'm working on a project where I'm using amcharts but can't seem to get it working when I want to download and use the libraries from my own server, like this:
<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>
<script src="amcharts/themes/light.js"></script>But when importing the react component I get an error saying that AmCharts is not defined.
The thing is that it does work when adding the script tags from the CDN. so I have no clue of what might be failing.
I decided to use the 'create-react-app' to see if some weird dependency from my project but I get the same result so I guess that I might be doing something wrong.
Here you can see my package.json and the import:
{
"name": "amcharts_test",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.13",
"@amcharts/amcharts3-react": "^3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}import AmCharts from '@amcharts/amcharts3-react';Thanks in advance.
Export functionality
We are trying to use the export functionality but we stumbled upon a problem.
As you can see in the console (screen shot attached) there is a problem with including the export functionality dependencies.
Attached you can find the source code for the case.
Can you please provide a technical solution to this problem?
Thank you,
Andrei
Is the JSX example wrong?
The JSX example says:
<AmCharts.React {...} />
But it doesn’t work for me. I was able to make it work by using:
<AmCharts {...} />
Did I miss something or there’s just a typo in the example?
Apply new theme with React
Hey, guys,
When you try to dynamically change the theme of the graph, fonts and line colors are not loaded correctly. For example, initially there is the white theme and its colors look good, when changing to the dark theme, it is also loaded correctly, but when trying to return to the white theme it no longer does.
breaks in React 16: Cannot read property 'toLowerCase' of undefined
I'm rewriting an application in React Fiber and AmCharts no longer seems to work.
I can console log AmCharts and AmCharts.React just fine, but as soon as I try to render it like so:
return <AmCharts.React {...config} />
I get the following error:
Cannot read property 'toLowerCase' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined
at ReactDOMServerRenderer.renderDOM (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:1989:27)
at ReactDOMServerRenderer.render (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:1983:21)
at ReactDOMServerRenderer.read (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:1951:19)
at renderToString (/Users/markly/web/next.js/node_modules/react-dom/cjs/react-dom-server.development.js:2184:25)
at renderPage (/Users/markly/web/next.js/dist/server/render.js:164:24)
at Function.getInitialProps (/Users/markly/web/PWA/.next/dist/pages/_document.js:61:24)
at _callee$ (/Users/markly/web/next.js/dist/lib/utils.js:36:30)
at tryCatch (/Users/markly/web/next.js/node_modules/regenerator-runtime/runtime.js:65:40)
at Generator.invoke [as _invoke] (/Users/markly/web/next.js/node_modules/regenerator-runtime/runtime.js:303:22)
at Generator.prototype.(anonymous function) [as next] (/Users/markly/web/next.js/node_modules/regenerator-runtime/runtime.js:117:21)
AmCharts version 2.0.7
any idea how to fix this?
JSX version misc
Couple of things:
`
<AmCharts {...config}/>
but I get 'undefined' on the X axis:
Also install:
$ npm install amcharts3 --save
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "amcharts3" "--save"
npm ERR! node v6.1.0
npm ERR! npm v3.8.6
npm ERR! code E404
npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/amcharts3
npm ERR! 404
npm ERR! 404 'amcharts3' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
but it worked when I manually edited package.json then did npm install
var AmCharts = require("amcharts3-react");
class ClassName extends React.Component {
constructor(props) {
super(props);
this.render = this.render.bind(this);
}
render() {
var chartData = [{
"country": "USA",
"visits": 4252
}, {
...
var _grphs = [{
"valueField": "visits",
"type": "column"
}];
var config = {
"type": "serial",
"theme": "light",
"graphs": _grphs,
"dataProvider": chartData
};
Update dataProvider images without reseting the whole map
I'm using the Maps product to show a lot of images. To avoid a performance impact I'm filtering the images( based on what the user sees).
But every time the chart.dataProvider.images field is updated the whole map gets reseted, losing current zoom and position. Here is my component that received filtered results via props:
render() {
const options = {
type: 'map',
dataProvider: {
map: 'randomMap',
areas: areas,
images: this.props.cities
},
'listeners': [
{
'event': 'dragCompleted',
'method': this.dragCompleted
}
]
}
return (
<div className="App">
<AmCharts.React options={options}/>
</div>
)
}
Are there any ways to refresh only the images?
How to add Listener and set shortMonthNames with amcharts3-react
/**
* Created by yhon.
*/
import React from "react";
import AmCharts from "amcharts3-react";
require('amcharts3/amcharts/gantt.js')
export default class Amcharts extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
AmCharts.useUTC = false;
AmCharts.monthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]
AmCharts.shortMonthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]
AmCharts.addListener("clickGraph",(e)=>{console.log(e,33333333)});
}
render(){
var data = [ {
"category": "Module #1",
"segments": [ {
"start": "2016-01-01",
"end": "2016-01-14",
"color": "#b9783f",
"task": "Gathering requirements",
"segmentsField":"rrrrrrrrrrr",
"back":"44444444"
}, {
"start": "2016-01-16",
"end": "2016-01-27",
"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-08",
"end": "2016-01-15",
"color": "#cc4748",
"task": "Producing specifications"
}, {
"start": "2016-01-16",
"end": "2016-02-05",
"color": "#cc4748",
"task": "Development"
}, {
"start": "2016-02-10",
"end": "2016-02-18",
"color": "#cc4748",
"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"
} ]
} ]
return (
<div style={{height:"400px"}}>
<AmCharts
ref="chart"
path="./"
type="gantt"
theme="light"
marginRight = {70}
period = "DD"
dataDateFormat= "YYYY-MM-DD"
columnWidth= {0.5}
valueAxis = {{
"type":"date"
}}
brightnessStep= {7}
graph = {{
"fillAlphas" : 1,
"lineAlpha": 1,
"lineColor": "#fff",
"fillAlphas": 0.85,
"balloonText": "<b>[[back]]</b>:<br />[[open]] -- [[value]]"
}}
rotate={true}
categoryField= "category"
segmentsField= "segments"
colorField= "color"
startDateField="start"
endDateField = "end"
valueScrollbar={ {
"autoGridCount": true
}}
chartCursor={ {
"cursorColor": "#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": true
}}
dataProvider={data}
/>
</div>
)
}
}
AmCharts.useUTC = false;
AmCharts.monthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]
AmCharts.shortMonthNames = [
"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"
]
AmCharts.addListener("clickGraph",(e)=>{console.log(e,33333333)});
I try to do with this ，but not work well
node_modules empty?
webpack/examples.js
render: function () {
// Render the chart
return React.createElement(AmCharts, {
"path": "node_modules/amcharts3/amcharts",
But after npm install, node_modules is still empty?
Also why is there no makeChart here
var chart = AmCharts.makeChart("chartdiv", {...}
But it is shown in most examples? Do I not need it?
Noticed I added in package.json
"scripts": {
"prepublish": "webpack"
}
but when removed, node_modules are generate. If not sure why we need prepublish
Having trouble adding/removing graphs
I'm able to create a chart with an arbitrary number of graphs no problem, but if I try to go back and change the graphs after the chart has been created I'm getting errors. Is there a proper way to add or remove graphs with the React component? I see that there is an addGraph method in vanilla AmCharts, but I don't know how to access it through the component. Right now I'm just updating the graphs prop on the AmCharts component, but when I do that it gives me an error:
Uncaught TypeError: Cannot read property 'values' of undefined
at Object.stackGraphs (application-140b667….js:77674)
at Object.updateData (application-140b667….js:77656)
at Object.draw (application-140b667….js:77658)
at Object.zoom (application-140b667….js:77636)
at b.zoomAxesAndGraphs (application-140b667….js:172445)
at b.zoomAxesAndGraphs (application-140b667….js:172461)
at b.timeZoom (application-140b667….js:172458)
at b.zoom (application-140b667….js:172457)
at b.drawChart (application-140b667….js:172454)
at b.onDataUpdated (application-140b667….js:172449)
at b.initChart (application-140b667….js:172449)
at b.afterWrite (application-140b667….js:77711)
at b.write (application-140b667….js:77707)
at b.validateNow (application-140b667….js:77734)
at Object.componentDidUpdate (eval at <anonymous> (application-140b667….js:12325), <anonymous>:264:26)
at measureLifeCyclePerf (eval at <anonymous> (application-140b667….js:2965), <anonymous>:75:12)
Error when toggling value axes on serial
Hi.
When I want to toggle the value axe with a button for my chart, I got an error:
Uncaught TypeError: Cannot read property 'graphs' of undefined
My chart:
import React, { Component } from 'react';
import AmCharts from 'amcharts3-react';
function rand() {
return Math.round(Math.random() * 1000);
}
class SerialOrdinate extends Component {
constructor(props) {
super(props);
this.state = {
ordinate: true,
};
this.updateOrdinate = this.updateOrdinate.bind(this);
}
updateOrdinate() {
this.setState({ ordinate: !this.state.ordinate });
}
render() {
const config = {
theme: 'light',
type: 'serial',
categoryField: 'time',
graphs: [{
title: 'Titre 1',
valueField: 'val1',
type: 'line',
}],
dataProvider: [
{ time: '08:00', val1: rand() },
{ time: '09:00', val1: rand() },
{ time: '10:00', val1: rand() },
{ time: '11:00', val1: rand() },
{ time: '12:00', val1: rand() },
],
valueAxes: [{
labelsEnabled: true,
}],
};
config.valueAxes[0].labelsEnabled = this.state.ordinate;
return (
<div>
<button onClick={this.updateOrdinate}>Ordinate {this.state.ordinate ? 1 : 0}</button>
<div style={{ width: '1000px', height: '500px' }}>
<AmCharts {...config} />
</div>
</div>
);
}
}
export default SerialOrdinate;I create a repo for this issue: https://github.com/rplanelles/amcharts-valueaxes
publish v3 to npm
npm i @amcharts/amcharts3-react@^3 doesn't work.
The last version is 2.0.8 in npm
Having trouble with using the example in JSX
I'm trying to convert your example chart into JSX for our application, and nothing is rendering in our application. I've confirmed that Amcharts is being imported and data is being generated, not sure what I'm missing. Please help.
I can not using amcharts3-animate plugins and the related method "animateData" in react
here is the part code of the charts component :
import React, { Component } from 'react'
import styles from './style.scss'
import style from './style.css'
import AmCharts from 'amcharts3-react'
import jsonData from './data.js'
// #10
import 'amcharts3/amcharts/serial'
// import 'amcharts3-animate'
class BarChartTest extends Component {
constructor (props) {
super(props)
this.state = { num: 100 }
this.onClick = this.onClick.bind(this)
}
componentDidMount() {
}
onClick () {
setTimeout(()=>{
this.setState({ num: this.state.num + 20 })
} , 100);
}
render () {
const data = [{
date: 0,
value: this.state.num
}]
// const selfRef = this
// function redraw () {
// selfRef.chartRef.animateData(data, {
// duration: 1000,
// complete: function () {
// }
// })
// }
const config = {
'type': 'serial',
'theme': 'light',
'dataProvider': data,
'startDuration': 1,
'addClassNames' : true,
'graphs': [{
id: 'g1',
valueField: 'value',
title: 'value',
type: 'column',
fillAlphas: 0.9,
valueAxis: 'a1',
legendPeriodValueText: 'total: [[value.sum]] mi',
lineColor: '#263138',
alphaField: 'alpha'
}],
'valueAxes': [{
'minimum': -100,
'maximum': 500
}],
'chartCursor': {},
'zoomOutOnDataUpdate': false,
// 'listeners' : [{
// 'event' : 'init',
// 'method' : redraw
// }],
'animateData' : data,
'categoryField': 'date'
}
return (
<div className={styles.barChart}>
<AmCharts {...config} ref={(ref) => {this.chartRef = ref;}}/>
<div className={styles.scrollmenu} />
<button onClick={this.onClick}>add</button>
</div>
)
}
}
export default BarChartTest
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.