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

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

chartEl.width = chartEl.offsetParent.clientWidth;

chartEl.height = chartEl.offsetParent.clientHeight;

var barChart = new Controls.ChartBase(chartEl);

// intialize chart series

var series = new Collections.ObservableCollection();

var categories = [

{ name: "Server Nodes", data: [45, 78, 62, 85], labels: ["Node A", "Node B", "Node C", "Node D"] },

{ name: "Storage Units", data: [32, 55, 41, 68], labels: ["Unit 1", "Unit 2", "Unit 3", "Unit 4"] },

{ name: "Network Interfaces", data: [65, 42, 88, 73], labels: ["Eth0", "Eth1", "Eth2", "Eth3"] },

{ name: "Computer Accelleration", data: [92, 64, 75, 58], labels: ["GPU 0", "GPU 1", "GPU 2", "GPU 3"] }

];

for (var i = 0; i < categories.length; i++) {

var cat = categories[i];

var s = new Charting.BarSeries(

new Collections.List(cat.data),

new Collections.List(cat.labels),

null

);

s.supportedLabels = Charting.LabelKinds.InnerLabel;

series.add(s);

}

// initialize the group labels - annotations

var annotations = new Collections.ObservableCollection();

var groupNames = categories.map(c => c.name);

annotations.add(new Charting.BarSeries(

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

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

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

new Collections.List(groupNames)

));

// main grid

var mainGrid = new Components.GridPanel();

mainGrid.horizontalAlignment = Components.LayoutAlignment.Stretch;

mainGrid.verticalAlignment = Components.LayoutAlignment.Stretch;

// columns 0 auto width: Y-Axis; column 1 the plot

mainGrid.columns.add(new Components.GridColumn());

var plotColumn = new Components.GridColumn();

plotColumn.lengthType = Components.LengthType.Relative;

plotColumn.width = 100;

mainGrid.columns.add(plotColumn);

// row 0: the plot; row 1 auto height: X-Axis

var plotRow = new Components.GridRow();

plotRow.lengthType = Components.LengthType.Relative;

plotRow.height = 100;

mainGrid.rows.add(plotRow);

mainGrid.rows.add(new Components.GridRow());

barChart.rootPanel.children.add(mainGrid);

// chart plot

var plot1 = new Charting.Plot2D();

plot1.gridColumn = 1;

plot1.gridRow = 0;

plot1.xAxis = new Charting.Axis();

plot1.xAxis.title = "";

plot1.yAxis = new Charting.Axis();

plot1.yAxis.title = "";

plot1.yAxis.minValue = 0;

plot1.yAxis.maxValue = 100;

plot1.gridType = Charting.GridType.Horizontal;

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

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

mainGrid.children.add(plot1);

// renderers for the bars and the annotations

var barRenderer = new Charting.BarRenderer(series);

barRenderer.innerLabelRotation = 0;

plot1.seriesRenderers.add(barRenderer);

var annotationRenderer = new Charting.AnnotationRenderer(annotations);

plot1.seriesRenderers.add(annotationRenderer);

// renderers for the axes

var yAxis = new Charting.YAxisRenderer(plot1.yAxis, plot1.xAxis);

yAxis.plotLeftSide = true;

yAxis.gridColumn = 0;

yAxis.labelsSource = plot1;

mainGrid.children.add(yAxis);

var xAxis = new Charting.XAxisRenderer(plot1.xAxis);

xAxis.gridRow = 1;

xAxis.gridColumn = 1;

xAxis.labelsSource = plot1;

xAxis.showCoordinates = false;

mainGrid.children.add(xAxis);

// styling the theme

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

barChart.theme.plotBackground = new Drawing.Brush("#ffffff");

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

// assign brushes - one per series

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

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

new Drawing.Brush("#3f51b5"),

new Drawing.Brush("#ffa000"),

new Drawing.Brush("#ef5350")

]);

barChart.theme.uniformSeriesStroke = new Drawing.Brush("#ffffff");

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

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

barChart.draw();