/// <reference path="JsChart-vsdoc.js" />

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var chartEl = document.getElementById('lineChart');

chartEl.width = chartEl.offsetParent.clientWidth;

chartEl.height = chartEl.offsetParent.clientHeight;

// create the chart

var lineChart = new Controls.LineChart(chartEl);

// create line brushes

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

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

var thirdBrush = new Drawing.Brush("#ffa000"); // Amber

lineChart.legendRenderer.background = new Drawing.Brush("#ffffff");

lineChart.legendRenderer.borderStroke = new Drawing.Brush("#eeeeee");

lineChart.legendRenderer.borderThickness = 1;

lineChart.legendTitle = "Time Period";

lineChart.showZoomWidgets = true;

// background and theme appearance

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

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

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

lineChart.theme.gridLineThickness = 1;

lineChart.gridType = Charting.GridType.Horizontal;

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

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

// create sample data series

var labels = new Collections.List([

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

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

]);

var series1 = new Charting.Series2D(

new Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),

new Collections.List([12, 17, 22, 13, 8, 15, 26, 18, 28, 29, 22, 19]),

labels

);

series1.title = "Current Year";

lineChart.series.add(series1);

var series2 = new Charting.Series2D(

new Collections.List([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),

new Collections.List([2, 5, 7, 6, 12, 11, 13, 10, 14, 18, 21, 24]),

labels

);

series2.title = "Previous Year";

lineChart.series.add(series2);

lineChart.xAxis.interval = 1;

lineChart.xAxis.title = "Month";

lineChart.yAxis.title = "Growth Index";

lineChart.showXRangeSelector = false;

lineChart.xScrollRangeMin = 0;

lineChart.xScrollRangeMax = 13;

lineChart.showYRangeSelector = false;

lineChart.yScrollRangeMin = 0;

lineChart.yScrollRangeMax = 35;

// assign one brush per series

var style = new Charting.MixedSeriesStyle();

style.commonFills = new Collections.List([firstBrush, secondBrush, thirdBrush]);

style.commonStrokes = new Collections.List([firstBrush, secondBrush, thirdBrush]);

style.uniformStrokeThickness = 3;

lineChart.plot.seriesStyle = style;

lineChart.theme.gridColor1 = Drawing.Color.fromArgb(255, 255, 255);

lineChart.theme.gridColor2 = Drawing.Color.fromArgb(250, 250, 250);

lineChart.theme.gridLineThickness = 1;

lineChart.draw();

// handlers

var gridType = document.getElementById('gridType');

gridType.selectedIndex = lineChart.gridType;

gridType.addEventListener("change", function ()

{

lineChart.gridType = gridType.selectedIndex;

lineChart.draw();

});

var lineType = document.getElementById('lineType');

lineType.selectedIndex = lineChart.lineType;

lineType.addEventListener("change", function ()

{

lineChart.lineType = lineType.selectedIndex;

lineChart.draw();

});

var xAxisMin = document.getElementById('xAxisMin');

xAxisMin.valueAsNumber = lineChart.xAxis.effectiveMinValue;

xAxisMin.addEventListener("change", function ()

{

lineChart.xAxis.minValue = xAxisMin.valueAsNumber;

lineChart.draw();

});

var xAxisMax = document.getElementById('xAxisMax');

xAxisMax.valueAsNumber = lineChart.xAxis.effectiveMaxValue;

xAxisMax.addEventListener("change", function ()

{

lineChart.xAxis.maxValue = xAxisMax.valueAsNumber;

lineChart.draw();

});

var yAxisMin = document.getElementById('yAxisMin');

yAxisMin.valueAsNumber = lineChart.yAxis.effectiveMinValue;

yAxisMin.addEventListener("change", function ()

{

lineChart.yAxis.minValue = yAxisMin.valueAsNumber;

lineChart.draw();

});

var yAxisMax = document.getElementById('yAxisMax');

yAxisMax.valueAsNumber = lineChart.yAxis.effectiveMaxValue;

yAxisMax.addEventListener("change", function ()

{

lineChart.yAxis.maxValue = yAxisMax.valueAsNumber;

lineChart.draw();

});

var xRangeMin = document.getElementById('xRangeMin');

xRangeMin.valueAsNumber = lineChart.xScrollRangeMin;

xRangeMin.addEventListener("change", function ()

{

lineChart.xScrollRangeMin = xRangeMin.valueAsNumber;

lineChart.draw();

});

var xRangeMax = document.getElementById('xRangeMax');

xRangeMax.valueAsNumber = lineChart.xScrollRangeMax;

xRangeMax.addEventListener("change", function ()

{

lineChart.xScrollRangeMax = xRangeMax.valueAsNumber;

lineChart.draw();

});

var yRangeMin = document.getElementById('yRangeMin');

yRangeMin.valueAsNumber = lineChart.yScrollRangeMin;

yRangeMin.addEventListener("change", function ()

{

lineChart.yScrollRangeMin = yRangeMin.valueAsNumber;

lineChart.draw();

});

var yRangeMax = document.getElementById('yRangeMax');

yRangeMax.valueAsNumber = lineChart.yScrollRangeMax;

yRangeMax.addEventListener("change", function ()

{

lineChart.yScrollRangeMax = yRangeMax.valueAsNumber;

lineChart.draw();

});

var showXticks = document.getElementById('showXticks');

showXticks.checked = lineChart.showXTicks;

showXticks.addEventListener("change", function ()

{

lineChart.showXTicks = showXticks.checked;

lineChart.draw();

});

var showYticks = document.getElementById('showYticks');

showYticks.checked = lineChart.showYTicks;

showYticks.addEventListener("change", function ()

{

lineChart.showYTicks = showYticks.checked;

lineChart.draw();

});

var showXCoords = document.getElementById('showXCoords');

showXCoords.checked = lineChart.showXCoordinates;

showXCoords.addEventListener("change", function ()

{

lineChart.showXCoordinates = showXCoords.checked;

lineChart.draw();

});

var showYCoords = document.getElementById('showYCoords');

showYCoords.checked = lineChart.showYCoordinates;

showYCoords.addEventListener("change", function ()

{

lineChart.showYCoordinates = showYCoords.checked;

lineChart.draw();

});

var showXRange = document.getElementById('showXRange');

showXRange.checked = lineChart.showXRangeSelector;

showXRange.addEventListener("change", function ()

{

lineChart.showXRangeSelector = showXRange.checked;

lineChart.draw();

});

var showYRange = document.getElementById('showYRange');

showYRange.checked = lineChart.showYRangeSelector;

showYRange.addEventListener("change", function ()

{

lineChart.showYRangeSelector = showYRange.checked;

lineChart.draw();

});

var showLegend = document.getElementById('showLegend');

showLegend.checked = lineChart.showLegend;

showLegend.addEventListener("change", function ()

{

lineChart.showLegend = showLegend.checked;

lineChart.draw();

});

var scrollGrid = document.getElementById('scrollGrid');

scrollGrid.checked = lineChart.pinGrid;

scrollGrid.addEventListener("change", function ()

{

lineChart.pinGrid = scrollGrid.checked;

lineChart.draw();

});

var showDataLabels = document.getElementById('showDataLabels');

showDataLabels.checked = lineChart.showDataLabels == Charting.LabelKinds.All;

showDataLabels.addEventListener("change", function ()

{

if (showDataLabels.checked)

lineChart.showDataLabels = Charting.LabelKinds.All;

else

lineChart.showDataLabels = Charting.LabelKinds.None;

lineChart.draw();

});