amcharts / amcharts3-react Goto Github PK
View Code? Open in Web Editor NEWOfficial amCharts V3 React component
License: Apache License 2.0
Official amCharts V3 React component
License: Apache License 2.0
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.
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.
/**
* 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
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.
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?
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 ?
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.
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?
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)
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" : []
};
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?
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
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
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
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");
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
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
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>
)
}
}
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
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 ?
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)
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?
As AmMap is a different module and the name suggests it's only for charts.
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
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
}
}]
}
]
}
};
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?
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?
Couple of things:
`
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
};
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
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
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 ?
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);
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.
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
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
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.
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
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?
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.
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.
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?
npm i @amcharts/amcharts3-react@^3
doesn't work.
The last version is 2.0.8 in npm
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?
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>
)
}
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.
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} />
);
}
});
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!
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.
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.