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

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var Components = Charting.Components;

// create the dashboard

var dashboardEl = document.getElementById('dashboard');

dashboardEl.width = dashboardEl.offsetParent.clientWidth;

dashboardEl.height = dashboardEl.offsetParent.clientHeight;

var dashboard = new Controls.ChartBase(dashboardEl);

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

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

var plot = new Charting.Plot2D();

plot.gridType = Charting.GridType.Horizontal;

// sample temperature data for bar graphics

var barSeries = new Charting.Series2D(

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

new Collections.List([-3, -7, 10, 12, 20, 29, 33, 30, 24, 15, 2, -8]),//y

new Collections.List(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]));

barSeries.title = "Temperature (°C)";

barSeries.supportedLabels = Charting.LabelKinds.XAxisLabel;

// sample pressure data for line graphics

var lineSeries = new Charting.Series2D(

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

new Collections.List([100120, 101044, 101503, 103499, 102122, 100593, 95542, 102223, 103002, 102994, 102843, 101332]),//right-y

null);

lineSeries.title = "Pressure (Pa)";

// draw bars

var barRenderer = new Charting.BarRenderer(new Collections.ObservableCollection([barSeries]));

barRenderer.seriesStyle = new Charting.UniformSeriesStyle(new Drawing.Brush("#26a69a"), new Drawing.Brush("#26a69a"), 3);

// draw lines

var lineRenderer = new Charting.LineRenderer(

new Collections.ObservableCollection([lineSeries]));

lineRenderer.seriesStyle = new Charting.UniformSeriesStyle(new Drawing.Brush("#3f51b5"), new Drawing.Brush("#3f51b5"), 3);

// add graphics to plot

plot.seriesRenderers.add(barRenderer);

plot.seriesRenderers.add(lineRenderer);

// draw annotations

var annotations = new Charting.Series2D(

new Collections.List([ 7 ]), //x

new Collections.List([ 95542 ]),//right-y

new Collections.List([ "STORM" ]));

var annotationRenderer = new Charting.AnnotationRenderer(new Collections.ObservableCollection([annotations]));

annotationRenderer.seriesStyle = new Charting.UniformSeriesStyle(new Drawing.Brush("rgba(239, 83, 80, 0.8)"), new Drawing.Brush("rgba(239, 83, 80, 0.8)"), 10);

plot.seriesRenderers.add(annotationRenderer);

// create axes

var celsiusAxis = new Charting.Axis();

celsiusAxis.interval = 10;

celsiusAxis.minValue = -20;

celsiusAxis.maxValue = 50;

celsiusAxis.title = "Celsius";

var fahrenheitAxis = new Charting.Axis();

fahrenheitAxis.minValue = -20 * 1.8 + 32;

fahrenheitAxis.maxValue = 50 * 1.8 + 32;

fahrenheitAxis.interval = 20;

fahrenheitAxis.title = "Fahrenheit";

var kelvinAxis = new Charting.Axis();

kelvinAxis.minValue = -20 + 273.15;

kelvinAxis.maxValue = 50 + 273.15;

kelvinAxis.interval = 10;

kelvinAxis.title = "Kelvin";

var monthAxis = new Charting.Axis();

monthAxis.interval = 1;

monthAxis.minValue = 0;

monthAxis.maxValue = 13;

monthAxis.title = "";

var pascals = new Charting.Axis();

pascals.minValue = 90000;

pascals.maxValue = 106000;

pascals.interval = 2000;

pascals.title = "Pressure (Pa)";

plot.yAxis = celsiusAxis;

plot.xAxis = monthAxis;

lineRenderer.yAxis = annotationRenderer.yAxis = pascals;

// add legend

var legendRenderer = new Charting.LegendRenderer();

legendRenderer.content = new Collections.ObservableCollection([barRenderer, lineRenderer]);

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

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

legendRenderer.borderThickness = 1;

legendRenderer.margin = new Charting.Margins(10, 10, 10, 10);

legendRenderer.title = "Measurements";

dashboard.rootPanel.children.add(legendRenderer);

// create dashboard layout

var xAxisRenderer = new Charting.XAxisRenderer(monthAxis);

xAxisRenderer.labelsSource = plot;

dashboard.layoutBuilder.createAndAddPlotAndAxes(

plot, null,

[new Charting.YAxisRenderer(celsiusAxis),

new Charting.YAxisRenderer(fahrenheitAxis),

new Charting.YAxisRenderer(kelvinAxis)],

[ xAxisRenderer ],

[new Charting.YAxisRenderer(pascals)]);

dashboard.draw();