FusionCharts - Gallery Example - Real-time Line (Dual y-axis) Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Real-time Line chart with dual y-axis -->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: 'realtimelinedy',
dataFormat: 'json',
id: 'stockMonitor',
renderAt: 'chart-container',
width: '500',
height: '350',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Stock Price Monitor",
"subCaption": "Harry's Supermart",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"subcaptionFontBold": "0",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"showRealTimeValue": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"numberprefix": "$",
"setadaptiveymin": "1",
"setadaptivesymin": "1",
"xaxisname": "Time",
"labeldisplay": "Rotate",
"slantlabels": "1",
"pyaxisminvalue": "35",
"pyaxismaxvalue": "36",
"syaxisminvalue": "10000",
"syaxismaxvalue": "12000",
"divlineAlpha": "100",
"divlineColor": "#999999",
"showAlternateHGridColor": "0",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"numDisplaySets": "10"
},
"categories": [{
"category": [{
"label": "Day Start"
}]
}],
"dataset": [{
"seriesname": "HRYS Price",
"showvalues": "0",
"data": [{
"value": "35.1"
}]
},
{
"seriesname": "NYSE Index",
"showvalues": "0",
"parentyaxis": "S",
"data": [{
"value": "10962.87"
}]
}
],
"trendlines": [{
"line": [{
"parentyaxis": "P",
"startvalue": "35.1",
...