309 lines
30 KiB
JavaScript
309 lines
30 KiB
JavaScript
|
//Flot Bar Chart
|
||
|
|
$(function() {
|
||
|
|
var barOptions = {
|
||
|
|
series: {
|
||
|
|
bars: {
|
||
|
|
show: true,
|
||
|
|
barWidth: 0.6,
|
||
|
|
fill: true,
|
||
|
|
fillColor: {
|
||
|
|
colors: [{
|
||
|
|
opacity: 0.8
|
||
|
|
}, {
|
||
|
|
opacity: 0.8
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
tickDecimals: 0
|
||
|
|
},
|
||
|
|
colors: ["#1ab394"],
|
||
|
|
grid: {
|
||
|
|
color: "#999999",
|
||
|
|
hoverable: true,
|
||
|
|
clickable: true,
|
||
|
|
tickColor: "#D4D4D4",
|
||
|
|
borderWidth:0
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
tooltip: true,
|
||
|
|
tooltipOpts: {
|
||
|
|
content: "x: %x, y: %y"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var barData = {
|
||
|
|
label: "bar",
|
||
|
|
data: [
|
||
|
|
[1, 34],
|
||
|
|
[2, 25],
|
||
|
|
[3, 19],
|
||
|
|
[4, 34],
|
||
|
|
[5, 32],
|
||
|
|
[6, 44]
|
||
|
|
]
|
||
|
|
};
|
||
|
|
$.plot($("#flot-bar-chart"), [barData], barOptions);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
var barOptions = {
|
||
|
|
series: {
|
||
|
|
lines: {
|
||
|
|
show: true,
|
||
|
|
lineWidth: 2,
|
||
|
|
fill: true,
|
||
|
|
fillColor: {
|
||
|
|
colors: [{
|
||
|
|
opacity: 0.0
|
||
|
|
}, {
|
||
|
|
opacity: 0.0
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
tickDecimals: 0
|
||
|
|
},
|
||
|
|
colors: ["#1ab394"],
|
||
|
|
grid: {
|
||
|
|
color: "#999999",
|
||
|
|
hoverable: true,
|
||
|
|
clickable: true,
|
||
|
|
tickColor: "#D4D4D4",
|
||
|
|
borderWidth:0
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
tooltip: true,
|
||
|
|
tooltipOpts: {
|
||
|
|
content: "x: %x, y: %y"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var barData = {
|
||
|
|
label: "bar",
|
||
|
|
data: [
|
||
|
|
[1, 34],
|
||
|
|
[2, 25],
|
||
|
|
[3, 19],
|
||
|
|
[4, 34],
|
||
|
|
[5, 32],
|
||
|
|
[6, 44]
|
||
|
|
]
|
||
|
|
};
|
||
|
|
$.plot($("#flot-line-chart"), [barData], barOptions);
|
||
|
|
|
||
|
|
});
|
||
|
|
//Flot Pie Chart
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
var data = [{
|
||
|
|
label: "Sales 1",
|
||
|
|
data: 21,
|
||
|
|
color: "#d3d3d3",
|
||
|
|
}, {
|
||
|
|
label: "Sales 2",
|
||
|
|
data: 3,
|
||
|
|
color: "#bababa",
|
||
|
|
}, {
|
||
|
|
label: "Sales 3",
|
||
|
|
data: 15,
|
||
|
|
color: "#79d2c0",
|
||
|
|
}, {
|
||
|
|
label: "Sales 4",
|
||
|
|
data: 52,
|
||
|
|
color: "#1ab394",
|
||
|
|
}];
|
||
|
|
|
||
|
|
var plotObj = $.plot($("#flot-pie-chart"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true
|
||
|
|
},
|
||
|
|
tooltip: true,
|
||
|
|
tooltipOpts: {
|
||
|
|
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
|
||
|
|
shifts: {
|
||
|
|
x: 20,
|
||
|
|
y: 0
|
||
|
|
},
|
||
|
|
defaultTheme: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$(function() {
|
||
|
|
|
||
|
|
var container = $("#flot-line-chart-moving");
|
||
|
|
|
||
|
|
// Determine how many data points to keep based on the placeholder's initial size;
|
||
|
|
// this gives us a nice high-res plot while avoiding more than one point per pixel.
|
||
|
|
|
||
|
|
var maximum = container.outerWidth() / 2 || 300;
|
||
|
|
|
||
|
|
//
|
||
|
|
|
||
|
|
var data = [];
|
||
|
|
|
||
|
|
function getRandomData() {
|
||
|
|
|
||
|
|
if (data.length) {
|
||
|
|
data = data.slice(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
while (data.length < maximum) {
|
||
|
|
var previous = data.length ? data[data.length - 1] : 50;
|
||
|
|
var y = previous + Math.random() * 10 - 5;
|
||
|
|
data.push(y < 0 ? 0 : y > 100 ? 100 : 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
series = [{
|
||
|
|
data: getRandomData(),
|
||
|
|
lines: {
|
||
|
|
fill: true
|
||
|
|
}
|
||
|
|
}];
|
||
|
|
|
||
|
|
|
||
|
|
var plot = $.plot(container, series, {
|
||
|
|
grid: {
|
||
|
|
|
||
|
|
color: "#999999",
|
||
|
|
tickColor: "#D4D4D4",
|
||
|
|
borderWidth:0,
|
||
|
|
minBorderMargin: 20,
|
||
|
|
labelMargin: 10,
|
||
|
|
backgroundColor: {
|
||
|
|
colors: ["#ffffff", "#ffffff"]
|
||
|
|
},
|
||
|
|
margin: {
|
||
|
|
top: 8,
|
||
|
|
bottom: 20,
|
||
|
|
left: 20
|
||
|
|
},
|
||
|
|
markings: function(axes) {
|
||
|
|
var markings = [];
|
||
|
|
var xaxis = axes.xaxis;
|
||
|
|
for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
|
||
|
|
markings.push({
|
||
|
|
xaxis: {
|
||
|
|
from: x,
|
||
|
|
to: x + xaxis.tickSize
|
||
|
|
},
|
||
|
|
color: "#fff"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return markings;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
colors: ["#1ab394"],
|
||
|
|
xaxis: {
|
||
|
|
tickFormatter: function() {
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
min: 0,
|
||
|
|
max: 110
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update the random dataset at 25FPS for a smoothly-animating chart
|
||
|
|
|
||
|
|
setInterval(function updateRandom() {
|
||
|
|
series[0].data = getRandomData();
|
||
|
|
plot.setData(series);
|
||
|
|
plot.draw();
|
||
|
|
}, 40);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
//Flot Multiple Axes Line Chart
|
||
|
|
$(function() {
|
||
|
|
var oilprices = [ [1167692400000, 61.05], [1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31], [1168210800000, 55.55], [1168297200000, 55.64], [1168383600000, 54.02], [1168470000000, 51.88], [1168556400000, 52.99], [1168815600000, 52.99], [1168902000000, 51.21], [1168988400000, 52.24], [1169074800000, 50.48], [1169161200000, 51.99], [1169420400000, 51.13], [1169506800000, 55.04], [1169593200000, 55.37], [1169679600000, 54.23], [1169766000000, 55.42], [1170025200000, 54.01], [1170111600000, 56.97], [1170198000000, 58.14], [1170284400000, 58.14], [1170370800000, 59.02], [1170630000000, 58.74], [1170716400000, 58.88], [1170802800000, 57.71], [1170889200000, 59.71], [1170975600000, 59.89], [1171234800000, 57.81], [1171321200000, 59.06], [1171407600000, 58.00], [1171494000000, 57.99], [1171580400000, 59.39], [1171839600000, 59.39], [1171926000000, 58.07], [1172012400000, 60.07], [1172098800000, 61.14], [1172444400000, 61.39], [1172530800000, 61.46], [1172617200000, 61.79], [1172703600000, 62.00], [1172790000000, 60.07], [1173135600000, 60.69], [1173222000000, 61.82], [1173308400000, 60.05], [1173654000000, 58.91], [1173740400000, 57.93], [1173826800000, 58.16], [1173913200000, 57.55], [1173999600000, 57.11], [1174258800000, 56.59], [1174345200000, 59.61], [1174518000000, 61.69], [1174604400000, 62.28], [1174860000000, 62.91], [1174946400000, 62.93], [1175032800000, 64.03], [1175119200000, 66.03], [1175205600000, 65.87], [1175464800000, 64.64], [1175637600000, 64.38], [1175724000000, 64.28], [1175810400000, 64.28], [1176069600000, 61.51], [1176156000000, 61.89], [1176242400000, 62.01], [1176328800000, 63.85], [1176415200000, 63.63], [1176674400000, 63.61], [1176760800000, 63.10], [1176847200000, 63.13], [1176933600000, 61.83], [1177020000000, 63.38], [1177279200000, 64.58], [1177452000000, 65.84], [1177538400000, 65.06], [1177624800000, 66.46], [1177884000000, 64.40], [1178056800000, 63.68], [1178143200000, 63.19], [1178229600000, 61.93], [1178488800000, 61.47], [1178575200000, 61.55], [1178748000000, 61.81], [1178834400000, 62.37], [1179093600000, 62.46], [1179180000000, 63.17], [1179266400000, 62.55], [1179352800000, 64.94], [1179698400000, 66.27], [1179784800000, 65.50], [1179871200000, 65.77], [1179957600000, 64.18], [1180044000000, 65.20], [1180389600000, 63.15], [1180476000000, 63.49], [1180562400000, 65.08], [1180908000000, 66.30], [1180994400000, 65.96], [1181167200000, 66.93], [1181253600000, 65.98], [1181599200000, 65.35], [1181685600000, 66.26], [1181858400000, 68.00], [1182117600000, 69.09], [1182204000000, 69.10], [1182290400000, 68.19], [1182376800000, 68.19], [1182463200000, 69.14], [1182722400000, 68.19], [1182808800000, 67.77], [1182895200000, 68.97], [1182981600000, 69.57], [1183068000000, 70.68], [1183327200000, 71.09], [1183413600000, 70.92], [1183586400000, 71.81], [1183672800000, 72.81], [1183932000000, 72.19], [1184018400000, 72.56], [1184191200000, 72.50], [1184277600000, 74.15], [1184623200000, 75.05], [1184796000000, 75.92], [1184882400000, 75.57], [1185141600000, 74.89], [1185228000000, 73.56], [1185314400000, 75.57], [1185400800000, 74.95], [1185487200000, 76.83], [1185832800000, 78.21], [1185919200000, 76.53], [1186005600000, 76.86], [1186092000000, 76.00], [1186437600000, 71.59], [1186696800000, 71.47], [1186956000000, 71.62], [1187042400000, 71.00], [1187301600000, 71.98], [1187560800000, 71.12], [1187647200000, 69.47], [1187733600000, 69.26], [1187820000000, 69.83], [1187906400000, 71.09], [1188165600000, 71.73], [1188338400000, 73.36], [1188511200000, 74.04], [1188856800000, 76.30], [1189116000000, 77.49], [1189461600000, 78.23], [1189548000000, 79.91], [1189634400000, 80.09], [1189720800000, 79.10], [1189980000000, 80.57], [1190066400000, 81.93], [1190239200000, 83.32], [1190325600000, 81.62], [1190584800000, 80.95], [1190671200000, 79.53], [1190757600000, 80.30], [1190844000000, 82.88], [1190930400000, 81.66], [1191189600000, 80.24], [1191276000000, 80.05], [1191362400000, 79.94], [1191448800000, 81.44], [1191535200000, 81.22], [1191794400000, 79.02], [1191880800000, 8
|
||
|
|
var exchangerates = [ [1167606000000, 0.7580], [1167692400000, 0.7580], [1167778800000, 0.75470], [1167865200000, 0.75490], [1167951600000, 0.76130], [1168038000000, 0.76550], [1168124400000, 0.76930], [1168210800000, 0.76940], [1168297200000, 0.76880], [1168383600000, 0.76780], [1168470000000, 0.77080], [1168556400000, 0.77270], [1168642800000, 0.77490], [1168729200000, 0.77410], [1168815600000, 0.77410], [1168902000000, 0.77320], [1168988400000, 0.77270], [1169074800000, 0.77370], [1169161200000, 0.77240], [1169247600000, 0.77120], [1169334000000, 0.7720], [1169420400000, 0.77210], [1169506800000, 0.77170], [1169593200000, 0.77040], [1169679600000, 0.7690], [1169766000000, 0.77110], [1169852400000, 0.7740], [1169938800000, 0.77450], [1170025200000, 0.77450], [1170111600000, 0.7740], [1170198000000, 0.77160], [1170284400000, 0.77130], [1170370800000, 0.76780], [1170457200000, 0.76880], [1170543600000, 0.77180], [1170630000000, 0.77180], [1170716400000, 0.77280], [1170802800000, 0.77290], [1170889200000, 0.76980], [1170975600000, 0.76850], [1171062000000, 0.76810], [1171148400000, 0.7690], [1171234800000, 0.7690], [1171321200000, 0.76980], [1171407600000, 0.76990], [1171494000000, 0.76510], [1171580400000, 0.76130], [1171666800000, 0.76160], [1171753200000, 0.76140], [1171839600000, 0.76140], [1171926000000, 0.76070], [1172012400000, 0.76020], [1172098800000, 0.76110], [1172185200000, 0.76220], [1172271600000, 0.76150], [1172358000000, 0.75980], [1172444400000, 0.75980], [1172530800000, 0.75920], [1172617200000, 0.75730], [1172703600000, 0.75660], [1172790000000, 0.75670], [1172876400000, 0.75910], [1172962800000, 0.75820], [1173049200000, 0.75850], [1173135600000, 0.76130], [1173222000000, 0.76310], [1173308400000, 0.76150], [1173394800000, 0.760], [1173481200000, 0.76130], [1173567600000, 0.76270], [1173654000000, 0.76270], [1173740400000, 0.76080], [1173826800000, 0.75830], [1173913200000, 0.75750], [1173999600000, 0.75620], [1174086000000, 0.7520], [1174172400000, 0.75120], [1174258800000, 0.75120], [1174345200000, 0.75170], [1174431600000, 0.7520], [1174518000000, 0.75110], [1174604400000, 0.7480], [1174690800000, 0.75090], [1174777200000, 0.75310], [1174860000000, 0.75310], [1174946400000, 0.75270], [1175032800000, 0.74980], [1175119200000, 0.74930], [1175205600000, 0.75040], [1175292000000, 0.750], [1175378400000, 0.74910], [1175464800000, 0.74910], [1175551200000, 0.74850], [1175637600000, 0.74840], [1175724000000, 0.74920], [1175810400000, 0.74710], [1175896800000, 0.74590], [1175983200000, 0.74770], [1176069600000, 0.74770], [1176156000000, 0.74830], [1176242400000, 0.74580], [1176328800000, 0.74480], [1176415200000, 0.7430], [1176501600000, 0.73990], [1176588000000, 0.73950], [1176674400000, 0.73950], [1176760800000, 0.73780], [1176847200000, 0.73820], [1176933600000, 0.73620], [1177020000000, 0.73550], [1177106400000, 0.73480], [1177192800000, 0.73610], [1177279200000, 0.73610], [1177365600000, 0.73650], [1177452000000, 0.73620], [1177538400000, 0.73310], [1177624800000, 0.73390], [1177711200000, 0.73440], [1177797600000, 0.73270], [1177884000000, 0.73270], [1177970400000, 0.73360], [1178056800000, 0.73330], [1178143200000, 0.73590], [1178229600000, 0.73590], [1178316000000, 0.73720], [1178402400000, 0.7360], [1178488800000, 0.7360], [1178575200000, 0.7350], [1178661600000, 0.73650], [1178748000000, 0.73840], [1178834400000, 0.73950], [1178920800000, 0.74130], [1179007200000, 0.73970], [1179093600000, 0.73960], [1179180000000, 0.73850], [1179266400000, 0.73780], [1179352800000, 0.73660], [1179439200000, 0.740], [1179525600000, 0.74110], [1179612000000, 0.74060], [1179698400000, 0.74050], [1179784800000, 0.74140], [1179871200000, 0.74310], [1179957600000, 0.74310], [1180044000000, 0.74380], [1180130400000, 0.74430], [1180216800000, 0.74430], [1180303200000, 0.74430], [1180389600000, 0.74340], [1180476000000, 0.74290], [1180562400000, 0.74420], [1180648800000, 0.7440], [1180735200000, 0.74390], [1180821600000, 0.74370], [1180908000000, 0.74370], [1180994400000, 0.74290], [1181080800000, 0.74030], [11811672
|
||
|
|
];
|
||
|
|
|
||
|
|
function euroFormatter(v, axis) {
|
||
|
|
return v.toFixed(axis.tickDecimals) + "€";
|
||
|
|
}
|
||
|
|
|
||
|
|
function doPlot(position) {
|
||
|
|
$.plot($("#flot-line-chart-multi"), [{
|
||
|
|
data: oilprices,
|
||
|
|
label: "Oil price ($)"
|
||
|
|
}, {
|
||
|
|
data: exchangerates,
|
||
|
|
label: "USD/EUR exchange rate",
|
||
|
|
yaxis: 2
|
||
|
|
}], {
|
||
|
|
xaxes: [{
|
||
|
|
mode: 'time'
|
||
|
|
}],
|
||
|
|
yaxes: [{
|
||
|
|
min: 0
|
||
|
|
}, {
|
||
|
|
// align if we are to the right
|
||
|
|
alignTicksWithAxis: position == "right" ? 1 : null,
|
||
|
|
position: position,
|
||
|
|
tickFormatter: euroFormatter
|
||
|
|
}],
|
||
|
|
legend: {
|
||
|
|
position: 'sw'
|
||
|
|
},
|
||
|
|
colors: ["#1ab394"],
|
||
|
|
grid: {
|
||
|
|
color: "#999999",
|
||
|
|
hoverable: true,
|
||
|
|
clickable: true,
|
||
|
|
tickColor: "#D4D4D4",
|
||
|
|
borderWidth:0,
|
||
|
|
hoverable: true //IMPORTANT! this is needed for tooltip to work,
|
||
|
|
|
||
|
|
},
|
||
|
|
tooltip: true,
|
||
|
|
tooltipOpts: {
|
||
|
|
content: "%s for %x was %y",
|
||
|
|
xDateFormat: "%y-%0m-%0d",
|
||
|
|
|
||
|
|
onHover: function(flotItem, $tooltipEl) {
|
||
|
|
// console.log(flotItem, $tooltipEl);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
doPlot("right");
|
||
|
|
|
||
|
|
$("button").click(function() {
|
||
|
|
doPlot($(this).text());
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|