first commit
This commit is contained in:
maher
339
public/assets/js/chart.flot.js
Executable file
339
public/assets/js/chart.flot.js
Executable file
@@ -0,0 +1,339 @@
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$.plot('#flotBar1', [{
|
||||
data: [[0, 3], [1, 8], [2, 5], [3, 13],[4,5], [5,7],[6,4], [7,6], [8,3], [9,7]]
|
||||
}], {
|
||||
series: {
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: '#b3c4cc',
|
||||
barWidth: .5
|
||||
},
|
||||
highlightColor: '#007bff'
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#e5e5e5',
|
||||
hoverable: true
|
||||
},
|
||||
yaxis: {
|
||||
tickColor: '#d9d9d9',
|
||||
font: {
|
||||
color: '#5f6d7a',
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickColor: '#d9d9d9',
|
||||
font: {
|
||||
color: '#5f6d7a',
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.plot('#flotBar2', [{
|
||||
data: [[0, 3], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,8], [14,10]],
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: '#007bff',
|
||||
barWidth: .8
|
||||
}
|
||||
},{
|
||||
data: [[1, 5], [3, 7], [5, 10], [7, 7],[9,9], [11,5],[13,4], [15,6]],
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: '#aab7db',
|
||||
barWidth: .8
|
||||
}
|
||||
}], {
|
||||
grid: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#D9D9D9'
|
||||
},
|
||||
yaxis: {
|
||||
tickColor: '#d9d9d9',
|
||||
font: {
|
||||
color: '#666',
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickColor: '#d9d9d9',
|
||||
font: {
|
||||
color: '#666',
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var newCust = [[0, 2], [1, 3], [2,6], [3, 5], [4, 7], [5, 8], [6, 10]];
|
||||
var retCust = [[0, 1], [1, 2], [2,5], [3, 3], [4, 5], [5, 6], [6,9]];
|
||||
|
||||
var plot = $.plot($('#flotLine1'),[
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#007bff'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#f10075'
|
||||
}],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderWidth: 0,
|
||||
labelMargin: 5
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var plot = $.plot($('#flotLine2'),[
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#560bd0'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#85d00b'
|
||||
}],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'ne'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
var plot = $.plot($('#flotArea1'),[
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#f10075'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#007bff'
|
||||
}],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1,
|
||||
fill: true,
|
||||
fillColor: { colors: [ { opacity: 0 }, { opacity: 0.8 } ] }
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var plot = $.plot($('#flotArea2'),[
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#85d00b'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#560bd0'
|
||||
}],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1,
|
||||
fill: true,
|
||||
fillColor: { colors: [ { opacity: 0 }, { opacity: 0.3 } ] }
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: '#eee',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**************** PIE CHART *******************/
|
||||
var piedata = [
|
||||
{ label: 'Series 1', data: [[1,10]], color: '#6610f2'},
|
||||
{ label: 'Series 2', data: [[1,30]], color: '#007bff'},
|
||||
{ label: 'Series 3', data: [[1,90]], color: '#85d00b'},
|
||||
{ label: 'Series 4', data: [[1,70]], color: '#00cccc'},
|
||||
{ label: 'Series 5', data: [[1,80]], color: '#494c57'}
|
||||
];
|
||||
|
||||
$.plot('#flotPie1', piedata, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 2/3,
|
||||
formatter: labelFormatter,
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
}
|
||||
});
|
||||
|
||||
$.plot('#flotPie2', piedata, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
innerRadius: 0.5,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 2/3,
|
||||
formatter: labelFormatter,
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
}
|
||||
});
|
||||
|
||||
function labelFormatter(label, series) {
|
||||
return '<div style="font-size:8pt; text-align:center; padding:2px; color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||||
}
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user