/// <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);

var collection = new Collections.ObservableCollection();

// create data series for the chart using the custom BranchSeries class defined in Branch.js

collection.add(new BranchSeries([

new Branch("London", 120, 450, 75),

new Branch("Paris", 85, 320, 68),

new Branch("Berlin", 110, 390, 82),

new Branch("Madrid", 65, 210, 55)

]));

// more BranchSeries instances

collection.add(new BranchSeries([

new Branch("New York", 240, 850, 95),

new Branch("Tokyo", 190, 620, 92),

new Branch("Singapore", 130, 410, 88)

]));

chart.series = collection;

// appearance settings using the theme property

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

chart.title = "Operational Efficiency by Branch";

chart.titlePanel.margin = new Charting.Margins(0, 10, 0, 20);

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

chart.xAxis.minValue = 0;

chart.xAxis.maxValue = 300;

chart.xAxis.title = "Headcount (Total Employees)";

chart.yAxis.minValue = 0;

chart.yAxis.maxValue = 1000;

chart.yAxis.title = "Monthly Operational Cost ($k)";

// brushes for the chart - one per series

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.legendHorizontalAlignment = MindFusion.Charting.Components.LayoutAlignment.Far;

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

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

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

chart.legendTitle = "Status";

chart.allowMoveLegend = false;

chart.gridType = Charting.GridType.Horizontal;

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

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

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

chart.draw();