var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var areaChartEl = document.getElementById('areaChart');

areaChartEl.width = areaChartEl.offsetParent.clientWidth;

areaChartEl.height = areaChartEl.offsetParent.clientHeight;

// initialize the line chart

var areaChart = new Controls.AreaChart(areaChartEl);

var labels = [

"Jan", "Feb", "Mar", "Apr", "May", "Jun",

"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"

];

// dynamically create the years to start from the previous year always

var currentYear = new Date().getFullYear();

var series = new Collections.ObservableCollection([

new Charting.BarSeries([12, 17, 22, 13, 18, 15, 26, 18, 28, 29, 22, 19], labels),

new Charting.BarSeries([8, 12, 15, 10, 14, 18, 21, 15, 22, 24, 18, 16], labels),

new Charting.BarSeries([5, 8, 12, 9, 11, 13, 15, 12, 18, 20, 14, 12], labels)

]);

series.item(0).title = currentYear.toString();

series.item(0).supportedLabels = Charting.LabelKinds.InnerLabel | Charting.LabelKinds.XAxisLabel;

series.item(1).title = (currentYear - 1).toString();

series.item(1).supportedLabels = Charting.LabelKinds.InnerLabel;

series.item(2).title = (currentYear - 2).toString();

series.item(2).supportedLabels = Charting.LabelKinds.InnerLabel;

areaChart.xAxis.title = "Fiscal Month";

areaChart.yAxis.title = "Revenue (Millions)";

areaChart.xAxis.interval = 1;

areaChart.series = series;

// series brushes

var firstBrush = new Drawing.Brush("#26a69a");

var secondBrush = new Drawing.Brush("#3f51b5");

var thirdBrush = new Drawing.Brush("#d24dff");

//each series would have one brush

areaChart.plot.seriesStyle = new Charting.PerSeriesStyle(

new Collections.List([firstBrush, secondBrush, thirdBrush]),

new Collections.List([firstBrush, secondBrush, thirdBrush]),

new Collections.List([1.0, 1.0, 1.0])

);

areaChart.areaOpacity = 0.35;

areaChart.gridType = Charting.GridType.Crossed;

// theme settings

areaChart.theme.gridLineColor = new Drawing.Color("#eceff1");

areaChart.theme.gridColor1 = new Drawing.Color("#ffffff");

areaChart.theme.gridColor2 = new Drawing.Color("#fafafa");

areaChart.theme.axisStroke = new Drawing.Brush("#455a64");

areaChart.theme.axisLabelsBrush = new Drawing.Brush("#455a64");

areaChart.theme.legendBackground = new Drawing.Brush("#ffffff");

areaChart.theme.legendBorderStroke = new Drawing.Brush("#eeeeee");

areaChart.theme.dataLabelsBrush = new Drawing.Brush("#4d4d4d");

areaChart.legendTitle = "Comparison";

// initialize the custom CrossHairRenderer

var crossHairRenderer = new CrossHairRenderer();

areaChart.plot.seriesRenderers.add(crossHairRenderer);

areaChart.draw();

// handle mouse movements - refresh the area chart

function updateCrossHair(e) {

crossHairRenderer.mousePoint = new Drawing.Point(e.offsetX, e.offsetY);

areaChart.invalidate();

}