/// <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('chart');

chartEl.width = chartEl.offsetParent.clientWidth;

chartEl.height = chartEl.offsetParent.clientHeight;

var chart = new Controls.LineChart(chartEl);

chart.titleMargin = new Charting.Margins(0, 0, 20, 0);

chart.title = "Signal Processing Functions";

chart.showLegend = true;

// create instances of the FunctionSeries class

var func1 = new Charting.FunctionSeries(function (x) { return Math.sin(x) * x; }, 100, 0, 10);

func1.title = "Damped Sine (sin(x) * x)";

var func2 = new Charting.FunctionSeries(function (x) { return Math.cos(x) * 5; }, 100, 0, 10);

func2.title = "Phase Shift (cos(x) * 5)";

var func3 = new Charting.FunctionSeries(function (x) { return x * 0.5; }, 100, 0, 10);

func3.title = "Linear Trend (0.5x)";

chart.series.add(func1);

chart.series.add(func2);

chart.series.add(func3);

// styling through the theme property

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

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

chart.gridType = Charting.GridType.Crossed;

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

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

var style = new Charting.MixedSeriesStyle();

style.commonFills = style.commonStrokes = new Collections.List([

new Drawing.Brush("#26a69a"), // Teal

new Drawing.Brush("#3f51b5"), // Indigo

new Drawing.Brush("#ffa000") // Amber

]);

style.uniformStrokeThickness = 3;

chart.plot.seriesStyle = style;

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

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

chart.xAxis.title = "Input Signal";

chart.yAxis.title = "Output Magnitude";

chart.draw();