JavaScript-Chart-Samples/src/DynamicBarChart.js at master · MindFusionComponents/JavaScript-Chart-Samples · GitHub

History

131 lines (110 loc) · 4.05 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

/// <reference path="Scripts/MindFusion.Charting-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;

// Create the chart

var barChart = new Controls.BarChart(chartEl);

barChart.showToolTips = true;

barChart.showLegend = false;

// Clean, subtle grid lines

barChart.gridType = Charting.GridType.Horizontal;

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

barChart.theme.gridLineStyle = Drawing.DashStyle.Dash;

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

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

// Axis styling

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

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

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

// Sleek interactive highlight (Amber-500)

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

barChart.yAxis.minValue = 0;

barChart.yAxis.maxValue = 140;

barChart.yAxis.interval = 20;

barChart.xAxis.title = "";

barChart.xAxis.minValue = -1;

barChart.xAxis.maxValue = 5;

barChart.xAxis.interval = 1;

barChart.showXCoordinates = false;

barChart.yAxis.title = "Count";

// Modern Palette Array (Sky Blue, Indigo, Emerald, Slate, Teal, Amber, Violet, Cyan)

var brushes = new Collections.List([

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

new Drawing.Brush("#7274f3"),

new Drawing.Brush("#10B981"),

new Drawing.Brush("#97a3b4"),

new Drawing.Brush("#14B8A6"),

new Drawing.Brush("#F59E0B"),

new Drawing.Brush("#8B5CF6"),

new Drawing.Brush("#06B6D4")

]);

var strokes = new Collections.List([

new Drawing.Brush("#0284C7"),

new Drawing.Brush("#4F46E5"),

new Drawing.Brush("#059669"),

new Drawing.Brush("#7a899f"),

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

new Drawing.Brush("#D97706"),

new Drawing.Brush("#7C3AED"),

new Drawing.Brush("#0891B2")

]);

var seriesBrushes = new Collections.List();

seriesBrushes.add(brushes);

var seriesStrokes = new Collections.List();

seriesStrokes.add(strokes);

// Crisp, subtle 1px bar borders

var thicknesses = new Collections.List([1]);

var seriesThicknesses = new Collections.List();

seriesThicknesses.add(thicknesses);

barChart.theme.seriesFills = seriesBrushes;

barChart.theme.seriesStrokes = seriesStrokes;

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

readData();

function readData() {

loadJSON(function (response) {

var actual_JSON = JSON.parse(response);

var series = new Collections.ObservableCollection();

var selectedOptions = Array.from(periodControl.querySelectorAll("option:checked"), e => e.value);

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

var source = actual_JSON.months[selectedOptions[i]];

var dbs = new Charting.DataBoundSeries(source);

dbs.xDataField = "index";

dbs.yDataField = "value";

dbs.toolTipsDataField = "value";

dbs.innerLabelsDataField = "value";

if (i == 0)

dbs.xAxisLabelsDataField = "name";

series.add(dbs);

}

barChart.series = series;

barChart.invalidateLayout();

});

}

function loadJSON(callback) {

var xobj = new XMLHttpRequest();

xobj.overrideMimeType("application/json");

xobj.open('GET', 'data.json', true);

xobj.onload = function () {

if (xobj.readyState === 4 && xobj.status === 200) {

callback(xobj.responseText);

}

};

xobj.send(null);

}

var periodControl = document.getElementById('period');

periodControl.selectedIndex = 0;

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

readData();

});

JavaScript-Chart-Samples/src/DynamicBarChart.js at master · MindFusionComponents/JavaScript-Chart-Samples · GitHub

Expand file tree

Breadcrumbs

DynamicBarChart.js

Latest commit

History

Breadcrumbs

DynamicBarChart.js

File metadata and controls