/// <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.BubbleChart(chartEl);

// bubble chart requires three dimensional data;

// two dimensions for position and one for size

var series3D1 = new Charting.PointSeries3D(

new Collections.List

([

new Charting.Point3D(0.32, 81, 95),

new Charting.Point3D(0.39, 66, 78),

new Charting.Point3D(0.75, 65, 76),

new Charting.Point3D(0.49, 60, 71)

]),

new Collections.List(["Germany", "France", "UK", "Italy"]));

series3D1.title = "High Population Regions";

var series3D2 = new Charting.PointSeries3D(

new Collections.List

([

new Charting.Point3D(-0.28, 46, 54),

new Charting.Point3D(-0.32, 42, 50),

new Charting.Point3D(0.05, 38, 45),

new Charting.Point3D(-0.4, 19, 23)

]),

new Collections.List(["Spain", "Ukraine", "Poland", "Romania"]));

series3D2.title = "Standard Population Regions";

var data = new Collections.ObservableCollection();

data.add(series3D1);

data.add(series3D2);

chart.series = data;

// axis titles and ranges

chart.xAxis.title = "Annual Growth Rate (%)";

chart.xAxis.minValue = -1;

chart.xAxis.maxValue = 1;

chart.yAxis.title = "Projected Population (Millions)";

chart.yAxis.minValue = 0;

chart.yAxis.maxValue = 100;

// modern theme settings

chart.showZoomWidgets = true;

chart.gridType = Charting.GridType.Vertical;

chart.backColor = new Drawing.Color("#ffffff");

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

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

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

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

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

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

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

chart.chartPanel.margin = new Charting.Margins(10, 10, 10, 10);

// series colors

chart.theme.commonSeriesFills = new Collections.List([

new Drawing.Brush("rgba(38, 166, 154, 0.7)"), // Teal

new Drawing.Brush("rgba(63, 81, 181, 0.7)") // Indigo

]);

chart.theme.commonSeriesStrokes = new Collections.List([

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

new Drawing.Brush("#3f51b5")

]);

chart.theme.commonSeriesStrokeThicknesses = new Collections.List([1, 1]);

chart.theme.highlightStroke = new Drawing.Brush("#ffa000");

chart.theme.dataLabelsBrush = new Drawing.Brush("#37474f");

chart.theme.highlightStrokeDashStyle = Drawing.DashStyle.Solid;

chart.draw();

//handlers

(document.getElementById('chbShowScatter')).addEventListener("change", function()

{

chart.showScatter = !chart.showScatter;

});

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

chbShowDataLabels.addEventListener("change", function()

{

chart.showDataLabels = chbShowDataLabels.checked ? Charting.LabelKinds.All : Charting.LabelKinds.None;

chart.invalidate();

});

(document.getElementById('chbShowXTicks')).addEventListener("change", function()

{

chart.showXTicks = !chart.showXTicks;

});

(document.getElementById('chbShowYTicks')).addEventListener("change", function()

{

chart.showYTicks = !chart.showYTicks;

});

(document.getElementById('chbShowXCoords')).addEventListener("change", function()

{

chart.showXCoordinates = !chart.showXCoordinates;

});

(document.getElementById('chbShowYCoords')).addEventListener("change", function()

{

chart.showYCoordinates = !chart.showYCoordinates;

});

(document.getElementById('chbShowZoomWidgets')).addEventListener("change", function()

{

chart.showZoomWidgets = !chart.showZoomWidgets;

});

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

cbGridType.addEventListener("change", function()

{

chart.gridType = cbGridType.selectedIndex;

});

(document.getElementById('chbPinGrid')).addEventListener("change", function()

{

chart.pinGrid = !chart.pinGrid;

});

(document.getElementById('chbAllowPan')).addEventListener("change", function()

{

chart.allowPan = !chart.allowPan;

});

(document.getElementById('chbAllowMoveLegend')).addEventListener("change", function()

{

chart.allowMoveLegend = !chart.allowMoveLegend;

});

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

cbLegendHorAlign.addEventListener("change", function()

{

chart.legendHorizontalAlignment = cbLegendHorAlign.selectedIndex;

});

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

cbLegendVerAlign.addEventListener("change", function()

{

chart.legendVerticalAlignment = cbLegendVerAlign.selectedIndex;

});

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

tbLegendMarginLeft.addEventListener("change", function()

{

var margin = chart.legendMargin;

margin.left = parseInt(tbLegendMarginLeft.value);

chart.legendMargin = margin;

chart.invalidateLayout(chart.rootPanel);

chart.draw();

});

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

tbLegendMarginTop.addEventListener("change", function()

{

var margin = chart.legendMargin;

margin.top = parseInt(tbLegendMarginTop.value);

chart.legendMargin = margin;

chart.invalidateLayout(chart.rootPanel);

chart.draw();

});

(document.getElementById('chbShowLegend')).addEventListener("change", function()

{

chart.showLegend = !chart.showLegend;

});