Created
July 9, 2018 07:09
-
-
Save jvkiran/7a189a0e6e8c283c5479a1812769e8c7 to your computer and use it in GitHub Desktop.
Amchart - Multiple chart react component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import AmCharts from "@amcharts/amcharts3-react"; | |
export default class Amcharts extends React.Component { | |
constructor(props) { | |
super(props); | |
} | |
render(){ | |
return ( | |
<div style={{height:"400px"}}> | |
<AmCharts.React | |
className="my-class" | |
style={{ | |
width: "100%", | |
height: "500px" | |
}} | |
options={{ | |
"type": "stock", | |
"theme": "light", | |
"dataDateFormat": "DD-MM-YYYY", | |
"dataSets": [ { | |
"title": "MSFT", | |
"fieldMappings": [ { | |
"fromField": "Close", | |
"toField": "value" | |
}, { | |
"fromField": "Volume", | |
"toField": "volume" | |
} ], | |
"dataLoader": { | |
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/google_msft.csv", | |
"format": "csv", | |
"delimiter": ",", | |
"useColumnNames": true, | |
"skip": 1, | |
"numberFields": ["Close", "Volume"], | |
"reverse": true, | |
"postProcess": function( data ) { | |
// Function that reformats dates | |
function reformatDate( input ) { | |
// Reformat months | |
var mapObj = { | |
"Jan": "01", | |
"Feb": "02", | |
"Mar": "03", | |
"Apr": "04", | |
"May": "05", | |
"Jun": "06", | |
"Jul": "07", | |
"Aug": "08", | |
"Sep": "09", | |
"Oct": "10", | |
"Nov": "11", | |
"Dec": "12" | |
}; | |
var re = new RegExp( Object.keys( mapObj ).join( "|" ), "gi" ); | |
input = input.replace( re, function( matched ) { | |
return mapObj[ matched ]; | |
} ); | |
// Reformat years and days into four and two digits respectively | |
var p = input.split("-"); | |
if (p[0].length == 1) { | |
p[0] = "0" + p[0]; | |
} | |
if (Number(p[2]) > 50) { | |
p[2] = "19" + p[2]; | |
} | |
else { | |
p[2] = "20" + p[2]; | |
} | |
return p.join("-"); | |
} | |
// Reformat all dates | |
for ( var i = 0; i < data.length; i++ ) { | |
data[ i ].Date = reformatDate( data[ i ].Date ); | |
} | |
console.log(data); | |
return data; | |
} | |
}, | |
"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: { | |
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" | |
} ] | |
} | |
}} | |
listeners={[{ | |
"event": "clickGraph", | |
"method": (e)=>{console.log(e,33333333)} | |
}]} | |
/> | |
</div> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment