/// <reference path="Scripts/jschart-vsdoc.js" />

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var ToolTip = Charting.ToolTip;

var chartEl = document.getElementById('barChart');

chartEl.width = chartEl.offsetParent.clientWidth;

chartEl.height = chartEl.offsetParent.clientHeight;

var chart = new Controls.BarChart(chartEl, Charting.BarLayout.Stack);

chart.horizontalBars = true;

chart.barSpacingRatio = 0.2;

chart.allowZoom = false;

chart.allowPan = false;

chart.innerLabelRotation = 0;

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

chart.title = "WHAT MATTERS WHEN YOU CHOOSE A NEW JOB?";

//legend

chart.legendMargin = new Charting.Margins(10, 10, 10, 10);

chart.showLegend = true;

chart.showLegendTitle = false;

// a custom series class

class SeriesWithLabels extends Charting.BarSeries {

constructor(barValues, innerLabels, yLabels) {

super(barValues, innerLabels, null, yLabels);

this._yLabels = yLabels;

this._innerLabels = innerLabels;

this._values = barValues;

}

getLabel(index, kind) {

if ((kind & Charting.LabelKinds.YAxisLabel) != 0 && this._yLabels)

return this._yLabels.item(index);

if ((kind & Charting.LabelKinds.InnerLabel) != 0 && this._innerLabels)

return this._innerLabels.item(index).toString();

if ((kind & Charting.LabelKinds.ToolTip) != 0)

return getPercentLabel(index, this);

return super.getLabel(index, kind);

}

}

function getPercentLabel(index, series) {

var val1 = series1.values.item(index);

var val2 = series2.values.item(index);

var val3 = series3.values.item(index);

var total = val1 + val2 + val3;

var current = series.values.item(index);

var result = (current / total) * 100;

return Number(result).toFixed(0) + "%";

}

var labels = new Collections.List([

"POSITION", "SALARY", "LOCATION", "COLLEAGUES", "WORKTIME"

]);

// series with the custom class

var series1 = new SeriesWithLabels(

new Collections.List([123, 212, 220, 115, 0.01]),

new Collections.List([123, 212, 220, 115, 0]),

labels

);

var series2 = new SeriesWithLabels(

new Collections.List([53, 132, 42, 105, 80]),

new Collections.List([53, 132, 42, 105, 80]),

null

);

var series3 = new SeriesWithLabels(

new Collections.List([224, 56, 138, 180, 320]),

new Collections.List([224, 56, 138, 180, 320]),

null

);

series1.supportedLabels = Charting.LabelKinds.YAxisLabel | Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip;

series2.supportedLabels = Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip;

series3.supportedLabels = Charting.LabelKinds.InnerLabel | Charting.LabelKinds.ToolTip;

var series = new Collections.ObservableCollection([series1, series2, series3]);

series.item(0).title = "CAREER START";

series.item(1).title = "MIDDLE OF CAREER";

series.item(2).title = "CAREER END";

chart.series = series;

// chart styling through the theme property

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

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

chart.theme.axisStroke = new Drawing.Brush("transparent");

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

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

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

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

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

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

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

chart.theme.highlightStrokeThickness = 3;

// style the tooltip

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

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

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

ToolTip.horizontalPadding = 12;

ToolTip.verticalPadding = 8;

// colour palette

var firstBrush = new Drawing.Brush("#26a69a"); // Teal

var secondBrush = new Drawing.Brush("#3f51b5"); // Indigo

var thirdBrush = new Drawing.Brush("#ffa000"); // Amber

chart.plot.seriesStyle = new Charting.PerSeriesStyle(

new Collections.List([firstBrush, secondBrush, thirdBrush]),

new Collections.List([firstBrush, secondBrush, thirdBrush]),

new Collections.List([1, 1, 1])

);

chart.showXCoordinates = false;

chart.showYCoordinates = false;

chart.showXTicks = false;

chart.showYTicks = false;

chart.xAxis.interval = 1;

chart.xAxis.title = "";

chart.yAxis.title = "";

chart.gridType = Charting.GridType.None;

chart.draw();