Wijmo 5[FlexChart]
Multiple Axes in Chart
HTML
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.207/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.207/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.207/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.207/controls/wijmo.chart.min.js"></script>
<div id="theChart"></div>
<input type="button" id="aa" onclick="aaa();">aaaaa </input>
JavaScript
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i%countries.length],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
y2: Math.random() * 10
});
}
$(document).ready(function () {
function aaa () {
alert(1);
var view = new wijmo.collections.CollectionView(data);
var y2 = new wijmo.chart.Axis();
y2.min = 0;
y2.max = 10;
y2.title = 'Y2';
y2.position = wijmo.chart.Position.Right;
var chart = new wijmo.chart.FlexChart('#theChart');
chart.initialize({
itemsSource: view,
chartType: wijmo.chart.ChartType.Column,
bindingX: 'country',
axisX: { labelAngle: 90 },
axisY:{title:'Y1',min:0,max:30000},
series: [
{ binding: 'sales', name: 'Sales', chartType: null },
{ binding: 'expenses', name: 'Expenses', chartType: null },
{ binding: 'downloads', name: 'Downloads', chartType: wijmo.chart.ChartType.Spline},
{ binding: 'y2', name: 'y2', axisY: y2 },
],
selectionMode: wijmo.chart.SelectionMode.Point
});
console.log(chart)
}
aaa();
});