BSBMaterial added
This commit is contained in:
117
app/assets/javascripts/BSBMaterial/pages/charts/chartjs.js
Normal file
117
app/assets/javascripts/BSBMaterial/pages/charts/chartjs.js
Normal file
@@ -0,0 +1,117 @@
|
||||
$(function () {
|
||||
new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
|
||||
new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
|
||||
new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
|
||||
new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie'));
|
||||
});
|
||||
|
||||
function getChartJs(type) {
|
||||
var config = null;
|
||||
|
||||
if (type === 'line') {
|
||||
config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(0, 188, 212, 0.75)',
|
||||
backgroundColor: 'rgba(0, 188, 212, 0.3)',
|
||||
pointBorderColor: 'rgba(0, 188, 212, 0)',
|
||||
pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
|
||||
pointBorderWidth: 1
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
borderColor: 'rgba(233, 30, 99, 0.75)',
|
||||
backgroundColor: 'rgba(233, 30, 99, 0.3)',
|
||||
pointBorderColor: 'rgba(233, 30, 99, 0)',
|
||||
pointBackgroundColor: 'rgba(233, 30, 99, 0.9)',
|
||||
pointBorderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (type === 'bar') {
|
||||
config = {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: 'rgba(0, 188, 212, 0.8)'
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
backgroundColor: 'rgba(233, 30, 99, 0.8)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (type === 'radar') {
|
||||
config = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 25, 90, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(0, 188, 212, 0.8)',
|
||||
backgroundColor: 'rgba(0, 188, 212, 0.5)',
|
||||
pointBorderColor: 'rgba(0, 188, 212, 0)',
|
||||
pointBackgroundColor: 'rgba(0, 188, 212, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [72, 48, 40, 19, 96, 27, 100],
|
||||
borderColor: 'rgba(233, 30, 99, 0.8)',
|
||||
backgroundColor: 'rgba(233, 30, 99, 0.5)',
|
||||
pointBorderColor: 'rgba(233, 30, 99, 0)',
|
||||
pointBackgroundColor: 'rgba(233, 30, 99, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (type === 'pie') {
|
||||
config = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [225, 50, 100, 40],
|
||||
backgroundColor: [
|
||||
"rgb(233, 30, 99)",
|
||||
"rgb(255, 193, 7)",
|
||||
"rgb(0, 188, 212)",
|
||||
"rgb(139, 195, 74)"
|
||||
],
|
||||
}],
|
||||
labels: [
|
||||
"Pink",
|
||||
"Amber",
|
||||
"Cyan",
|
||||
"Light Green"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
return config;
|
||||
}
|
||||
251
app/assets/javascripts/BSBMaterial/pages/charts/flot.js
Normal file
251
app/assets/javascripts/BSBMaterial/pages/charts/flot.js
Normal file
File diff suppressed because one or more lines are too long
46
app/assets/javascripts/BSBMaterial/pages/charts/jquery-knob.js
vendored
Normal file
46
app/assets/javascripts/BSBMaterial/pages/charts/jquery-knob.js
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
$(function () {
|
||||
$('.knob').knob({
|
||||
draw: function () {
|
||||
// "tron" case
|
||||
if (this.$.data('skin') == 'tron') {
|
||||
|
||||
var a = this.angle(this.cv) // Angle
|
||||
, sa = this.startAngle // Previous start angle
|
||||
, sat = this.startAngle // Start angle
|
||||
, ea // Previous end angle
|
||||
, eat = sat + a // End angle
|
||||
, r = true;
|
||||
|
||||
this.g.lineWidth = this.lineWidth;
|
||||
|
||||
this.o.cursor
|
||||
&& (sat = eat - 0.3)
|
||||
&& (eat = eat + 0.3);
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.value);
|
||||
this.o.cursor
|
||||
&& (sa = ea - 0.3)
|
||||
&& (ea = ea + 0.3);
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.previousColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
|
||||
this.g.stroke();
|
||||
}
|
||||
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
|
||||
this.g.stroke();
|
||||
|
||||
this.g.lineWidth = 2;
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.o.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
||||
this.g.stroke();
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
168
app/assets/javascripts/BSBMaterial/pages/charts/morris.js
Normal file
168
app/assets/javascripts/BSBMaterial/pages/charts/morris.js
Normal file
@@ -0,0 +1,168 @@
|
||||
$(function () {
|
||||
getMorris('line', 'line_chart');
|
||||
getMorris('bar', 'bar_chart');
|
||||
getMorris('area', 'area_chart');
|
||||
getMorris('donut', 'donut_chart');
|
||||
});
|
||||
|
||||
|
||||
function getMorris(type, element) {
|
||||
if (type === 'line') {
|
||||
Morris.Line({
|
||||
element: element,
|
||||
data: [{
|
||||
'period': '2011 Q3',
|
||||
'licensed': 3407,
|
||||
'sorned': 660
|
||||
}, {
|
||||
'period': '2011 Q2',
|
||||
'licensed': 3351,
|
||||
'sorned': 629
|
||||
}, {
|
||||
'period': '2011 Q1',
|
||||
'licensed': 3269,
|
||||
'sorned': 618
|
||||
}, {
|
||||
'period': '2010 Q4',
|
||||
'licensed': 3246,
|
||||
'sorned': 661
|
||||
}, {
|
||||
'period': '2009 Q4',
|
||||
'licensed': 3171,
|
||||
'sorned': 676
|
||||
}, {
|
||||
'period': '2008 Q4',
|
||||
'licensed': 3155,
|
||||
'sorned': 681
|
||||
}, {
|
||||
'period': '2007 Q4',
|
||||
'licensed': 3226,
|
||||
'sorned': 620
|
||||
}, {
|
||||
'period': '2006 Q4',
|
||||
'licensed': 3245,
|
||||
'sorned': null
|
||||
}, {
|
||||
'period': '2005 Q4',
|
||||
'licensed': 3289,
|
||||
'sorned': null
|
||||
}],
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'Off the road'],
|
||||
lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)'],
|
||||
lineWidth: 3
|
||||
});
|
||||
} else if (type === 'bar') {
|
||||
Morris.Bar({
|
||||
element: element,
|
||||
data: [{
|
||||
x: '2011 Q1',
|
||||
y: 3,
|
||||
z: 2,
|
||||
a: 3
|
||||
}, {
|
||||
x: '2011 Q2',
|
||||
y: 2,
|
||||
z: null,
|
||||
a: 1
|
||||
}, {
|
||||
x: '2011 Q3',
|
||||
y: 0,
|
||||
z: 2,
|
||||
a: 4
|
||||
}, {
|
||||
x: '2011 Q4',
|
||||
y: 2,
|
||||
z: 4,
|
||||
a: 3
|
||||
}],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z', 'a'],
|
||||
labels: ['Y', 'Z', 'A'],
|
||||
barColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)'],
|
||||
});
|
||||
} else if (type === 'area') {
|
||||
Morris.Area({
|
||||
element: element,
|
||||
data: [{
|
||||
period: '2010 Q1',
|
||||
iphone: 2666,
|
||||
ipad: null,
|
||||
itouch: 2647
|
||||
}, {
|
||||
period: '2010 Q2',
|
||||
iphone: 2778,
|
||||
ipad: 2294,
|
||||
itouch: 2441
|
||||
}, {
|
||||
period: '2010 Q3',
|
||||
iphone: 4912,
|
||||
ipad: 1969,
|
||||
itouch: 2501
|
||||
}, {
|
||||
period: '2010 Q4',
|
||||
iphone: 3767,
|
||||
ipad: 3597,
|
||||
itouch: 5689
|
||||
}, {
|
||||
period: '2011 Q1',
|
||||
iphone: 6810,
|
||||
ipad: 1914,
|
||||
itouch: 2293
|
||||
}, {
|
||||
period: '2011 Q2',
|
||||
iphone: 5670,
|
||||
ipad: 4293,
|
||||
itouch: 1881
|
||||
}, {
|
||||
period: '2011 Q3',
|
||||
iphone: 4820,
|
||||
ipad: 3795,
|
||||
itouch: 1588
|
||||
}, {
|
||||
period: '2011 Q4',
|
||||
iphone: 15073,
|
||||
ipad: 5967,
|
||||
itouch: 5175
|
||||
}, {
|
||||
period: '2012 Q1',
|
||||
iphone: 10687,
|
||||
ipad: 4460,
|
||||
itouch: 2028
|
||||
}, {
|
||||
period: '2012 Q2',
|
||||
iphone: 8432,
|
||||
ipad: 5713,
|
||||
itouch: 1791
|
||||
}],
|
||||
xkey: 'period',
|
||||
ykeys: ['iphone', 'ipad', 'itouch'],
|
||||
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
||||
pointSize: 2,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)']
|
||||
});
|
||||
} else if (type === 'donut') {
|
||||
Morris.Donut({
|
||||
element: element,
|
||||
data: [{
|
||||
label: 'Jam',
|
||||
value: 25
|
||||
}, {
|
||||
label: 'Frosted',
|
||||
value: 40
|
||||
}, {
|
||||
label: 'Custard',
|
||||
value: 25
|
||||
}, {
|
||||
label: 'Sugar',
|
||||
value: 10
|
||||
}],
|
||||
colors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)'],
|
||||
formatter: function (y) {
|
||||
return y + '%'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
156
app/assets/javascripts/BSBMaterial/pages/charts/sparkline.js
Normal file
156
app/assets/javascripts/BSBMaterial/pages/charts/sparkline.js
Normal file
@@ -0,0 +1,156 @@
|
||||
$(function () {
|
||||
$(".sparkline").each(function () {
|
||||
var $this = $(this);
|
||||
$this.sparkline('html', $this.data());
|
||||
});
|
||||
|
||||
$('.sparkline-pie').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
sliceColors: ['#E91E63', '#00BCD4', '#FFC107']
|
||||
})
|
||||
|
||||
drawDocSparklines();
|
||||
drawMouseSpeedDemo();
|
||||
});
|
||||
|
||||
//Taken from http://omnipotent.net/jquery.sparkline ================
|
||||
function drawDocSparklines() {
|
||||
|
||||
// Bar + line composite charts
|
||||
$('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
|
||||
$('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red' });
|
||||
|
||||
|
||||
// Line charts taking their values from the tag
|
||||
$('.sparkline-1').sparkline();
|
||||
|
||||
// Larger line charts for the docs
|
||||
$('.largeline').sparkline('html',
|
||||
{ type: 'line', height: '2.5em', width: '4em' });
|
||||
|
||||
// Customized line chart
|
||||
$('#linecustom').sparkline('html',
|
||||
{
|
||||
height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
|
||||
minSpotColor: false, maxSpotColor: false, spotColor: '#77f', spotRadius: 3
|
||||
});
|
||||
|
||||
// Bar charts using inline values
|
||||
$('.sparkbar').sparkline('html', { type: 'bar' });
|
||||
|
||||
$('.barformat').sparkline([1, 3, 5, 3, 8], {
|
||||
type: 'bar',
|
||||
tooltipFormat: '{{value:levels}} - {{value}}',
|
||||
tooltipValueLookups: {
|
||||
levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
|
||||
}
|
||||
});
|
||||
|
||||
// Tri-state charts using inline values
|
||||
$('.sparktristate').sparkline('html', { type: 'tristate' });
|
||||
$('.sparktristatecols').sparkline('html',
|
||||
{ type: 'tristate', colorMap: { '-2': '#fa7', '2': '#44f' } });
|
||||
|
||||
// Composite line charts, the second using values supplied via javascript
|
||||
$('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
|
||||
$('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });
|
||||
|
||||
// Line charts with normal range marker
|
||||
$('#normalline').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
|
||||
$('#normalExample').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#4f4' });
|
||||
|
||||
// Discrete charts
|
||||
$('.discrete1').sparkline('html',
|
||||
{ type: 'discrete', lineColor: 'blue', xwidth: 18 });
|
||||
$('#discrete2').sparkline('html',
|
||||
{ type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 });
|
||||
|
||||
// Bullet charts
|
||||
$('.sparkbullet').sparkline('html', { type: 'bullet' });
|
||||
|
||||
// Pie charts
|
||||
$('.sparkpie').sparkline('html', { type: 'pie', height: '1.0em' });
|
||||
|
||||
// Box plots
|
||||
$('.sparkboxplot').sparkline('html', { type: 'box' });
|
||||
$('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
|
||||
{ type: 'box', raw: true, showOutliers: true, target: 6 });
|
||||
|
||||
// Box plot with specific field order
|
||||
$('.boxfieldorder').sparkline('html', {
|
||||
type: 'box',
|
||||
tooltipFormatFieldlist: ['med', 'lq', 'uq'],
|
||||
tooltipFormatFieldlistKey: 'field'
|
||||
});
|
||||
|
||||
// click event demo sparkline
|
||||
$('.clickdemo').sparkline();
|
||||
$('.clickdemo').bind('sparklineClick', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
alert("Clicked on x=" + region.x + " y=" + region.y);
|
||||
});
|
||||
|
||||
// mouseover event demo sparkline
|
||||
$('.mouseoverdemo').sparkline();
|
||||
$('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
$('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
|
||||
}).bind('mouseleave', function () {
|
||||
$('.mouseoverregion').text('');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
** Draw the little mouse speed animated graph
|
||||
** This just attaches a handler to the mousemove event to see
|
||||
** (roughly) how far the mouse has moved
|
||||
** and then updates the display a couple of times a second via
|
||||
** setTimeout()
|
||||
**/
|
||||
function drawMouseSpeedDemo() {
|
||||
var mrefreshinterval = 500; // update display every 500ms
|
||||
var lastmousex = -1;
|
||||
var lastmousey = -1;
|
||||
var lastmousetime;
|
||||
var mousetravel = 0;
|
||||
var mpoints = [];
|
||||
var mpoints_max = 30;
|
||||
$('html').mousemove(function (e) {
|
||||
var mousex = e.pageX;
|
||||
var mousey = e.pageY;
|
||||
if (lastmousex > -1) {
|
||||
mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
|
||||
}
|
||||
lastmousex = mousex;
|
||||
lastmousey = mousey;
|
||||
});
|
||||
var mdraw = function () {
|
||||
var md = new Date();
|
||||
var timenow = md.getTime();
|
||||
if (lastmousetime && lastmousetime != timenow) {
|
||||
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
|
||||
mpoints.push(pps);
|
||||
if (mpoints.length > mpoints_max)
|
||||
mpoints.splice(0, 1);
|
||||
mousetravel = 0;
|
||||
$('#mousespeed').sparkline(mpoints, { width: mpoints.length * 2, tooltipSuffix: ' pixels per second' });
|
||||
}
|
||||
lastmousetime = timenow;
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
};
|
||||
// We could use setInterval instead, but I prefer to do it this way
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
}
|
||||
|
||||
//=================================================================
|
||||
Reference in New Issue
Block a user