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

var Charting = MindFusion.Charting;

var Controls = Charting.Controls;

var Collections = MindFusion.Common.Collections;

var Drawing = MindFusion.Drawing;

var ToolTip = Charting.ToolTip;

var StudentData = (function () {

function StudentData(subject, gpa1, gpa2, gpa3) {

this.Subject = subject;

this.GPA1 = gpa1;

this.GPA2 = gpa2;

this.GPA3 = gpa3;

}

return StudentData;

})();

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

chartEl.width = chartEl.offsetParent.clientWidth;

chartEl.height = chartEl.offsetParent.clientHeight;

// Create the chart

var radarChart = new Controls.RadarChart(chartEl);

var plot = radarChart.plot;

// Create sample data

var data = createData();

for (var i = 0; i < 5; i++) {

var axis = new Charting.Axis();

axis.title = data.item(i).Subject;

axis.minValue = 0;

axis.maxValue = 4;

plot.axes.add(axis);

}

// Set data source and fields

radarChart.xDataFields = radarChart.yDataFields = new Collections.ObservableCollection(["GPA1", "GPA2", "GPA3"]);

radarChart.innerLabelsDataFields = new Collections.ObservableCollection(["GPA1", "GPA2", "GPA3"]);

radarChart.toolTipsDataFields = new Collections.ObservableCollection(["Subject", "Subject", "Subject"]);

radarChart.dataSource = data;

radarChart.dataBind();

// Set series titles

(radarChart.series.item(0)).title = "Age range 7-10";

(radarChart.series.item(1)).title = "Age range 11-13";

(radarChart.series.item(2)).title = "Age range 14-17";

// Set up legend

radarChart.legendTitle = "GPA by Subject and Age";

radarChart.theme.legendBackground = new Drawing.Brush('transparent');

radarChart.theme.legendTitleBrush = new Drawing.Brush("#0F172A");

radarChart.allowMoveLegend = false;

// Appearance & Grid Colors

radarChart.showCoordinates = false;

radarChart.plot.margin = new Charting.Margins(0, 0, 0, 30);

radarChart.backColor = new Drawing.Color("#FFFFFF");

radarChart.gridColor1 = new Drawing.Color("#F8FAFC");

radarChart.gridColor2 = new Drawing.Color("#FFFFFF");

radarChart.theme.gridLineColor = new Drawing.Color("#E2E8F0");

radarChart.theme.axisStroke = new Drawing.Brush("#CBD5E1");

radarChart.theme.highlightStroke = new Drawing.Brush("#F59E0B");

radarChart.theme.legendTitleFontStyle = Drawing.FontStyle.Bold;

radarChart.theme.axisLabelsBrush = new Drawing.Brush("#64748B");

radarChart.theme.axisTitleBrush = new Drawing.Brush("#334155");

radarChart.theme.dataLabelsBrush = new Drawing.Brush("#0F172A");

// Semi-transparent fills and clean 2px strokes

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

new Drawing.Brush("rgba(14, 165, 233, 0.35)"), // Sky Blue

new Drawing.Brush("rgba(99, 102, 241, 0.35)"), // Indigo

new Drawing.Brush("rgba(16, 185, 129, 0.35)") // Emerald

]);

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

new Drawing.Brush("#0EA5E9"),

new Drawing.Brush("#6366F1"),

new Drawing.Brush("#10B981")

]);

radarChart.theme.uniformSeriesStrokeThickness = 3;

// Tooltips

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

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

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

ToolTip.horizontalPadding = 8;

ToolTip.verticalPadding = 5;

ToolTip.horizontalOffset = -6;

ToolTip.verticalOffset = -4;

function createData() {

var data = new Collections.List();

var subjects = new Array("Math", "Physics", "Chemistry", "Biology", "IT");

var gpa1 = new Array(2.3, 1.7, 2, 4, 3.7);

var gpa2 = new Array(3.3, 2.7, 1.7, 2, 3.3);

var gpa3 = new Array(4, 3.7, 2, 1, 1.3);

for (var i = 0; i < 5; i++)

data.add(new StudentData(subjects[i], gpa1[i], gpa2[i], gpa3[i]));

return data;

}

// Control Event Handlers

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

radarType.selectedIndex = radarChart.radarType;

radarType.addEventListener("change", function () {

radarChart.radarType = radarType.selectedIndex;

});

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

gridType.selectedIndex = radarChart.gridType;

gridType.addEventListener("change", function () {

radarChart.gridType = gridType.selectedIndex;

});

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

radarChart.showScatter = !radarChart.showScatter;

});

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

areaOpacity.valueAsNumber = radarChart.areaOpacity * 10;

areaOpacity.addEventListener("change", function () {

radarChart.areaOpacity = areaOpacity.valueAsNumber / 10;

radarChart.draw();

});