/home/dvjjulio/softtrash/public/js/pages/widgetsStats.js
/*
* Document : widgetsStats.js
* Author : pixelcave
* Description: Custom javascript code used in Statistic Widgets page
*/
var WidgetsStats = function() {
return {
init: function() {
/* Mini Bar/Line Charts with jquery.sparkline plugin, for more examples you can check out http://omnipotent.net/jquery.sparkline/#s-about */
var miniChartBarOptions = {
type: 'bar',
barWidth: 8,
barSpacing: 6,
height: '80px',
tooltipOffsetX: -25,
tooltipOffsetY: 20,
barColor: '#555555',
tooltipPrefix: '+ ',
tooltipSuffix: ' Sales',
tooltipFormat: '{{prefix}}{{value}}{{suffix}}'
};
$('#mini-chart-bar1').sparkline('html', miniChartBarOptions);
miniChartBarOptions['barColor'] = '#1bbae1';
miniChartBarOptions['tooltipPrefix'] = '';
miniChartBarOptions['tooltipSuffix'] = ' Projects';
$('#mini-chart-bar2').sparkline('html', miniChartBarOptions);
miniChartBarOptions['barColor'] = '#e74c3c';
miniChartBarOptions['tooltipPrefix'] = '+ ';
miniChartBarOptions['tooltipSuffix'] = ' Photos';
$('#mini-chart-bar3').sparkline('html', miniChartBarOptions);
miniChartBarOptions['barColor'] = '#9b59b6';
miniChartBarOptions['tooltipPrefix'] = '';
miniChartBarOptions['tooltipSuffix'] = ' Tickets';
$('#mini-chart-bar4').sparkline('html', miniChartBarOptions);
var miniChartLineOptions = {
type: 'line',
width: '270px',
height: '150px',
tooltipOffsetX: -25,
tooltipOffsetY: 20,
lineWidth: 1,
lineColor: '#3b3f40',
fillColor: '#399399',
spotColor: '#ffffff',
minSpotColor: '#ffffff',
maxSpotColor: '#ffffff',
highlightSpotColor: '#ffffff',
highlightLineColor: '#ffffff',
spotRadius: 5,
tooltipPrefix: '$ ',
tooltipSuffix: '',
tooltipFormat: '{{prefix}}{{y}}{{suffix}}'
};
$('#mini-chart-line1').sparkline('html', miniChartLineOptions);
miniChartLineOptions['lineColor'] = '#333333';
miniChartLineOptions['fillColor'] = '#777777';
miniChartLineOptions['tooltipPrefix'] = '+ ';
miniChartLineOptions['tooltipSuffix'] = ' Sales';
$('#mini-chart-line2').sparkline('html', miniChartLineOptions);
miniChartLineOptions['lineColor'] = '#4a2e2b';
miniChartLineOptions['fillColor'] = '#b33c2e';
miniChartLineOptions['tooltipPrefix'] = '';
miniChartLineOptions['tooltipSuffix'] = ' Downloads';
$('#mini-chart-line3').sparkline('html', miniChartLineOptions);
/*
* Flot 0.8.2 Jquery plugin is used for charts
*
* For more examples or getting extra plugins you can check http://www.flotcharts.org/
* Plugins included in this template: pie, resize, stack, time
*/
// Get the elements where we will attach the charts
var chartWidget1 = $('#chart-widget1');
var chartWidget2 = $('#chart-widget2');
// Random data for the charts
var dataEarnings = [[1, 1560], [2, 1650], [3, 1320], [4, 1950], [5, 1800], [6, 2400], [7, 2100], [8, 2550], [9, 3300], [10, 3900], [11, 4200], [12, 4500]];
var dataSales = [[1, 500], [2, 420], [3, 480], [4, 350], [5, 600], [6, 850], [7, 1100], [8, 950], [9, 1220], [10, 1300], [11, 1500], [12, 1700]];
// Array with month labels used in both charts
var chartMonths = [[1, 'January'], [2, 'February'], [3, 'March'], [4, 'April'], [5, 'May'], [6, 'June'], [7, 'July'], [8, 'August'], [9, 'September'], [10, 'October'], [11, 'November'], [12, 'December']];
// Widget 1 Chart
$.plot(chartWidget1,
[
{
data: dataEarnings,
lines: {show: true, fill: false},
points: {show: true, radius: 6, fillColor: '#cccccc'}
},
{
data: dataSales,
lines: {show: true, fill: false},
points: {show: true, radius: 6, fillColor: '#ffffff'}
}
],
{
colors: ['#ffffff', '#353535'],
legend: {show: false},
grid: {borderWidth: 0, hoverable: true, clickable: true},
yaxis: {show: false},
xaxis: {show: false, ticks: chartMonths}
}
);
// Widget 2 Chart
$.plot(chartWidget2,
[
{
data: dataEarnings,
lines: {show: true, fill: false},
points: {show: true, radius: 6, fillColor: '#000000'}
},
{
data: dataSales,
lines: {show: true, fill: false},
points: {show: true, radius: 6, fillColor: '#ffffff'}
}
],
{
colors: ['#ffffff', '#000000'],
legend: {show: false},
grid: {borderWidth: 0, hoverable: true, clickable: true},
yaxis: {show: false},
xaxis: {show: false, ticks: chartMonths}
}
);
// Creating and attaching a tooltip to both charts
var previousPoint = null, ttlabel = null;
chartWidget1.add(chartWidget2).bind('plothover', function(event, pos, item) {
if (item) {
if (previousPoint !== item.dataIndex) {
previousPoint = item.dataIndex;
$('#chart-tooltip').remove();
var x = item.datapoint[0], y = item.datapoint[1];
// Get xaxis label
var monthLabel = item.series.xaxis.options.ticks[item.dataIndex][1];
if (item.seriesIndex === 1) {
ttlabel = '<strong>' + y + '</strong> sales in <strong>' + monthLabel + '</strong>';
} else {
ttlabel = '$ <strong>' + y + '</strong> in <strong>' + monthLabel + '</strong>';
}
$('<div id="chart-tooltip" class="chart-tooltip">' + ttlabel + '</div>')
.css({top: item.pageY - 50, left: item.pageX - 50}).appendTo("body").show();
}
}
else {
$('#chart-tooltip').remove();
previousPoint = null;
}
});
}
};
}();