JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.amcharts.com/lib/amstock.js"></script>
<p>The following chart uses historical stock quotes from Yahoo Finance API.</p>
<p>
URL:
<a href="http://ichart.yahoo.com/table.csv?s=ROST&a=0&b=1&c=2000&d=0&e=31&f=2015&g=w&ignore=.csv">http://ichart.yahoo.com/table.csv?s=ROST&a=0&b=1&c=2000&d=0&e=31&f=2010&g=w&ignore=.csv</a>
</p>
<hr />
<div id="chartdiv"></div>
CSS
p {
font-family: Verdana;
font-size: 12px;
margin: 10px;
}
#chartdiv {
height: 400px;
margin: 10px;
}
.amChartsButtonSelected {
background-color: #CC0000;
border-style: solid;
border-color: #CC0000;
border-width: 1px;
color: #FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
.amChartsButton {
background-color: #EEEEEE;
border-style: solid;
border-color: #CCCCCC;
border-width: 1px;
color: #000000;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 1px;
}
JavaScript
AmCharts.ready(function() {
loadChartData('http://ichart.yahoo.com/table.csv?s=ROST&a=0&b=1&c=2000&d=0&e=31&f=2010&g=w&ignore=.csv');
createStockChart();
});
var chart;
var chartData = [];
var newPanel;
var stockPanel;
function loadChartData(url) {
// Normally this is what you would probably want to do to load external
// data file. However since crossdomain request are not allowed, we
// replace this with our drop in data.
/*
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', url, false);
request.send();
parseCSV(request.responseText);
*/
// For the sake of this test let's pretend the code above returned
// following data (it's an actual data returned by Yahoo Finance)
var csv = 'Date,Open,High,Low,Close,Volume,Adj...