1026 lines
22 KiB
JavaScript
1026 lines
22 KiB
JavaScript
/*
|
|
Name: UI Elements / Charts - Examples
|
|
Written by: Okler Themes - (http://www.okler.net)
|
|
Theme Version: 2.1.1
|
|
*/
|
|
|
|
(function($) {
|
|
|
|
'use strict';
|
|
|
|
/*
|
|
Flot: Basic
|
|
*/
|
|
(function() {
|
|
if( $('#flotBasic').get(0) ) {
|
|
var plot = $.plot('#flotBasic', flotBasicData, {
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
fill: true,
|
|
lineWidth: 1,
|
|
fillColor: {
|
|
colors: [{
|
|
opacity: 0.45
|
|
}, {
|
|
opacity: 0.45
|
|
}]
|
|
}
|
|
},
|
|
points: {
|
|
show: true
|
|
},
|
|
shadowSize: 0
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderColor: 'rgba(0,0,0,0.1)',
|
|
borderWidth: 1,
|
|
labelMargin: 15,
|
|
backgroundColor: 'transparent'
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 200,
|
|
color: 'rgba(0,0,0,0.1)'
|
|
},
|
|
xaxis: {
|
|
color: 'rgba(0,0,0,0.1)'
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: '%s: Value of %x is %y',
|
|
shifts: {
|
|
x: -60,
|
|
y: 25
|
|
},
|
|
defaultTheme: false
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Flot: Real-Time
|
|
*/
|
|
var data = [],
|
|
totalPoints = 300;
|
|
|
|
function getRandomData() {
|
|
if( $('#flotRealTime').get(0) ) {
|
|
if (data.length > 0)
|
|
data = data.slice(1);
|
|
|
|
// Do a random walk
|
|
while (data.length < totalPoints) {
|
|
|
|
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
|
y = prev + Math.random() * 10 - 5;
|
|
|
|
if (y < 0) {
|
|
y = 0;
|
|
} else if (y > 100) {
|
|
y = 100;
|
|
}
|
|
|
|
data.push(y);
|
|
}
|
|
|
|
// Zip the generated y values with the x values
|
|
var res = [];
|
|
for (var i = 0; i < data.length; ++i) {
|
|
res.push([i, data[i]])
|
|
}
|
|
|
|
return res;
|
|
}
|
|
}
|
|
|
|
if( $('#flotRealTime').get(0) ) {
|
|
var plot = $.plot('#flotRealTime', [getRandomData()], {
|
|
colors: ['#8CC9E8'],
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
fill: true,
|
|
lineWidth: 1,
|
|
fillColor: {
|
|
colors: [{
|
|
opacity: 0.45
|
|
}, {
|
|
opacity: 0.45
|
|
}]
|
|
}
|
|
},
|
|
points: {
|
|
show: false
|
|
},
|
|
shadowSize: 0
|
|
},
|
|
grid: {
|
|
borderColor: 'rgba(0,0,0,0.1)',
|
|
borderWidth: 1,
|
|
labelMargin: 15,
|
|
backgroundColor: 'transparent'
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 100,
|
|
color: 'rgba(0,0,0,0.1)'
|
|
},
|
|
xaxis: {
|
|
show: false
|
|
}
|
|
});
|
|
}
|
|
|
|
function update() {
|
|
if( $('#flotRealTime').get(0) ) {
|
|
plot.setData([getRandomData()]);
|
|
|
|
// Since the axes don't change, we don't need to call plot.setupGrid()
|
|
plot.draw();
|
|
setTimeout(update, $( 'html' ).hasClass( 'mobile-device' ) ? 1000 : 30 );
|
|
}
|
|
}
|
|
update();
|
|
|
|
/*
|
|
Flot: Bars
|
|
*/
|
|
(function() {
|
|
if( $('#flotBars').get(0) ) {
|
|
var plot = $.plot('#flotBars', [flotBarsData], {
|
|
colors: ['#8CC9E8'],
|
|
series: {
|
|
bars: {
|
|
show: true,
|
|
barWidth: 0.8,
|
|
align: 'center'
|
|
}
|
|
},
|
|
xaxis: {
|
|
mode: 'categories',
|
|
tickLength: 0
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true,
|
|
borderColor: 'rgba(0,0,0,0.1)',
|
|
borderWidth: 1,
|
|
labelMargin: 15,
|
|
backgroundColor: 'transparent'
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: '%y',
|
|
shifts: {
|
|
x: -10,
|
|
y: 20
|
|
},
|
|
defaultTheme: false
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Flot: Pie
|
|
*/
|
|
(function() {
|
|
if( $('#flotPie').get(0) ) {
|
|
var plot = $.plot('#flotPie', flotPieData, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
combine: {
|
|
color: '#999',
|
|
threshold: 0.1
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
|
|
/*
|
|
Morris: Line
|
|
*/
|
|
if( $('#morrisLine').get(0) ) {
|
|
Morris.Line({
|
|
resize: true,
|
|
element: 'morrisLine',
|
|
data: morrisLineData,
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
hideHover: true,
|
|
lineColors: ['#0088cc', '#734ba9'],
|
|
});
|
|
}
|
|
|
|
/*
|
|
Morris: Donut
|
|
*/
|
|
if( $('#morrisDonut').get(0) ) {
|
|
Morris.Donut({
|
|
resize: true,
|
|
element: 'morrisDonut',
|
|
data: morrisDonutData,
|
|
colors: ['#0088cc', '#734ba9', '#E36159']
|
|
});
|
|
}
|
|
|
|
/*
|
|
Morris: Bar
|
|
*/
|
|
if( $('#morrisBar').get(0) ) {
|
|
Morris.Bar({
|
|
resize: true,
|
|
element: 'morrisBar',
|
|
data: morrisBarData,
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
hideHover: true,
|
|
barColors: ['#0088cc', '#2baab1']
|
|
});
|
|
}
|
|
|
|
/*
|
|
Morris: Area
|
|
*/
|
|
if( $('#morrisArea').get(0) ) {
|
|
Morris.Area({
|
|
resize: true,
|
|
element: 'morrisArea',
|
|
data: morrisAreaData,
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
lineColors: ['#0088cc', '#2baab1'],
|
|
fillOpacity: 0.7,
|
|
hideHover: true
|
|
});
|
|
}
|
|
|
|
/*
|
|
Morris: Stacked
|
|
*/
|
|
if( $('#morrisStacked').get(0) ) {
|
|
Morris.Bar({
|
|
resize: true,
|
|
element: 'morrisStacked',
|
|
data: morrisStackedData,
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
barColors: ['#0088cc', '#2baab1'],
|
|
fillOpacity: 0.7,
|
|
smooth: false,
|
|
stacked: true,
|
|
hideHover: true
|
|
});
|
|
}
|
|
|
|
/*
|
|
Gauge: Basic
|
|
*/
|
|
(function() {
|
|
if( $('#gaugeBasic').get(0) ) {
|
|
var target = $('#gaugeBasic'),
|
|
opts = $.extend(true, {}, {
|
|
lines: 12, // The number of lines to draw
|
|
angle: 0.12, // The length of each line
|
|
lineWidth: 0.5, // The line thickness
|
|
pointer: {
|
|
length: 0.7, // The radius of the inner circle
|
|
strokeWidth: 0.05, // The rotation offset
|
|
color: '#444' // Fill color
|
|
},
|
|
limitMax: 'true', // If true, the pointer will not go past the end of the gauge
|
|
colorStart: '#0088CC', // Colors
|
|
colorStop: '#0088CC', // just experiment with them
|
|
strokeColor: '#F1F1F1', // to see which ones work best for you
|
|
generateGradient: true
|
|
}, target.data('plugin-options'));
|
|
|
|
var gauge = new Gauge(target.get(0)).setOptions(opts);
|
|
|
|
gauge.maxValue = opts.maxValue; // set max gauge value
|
|
gauge.animationSpeed = 32; // set animation speed (32 is default value)
|
|
gauge.set(opts.value); // set actual value
|
|
gauge.setTextField(document.getElementById("gaugeBasicTextfield"));
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Gauge: Alternative
|
|
*/
|
|
(function() {
|
|
if( $('#gaugeAlternative').get(0) ) {
|
|
var target = $('#gaugeAlternative'),
|
|
opts = $.extend(true, {}, {
|
|
lines: 12, // The number of lines to draw
|
|
angle: 0.12, // The length of each line
|
|
lineWidth: 0.5, // The line thickness
|
|
pointer: {
|
|
length: 0.7, // The radius of the inner circle
|
|
strokeWidth: 0.05, // The rotation offset
|
|
color: '#444' // Fill color
|
|
},
|
|
limitMax: 'true', // If true, the pointer will not go past the end of the gauge
|
|
colorStart: '#2BAAB1', // Colors
|
|
colorStop: '#2BAAB1', // just experiment with them
|
|
strokeColor: '#F1F1F1', // to see which ones work best for you
|
|
generateGradient: true
|
|
}, target.data('plugin-options'));
|
|
|
|
var gauge = new Gauge(target.get(0)).setOptions(opts);
|
|
|
|
gauge.maxValue = opts.maxValue; // set max gauge value
|
|
gauge.animationSpeed = 32; // set animation speed (32 is default value)
|
|
gauge.set(opts.value); // set actual value
|
|
gauge.setTextField(document.getElementById("gaugeAlternativeTextfield"));
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Liquid Meter
|
|
*/
|
|
if( $('#meter').get(0) ) {
|
|
$('#meter').liquidMeter({
|
|
shape: 'circle',
|
|
color: '#0088CC',
|
|
background: '#F9F9F9',
|
|
fontSize: '24px',
|
|
fontWeight: '600',
|
|
stroke: '#F2F2F2',
|
|
textColor: '#333',
|
|
liquidOpacity: 0.9,
|
|
liquidPalette: ['#333'],
|
|
speed: 3000,
|
|
animate: !$.browser.mobile
|
|
});
|
|
}
|
|
|
|
/*
|
|
Liquid Meter Dark
|
|
*/
|
|
if( $('#meterDark').get(0) ) {
|
|
$('#meterDark').liquidMeter({
|
|
shape: 'circle',
|
|
color: '#0088CC',
|
|
background: '#272A31',
|
|
stroke: '#33363F',
|
|
fontSize: '24px',
|
|
fontWeight: '600',
|
|
textColor: '#FFFFFF',
|
|
liquidOpacity: 0.9,
|
|
liquidPalette: ['#0088CC'],
|
|
speed: 3000,
|
|
animate: !$.browser.mobile
|
|
});
|
|
}
|
|
|
|
|
|
if( $('#meter, #meterDark').get(0) ) {
|
|
$(this).on("styleSwitcher.modifyVars", function(ev) {
|
|
$('#meter, #meterDark').liquidMeter('color', ev.options.colorPrimary)
|
|
});
|
|
|
|
if (typeof($.browser) != 'undefined') {
|
|
if($.browser.mobile) {
|
|
$('#meter, #meterDark').liquidMeter('color', '#0088cc');
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
Sparkline: Line
|
|
*/
|
|
if( $('#sparklineLine').get(0) ) {
|
|
$("#sparklineLine").sparkline(sparklineLineData, {
|
|
type: 'line',
|
|
width: '80',
|
|
height: '30',
|
|
lineColor: '#0088cc'
|
|
});
|
|
}
|
|
|
|
/*
|
|
Sparkline: Bar
|
|
*/
|
|
if( $('#sparklineBar').get(0) ) {
|
|
$("#sparklineBar").sparkline(sparklineBarData, {
|
|
type: 'bar',
|
|
width: '80',
|
|
height: '30',
|
|
barColor: '#0088cc',
|
|
negBarColor: '#B20000'
|
|
});
|
|
}
|
|
|
|
/*
|
|
Sparkline: Tristate
|
|
*/
|
|
if( $('#sparklineTristate').get(0) ) {
|
|
$("#sparklineTristate").sparkline(sparklineTristateData, {
|
|
type: 'tristate',
|
|
width: '80',
|
|
height: '30',
|
|
posBarColor: '#0088cc',
|
|
negBarColor: '#B20000'
|
|
});
|
|
}
|
|
|
|
/*
|
|
Sparkline: Discrete
|
|
*/
|
|
if( $('#sparklineDiscrete').get(0) ) {
|
|
$("#sparklineDiscrete").sparkline(sparklineDiscreteData, {
|
|
type: 'discrete',
|
|
width: '80',
|
|
height: '30',
|
|
lineColor: '#0088cc'
|
|
});
|
|
}
|
|
|
|
/*
|
|
Sparkline: Bullet
|
|
*/
|
|
if( $('#sparklineBullet').get(0) ) {
|
|
$("#sparklineBullet").sparkline(sparklineBulletData, {
|
|
type: 'bullet',
|
|
width: '80',
|
|
height: '30',
|
|
targetColor: '#ff7f00',
|
|
performanceColor: '#0088cc'
|
|
});
|
|
}
|
|
|
|
/*
|
|
Sparkline: Pie
|
|
*/
|
|
if( $('#sparklinePie').get(0) ) {
|
|
$("#sparklinePie").sparkline(sparklinePieData, {
|
|
type: 'pie',
|
|
height: '30',
|
|
barColor: '#0088cc'
|
|
});
|
|
}
|
|
|
|
/*
|
|
Chartist: Line Chart - Simple Chart
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistSimpleLineChart').get(0) ) {
|
|
new Chartist.Line('#ChartistSimpleLineChart', {
|
|
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
|
series: [
|
|
[12, 9, 7, 8, 5],
|
|
[2, 1, 3.5, 7, 3],
|
|
[1, 3, 4, 5, 6]
|
|
]
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Line Chart - Scatter Diagram With Responsive Settings
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistLineScatterDiagramWithResponsiveSettings').get(0) ) {
|
|
var times = function(n) {
|
|
return Array.apply(null, new Array(n));
|
|
};
|
|
|
|
var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
|
|
data.labels.push(index + 1);
|
|
data.series.forEach(function(series) {
|
|
series.push(Math.random() * 100)
|
|
});
|
|
|
|
return data;
|
|
}, {
|
|
labels: [],
|
|
series: times(4).map(function() {
|
|
return new Array()
|
|
})
|
|
});
|
|
|
|
var options = {
|
|
showLine: false,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value, index) {
|
|
return index % 13 === 0 ? 'W' + value : null;
|
|
}
|
|
}
|
|
};
|
|
|
|
var responsiveOptions = [
|
|
['screen and (min-width: 640px)', {
|
|
axisX: {
|
|
labelInterpolationFnc: function(value, index) {
|
|
return index % 4 === 0 ? 'W' + value : null;
|
|
}
|
|
}
|
|
}]
|
|
];
|
|
|
|
new Chartist.Line('#ChartistLineScatterDiagramWithResponsiveSettings', data, options, responsiveOptions);
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Line Chart - With Tooltips
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistLineChartWithTooltips').get(0) ) {
|
|
new Chartist.Line('#ChartistLineChartWithTooltips', {
|
|
labels: ['1', '2', '3', '4', '5', '6'],
|
|
series: [{
|
|
name: 'Fibonacci sequence',
|
|
data: [1, 2, 3, 5, 8, 13]
|
|
}, {
|
|
name: 'Golden section',
|
|
data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
|
|
}]
|
|
});
|
|
|
|
var $chart = $('#ChartistLineChartWithTooltips');
|
|
|
|
var $toolTip = $chart
|
|
.append('<div class="tooltip"></div>')
|
|
.find('.tooltip')
|
|
.hide();
|
|
|
|
$chart.on('mouseenter', '.ct-point', function() {
|
|
var $point = $(this),
|
|
value = $point.attr('ct:value'),
|
|
seriesName = $point.parent().attr('ct:series-name');
|
|
$toolTip.html(seriesName + '<br>' + value).show();
|
|
});
|
|
|
|
$chart.on('mouseleave', '.ct-point', function() {
|
|
$toolTip.hide();
|
|
});
|
|
|
|
$chart.on('mousemove', function(event) {
|
|
$toolTip.css({
|
|
left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
|
|
top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
|
|
});
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Line Chart - With Area
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistLineChartWithArea').get(0) ) {
|
|
new Chartist.Line('#ChartistLineChartWithArea', {
|
|
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
|
series: [
|
|
[5, 9, 7, 8, 5, 3, 5, 4]
|
|
]
|
|
}, {
|
|
low: 0,
|
|
showArea: true
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Line Chart - Bi-Polar Chart With Area Only
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistBiPolarLineChartWithAreaOnly').get(0) ) {
|
|
new Chartist.Line('#ChartistBiPolarLineChartWithAreaOnly', {
|
|
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
|
series: [
|
|
[1, 2, 3, 1, -2, 0, 1, 0],
|
|
[-2, -1, -2, -1, -2.5, -1, -2, -1],
|
|
[0, 0, 0, 1, 2, 2.5, 2, 1],
|
|
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
|
|
]
|
|
}, {
|
|
high: 3,
|
|
low: -3,
|
|
showArea: true,
|
|
showLine: false,
|
|
showPoint: false,
|
|
fullWidth: true,
|
|
axisX: {
|
|
showLabel: false,
|
|
showGrid: false
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Line Chart - Using Events to Replace Graphics
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistEventsToReplaceGraphics').get(0) ) {
|
|
var chart = new Chartist.Line('#ChartistEventsToReplaceGraphics', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [
|
|
[12, 9, 7, 8, 5]
|
|
]
|
|
});
|
|
|
|
// Listening for draw events that get emitted by the Chartist chart
|
|
chart.on('draw', function(data) {
|
|
// If the draw event was triggered from drawing a point on the line chart
|
|
if (data.type === 'point') {
|
|
// We are creating a new path SVG element that draws a triangle around the point coordinates
|
|
var triangle = new Chartist.Svg('path', {
|
|
d: ['M',
|
|
data.x,
|
|
data.y - 15,
|
|
'L',
|
|
data.x - 15,
|
|
data.y + 8,
|
|
'L',
|
|
data.x + 15,
|
|
data.y + 8,
|
|
'z'
|
|
].join(' '),
|
|
style: 'fill-opacity: 1'
|
|
}, 'ct-area');
|
|
|
|
// With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
|
|
data.element.replace(triangle);
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Line Chart - Interpolation / Smoothing
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistLineInterpolationSmoothing').get(0) ) {
|
|
var chart = new Chartist.Line('#ChartistLineInterpolationSmoothing', {
|
|
labels: [1, 2, 3, 4, 5],
|
|
series: [
|
|
[1, 5, 10, 0, 1, 2],
|
|
[10, 15, 0, 1, 2, 3]
|
|
]
|
|
}, {
|
|
// Remove this configuration to see that chart rendered with cardinal spline interpolation
|
|
// Sometimes, on large jumps in data values, it's better to use simple smoothing.
|
|
lineSmooth: Chartist.Interpolation.simple({
|
|
divisor: 2
|
|
}),
|
|
fullWidth: true,
|
|
low: 0
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Bar Chart - Bi-Polar Chart
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistBiPolarBarChart').get(0) ) {
|
|
var data = {
|
|
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
|
|
series: [
|
|
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
|
|
]
|
|
};
|
|
|
|
var options = {
|
|
high: 10,
|
|
low: -10,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value, index) {
|
|
return index % 2 === 0 ? value : null;
|
|
}
|
|
}
|
|
};
|
|
|
|
new Chartist.Bar('#ChartistBiPolarBarChart', data, options);
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Bar Chart - Overlapping On Mobile
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistOverlappingBarsOnMobile').get(0) ) {
|
|
var data = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
series: [
|
|
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
|
|
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
|
|
]
|
|
};
|
|
|
|
var options = {
|
|
seriesBarDistance: 10
|
|
};
|
|
|
|
var responsiveOptions = [
|
|
['screen and (max-width: 640px)', {
|
|
seriesBarDistance: 5,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value) {
|
|
return value[0];
|
|
}
|
|
}
|
|
}]
|
|
];
|
|
|
|
new Chartist.Bar('#ChartistOverlappingBarsOnMobile', data, options, responsiveOptions);
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Bar Chart - Add Peak Circles Using Draw Events
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistAddPeakCirclesUsingDrawEvents').get(0) ) {
|
|
// Create a simple bi-polar bar chart
|
|
var chart = new Chartist.Bar('#ChartistAddPeakCirclesUsingDrawEvents', {
|
|
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
|
|
series: [
|
|
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
|
|
]
|
|
}, {
|
|
high: 10,
|
|
low: -10,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value, index) {
|
|
return index % 2 === 0 ? value : null;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Listen for draw events on the bar chart
|
|
chart.on('draw', function(data) {
|
|
// If this draw event is of type bar we can use the data to create additional content
|
|
if (data.type === 'bar') {
|
|
// We use the group element of the current series to append a simple circle with the bar peek coordinates and a circle radius that is depending on the value
|
|
data.group.append(new Chartist.Svg('circle', {
|
|
cx: data.x2,
|
|
cy: data.y2,
|
|
r: Math.abs(Chartist.getMultiValue(data.value)) * 2 + 5
|
|
}, 'ct-slice-pie'));
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Bar Chart - Multi-Line Labels
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistMultiLineLabels').get(0) ) {
|
|
new Chartist.Bar('#ChartistMultiLineLabels', {
|
|
labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
|
|
series: [
|
|
[60000, 40000, 80000, 70000],
|
|
[40000, 30000, 70000, 65000],
|
|
[8000, 3000, 10000, 6000]
|
|
]
|
|
}, {
|
|
seriesBarDistance: 10,
|
|
axisX: {
|
|
offset: 60
|
|
},
|
|
axisY: {
|
|
offset: 80,
|
|
labelInterpolationFnc: function(value) {
|
|
return value + ' CHF'
|
|
},
|
|
scaleMinSpace: 15
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Bar Chart - Stacked Chart
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistStackedChart').get(0) ) {
|
|
new Chartist.Bar('#ChartistStackedChart', {
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
|
series: [
|
|
[800000, 1200000, 1400000, 1300000],
|
|
[200000, 400000, 500000, 300000],
|
|
[100000, 200000, 400000, 600000]
|
|
]
|
|
}, {
|
|
stackBars: true,
|
|
axisY: {
|
|
labelInterpolationFnc: function(value) {
|
|
return (value / 1000) + 'k';
|
|
}
|
|
}
|
|
}).on('draw', function(data) {
|
|
if (data.type === 'bar') {
|
|
data.element.attr({
|
|
style: 'stroke-width: 30px'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Bar Chart - Horizontal Chart
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistHorizontalChart').get(0) ) {
|
|
new Chartist.Bar('#ChartistHorizontalChart', {
|
|
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
|
series: [
|
|
[5, 4, 3, 7, 5, 10, 3],
|
|
[3, 2, 9, 5, 4, 6, 4]
|
|
]
|
|
}, {
|
|
seriesBarDistance: 10,
|
|
reverseData: true,
|
|
horizontalBars: true,
|
|
axisY: {
|
|
offset: 70
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist:
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistExtremeResponsiveConfiguration').get(0) ) {
|
|
new Chartist.Bar('#ChartistExtremeResponsiveConfiguration', {
|
|
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
|
|
series: [
|
|
[5, 4, 3, 7],
|
|
[3, 2, 9, 5],
|
|
[1, 5, 8, 4],
|
|
[2, 3, 4, 6],
|
|
[4, 1, 2, 1]
|
|
]
|
|
}, {
|
|
// Default mobile configuration
|
|
stackBars: true,
|
|
axisX: {
|
|
labelInterpolationFnc: function(value) {
|
|
return value.split(/\s+/).map(function(word) {
|
|
return word[0];
|
|
}).join('');
|
|
}
|
|
},
|
|
axisY: {
|
|
offset: 20
|
|
}
|
|
}, [
|
|
// Options override for media > 400px
|
|
['screen and (min-width: 400px)', {
|
|
reverseData: true,
|
|
horizontalBars: true,
|
|
axisX: {
|
|
labelInterpolationFnc: Chartist.noop
|
|
},
|
|
axisY: {
|
|
offset: 60
|
|
}
|
|
}],
|
|
// Options override for media > 800px
|
|
['screen and (min-width: 800px)', {
|
|
stackBars: false,
|
|
seriesBarDistance: 10
|
|
}],
|
|
// Options override for media > 1000px
|
|
['screen and (min-width: 1000px)', {
|
|
reverseData: false,
|
|
horizontalBars: false,
|
|
seriesBarDistance: 15
|
|
}]
|
|
]);
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Pie Chart - Simple Chart
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistSimplePieChart').get(0) ) {
|
|
var data = {
|
|
series: [5, 3, 4]
|
|
};
|
|
|
|
var sum = function(a, b) {
|
|
return a + b
|
|
};
|
|
|
|
new Chartist.Pie('#ChartistSimplePieChart', data, {
|
|
labelInterpolationFnc: function(value) {
|
|
return Math.round(value / data.series.reduce(sum) * 100) + '%';
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Pie Chart - With Custom Labels
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistPieChartWithCustomLabels').get(0) ) {
|
|
var data = {
|
|
labels: ['Bananas', 'Apples', 'Grapes'],
|
|
series: [20, 15, 40]
|
|
};
|
|
var options = {
|
|
labelInterpolationFnc: function(value) {
|
|
return value[0]
|
|
}
|
|
};
|
|
var responsiveOptions = [
|
|
['screen and (min-width: 640px)', {
|
|
chartPadding: 30,
|
|
labelOffset: 100,
|
|
labelDirection: 'explode',
|
|
labelInterpolationFnc: function(value) {
|
|
return value;
|
|
}
|
|
}],
|
|
['screen and (min-width: 1024px)', {
|
|
labelOffset: 80,
|
|
chartPadding: 20
|
|
}]
|
|
];
|
|
new Chartist.Pie('#ChartistPieChartWithCustomLabels', data, options, responsiveOptions);
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: Gauge Chart
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistGaugeChart').get(0) ) {
|
|
new Chartist.Pie('#ChartistGaugeChart', {
|
|
series: [20, 10, 30, 40]
|
|
}, {
|
|
donut: true,
|
|
donutWidth: 60,
|
|
startAngle: 270,
|
|
total: 200,
|
|
showLabel: false
|
|
});
|
|
}
|
|
})();
|
|
|
|
/*
|
|
Chartist: CSS Animation
|
|
*/
|
|
(function() {
|
|
if( $('#ChartistCSSAnimation').get(0) ) {
|
|
var data = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
series: [
|
|
[1, 2, 2.7, 0, 3, 5, 3, 4, 8, 10, 12, 7],
|
|
[0, 1.2, 2, 7, 2.5, 9, 5, 8, 9, 11, 14, 4],
|
|
[10, 9, 8, 6.5, 6.8, 6, 5.4, 5.3, 4.5, 4.4, 3, 2.8]
|
|
]
|
|
};
|
|
|
|
var responsiveOptions = [
|
|
[
|
|
'only screen', {
|
|
axisX: {
|
|
labelInterpolationFnc: function(value, index) {
|
|
// Interpolation function causes only every 2nd label to be displayed
|
|
if (index % 2 !== 0) {
|
|
return false;
|
|
} else {
|
|
return value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
];
|
|
|
|
new Chartist.Line('#ChartistCSSAnimation', data, null, responsiveOptions);
|
|
}
|
|
})();
|
|
|
|
}).apply(this, [jQuery]); |