anychart-jquery
Version:
JQuery plugin for AnyChart JavaScript charting library
61 lines (56 loc) • 2.77 kB
HTML
<html>
<head>
<script src="../node_modules/anychart/dist/js/anychart-base.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-stock.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-ui.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-exports.min.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../dist/anychart-jquery.min.js"></script>
<link rel="stylesheet" href="../node_modules/anychart/dist/css/anychart-ui.min.css"/>
<link rel="stylesheet" href="../node_modules/anychart/dist/fonts/css/anychart-font.min.css"/>
<script src="assets/msft-daily-short.js"></script>
<script src="assets/orcl-daily-short.js"></script>
<script src="assets/csco-daily-short.js"></script>
<script src="assets/ibm-daily-short.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var chart = $('#container').anychart('stock').anychart();
var msftDataTable = anychart.data.table();
msftDataTable.addData(get_msft_daily_short_data());
var orclDataTable = anychart.data.table();
orclDataTable.addData(get_orcl_daily_short_data());
var cscoDataTable = anychart.data.table();
cscoDataTable.addData(get_csco_daily_short_data());
var ibmDataTable = anychart.data.table();
ibmDataTable.addData(get_ibm_daily_short_data());
var firstPlot = chart.plot(0);
firstPlot.area(msftDataTable.mapAs({'value': 4})).name('MSFT');
var secondPlot = chart.plot(1);
secondPlot.splineArea(orclDataTable.mapAs({'value': 4})).fill('#1976d2 0.65').stroke('1.5 #1976d2').name('ORCL');
var thirdPlot = chart.plot(2);
thirdPlot.stepArea(cscoDataTable.mapAs({'value': 4})).fill('#ef6c00 0.65').stroke('1.5 #ef6c00').name('CSCO');
var forthPlot = chart.plot(3);
forthPlot.line(msftDataTable.mapAs({'value': 4})).name('MSFT').tooltip(null);
forthPlot.spline(orclDataTable.mapAs({'value': 4})).name('ORCL').tooltip(null);
forthPlot.stepLine(cscoDataTable.mapAs({'value': 4})).name('CSCO').tooltip(null);
chart.scroller().area(msftDataTable.mapAs({'value': 4}));
chart.selectRange('2005-01-03', '2005-11-20');
</script>
<!-- This library enables the automatic resizing of the height and width of
both same and cross domain iFrames to fit their contained content. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.8/iframeResizer.contentWindow.min.js"></script>
</body>
</html>