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

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var ToolTip = Charting.ToolTip;

// create the funnel chart js object

var funnelhartEl = document.getElementById('funnelChart');

funnelhartEl.width = funnelhartEl.offsetParent.clientWidth;

funnelhartEl.height = funnelhartEl.offsetParent.clientHeight;

var funnelChart = new Controls.FunnelChart(funnelhartEl);

// sample data for the sales

var values = new Collections.List([70, 60, 50, 30, 20, 15, 10, 4]);

var labels = new Collections.List([

"Prospects", "Leads", "Meeting", "Eval",

"Negotiation", "Order", "Delivery", "Payment"

]);

funnelChart.series = new Charting.SimpleSeries(values, labels);

// initialize colours

var brushes = new Collections.List([

new Drawing.Brush("#4db6ac"), // Medium Teal

new Drawing.Brush("#80cbc4"), // Light Teal

new Drawing.Brush("#7986cb"), // Medium Indigo

new Drawing.Brush("#9fa8da"), // Light Indigo

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

new Drawing.Brush("#ffb300"),

new Drawing.Brush("#ef5350"), // Red

new Drawing.Brush("#e53935")

]);

var seriesBrushes = new Collections.List([brushes]);

var seriesStrokes = new Collections.List([new Collections.List([new Drawing.Brush("#ffffff")])]);

var seriesThicknesses = new Collections.List([new Collections.List([2])]);

funnelChart.plot.seriesStyle = new Charting.PerElementSeriesStyle(seriesBrushes, seriesStrokes, seriesThicknesses);

// styling the labels

funnelChart.theme.dataLabelsBrush = new Drawing.Brush("#455a64");

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

// custom legend

var seriesList = new Collections.ObservableCollection();

var stageStats = [

{ name: "Prospects", val: "70K", pct: "100%" },

{ name: "Leads", val: "60K", pct: "85.7%" },

{ name: "Meeting", val: "50K", pct: "71.4%" },

{ name: "Eval", val: "30K", pct: "42.9%" },

{ name: "Negotiation", val: "20K", pct: "28.6%" },

{ name: "Order", val: "15K", pct: "21.4%" },

{ name: "Delivery", val: "10K", pct: "14.3%" },

{ name: "Payment", val: "4K", pct: "5.7%" }

];

stageStats.forEach(stat => {

var s = new Charting.SimpleSeries(null, null);

s.title = stat.name + ": " + stat.val + " (" + stat.pct + ")";

seriesList.add(s);

});

var legendBarRenderer = new Charting.BarRenderer(seriesList);

legendBarRenderer.seriesStyle = new Charting.PerSeriesStyle(brushes);

funnelChart.legendRenderer.content.clear();

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

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

funnelChart.legendRenderer.title = "Process Metrics";

funnelChart.legendRenderer.titleBrush = new Drawing.Brush("#263238");

funnelChart.legendRenderer.showSeriesElements = false;

funnelChart.legendRenderer.content.add(legendBarRenderer);

funnelChart.legendVerticalAlignment = Charting.Components.LayoutAlignment.Far;

// customize the tooltip appearance

ToolTip.brush = new Drawing.Brush("#263238");

ToolTip.pen = new Drawing.Pen("#37474f");

ToolTip.textBrush = new Drawing.Brush("#ffffff");

ToolTip.horizontalPadding = 2;

ToolTip.verticalPadding = 2;

funnelChart.draw();

// chart handlers

document.getElementById('showDataLabels').addEventListener("change", function() {

funnelChart.showDataLabels = this.checked ? Charting.LabelKinds.All : Charting.LabelKinds.None;

funnelChart.draw();

});

document.getElementById('segmentSpacing').addEventListener("input", function() {

funnelChart.segmentSpacing = parseFloat(this.value);

funnelChart.draw();

});

document.getElementById('stemWidth').addEventListener("input", function() {

funnelChart.stemWidth = parseFloat(this.value) / 100.0;

funnelChart.draw();

});

document.getElementById('marginLeft').addEventListener("input", function() {

funnelChart.plot.margin = new Charting.Margins(parseFloat(this.value), funnelChart.plot.margin.top, 0, 0);

funnelChart.draw();

});

document.getElementById('marginTop').addEventListener("input", function() {

funnelChart.plot.margin = new Charting.Margins(funnelChart.plot.margin.left, parseFloat(this.value), 0, 0);

funnelChart.draw();

});

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

funnelChart.showLegend = this.checked;

funnelChart.draw();

});

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

funnelChart.allowMoveLegend = this.checked;

funnelChart.draw();

});

document.getElementById('cbLegendHorAlign').addEventListener("change", function() {

funnelChart.legendHorizontalAlignment = this.selectedIndex;

funnelChart.draw();

});

document.getElementById('cbLegendVerAlign').addEventListener("change", function() {

funnelChart.legendVerticalAlignment = this.selectedIndex;

funnelChart.draw();

});

document.getElementById('tbLegendMarginLeft').addEventListener("input", function() {

var margin = funnelChart.legendMargin;

margin.left = parseInt(this.value);

funnelChart.legendMargin = margin;

funnelChart.invalidateLayout(funnelChart.rootPanel);

funnelChart.draw();

});

document.getElementById('tbLegendMarginTop').addEventListener("input", function() {

var margin = funnelChart.legendMargin;

margin.top = parseInt(this.value);

funnelChart.legendMargin = margin;

funnelChart.invalidateLayout(funnelChart.rootPanel);

funnelChart.draw();

});