khanat-opennel-code/code/web/public_php/ams/js/init-chart.js
2014-09-11 09:31:59 +02:00

260 lines
No EOL
6.8 KiB
JavaScript

//chart with points
if ($("#sincos").length) {
var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.5) {
sin.push([i, Math.sin(i) / i]);
cos.push([i, Math.cos(i)]);
}
var plot = $.plot($("#sincos"),
[
{ data: sin, label: "sin(x)/x"},
{ data: cos, label: "cos(x)" }
], {
series: {
lines: { show: true },
points: { show: true }
},
grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
yaxis: { min: -1.2, max: 1.2 },
colors: ["#539F2E", "#3C67A5"]
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#dfeffc',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#sincos").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + x + " = " + y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
$("#sincos").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
plot.highlight(item.series, item.datapoint);
}
});
}
//flot chart
if ($("#flotchart").length) {
var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d1.push([i, Math.sin(i)]);
var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d2.push([i, Math.cos(i)]);
var d3 = [];
for (var i = 0; i < Math.PI * 2; i += 0.1)
d3.push([i, Math.tan(i)]);
$.plot($("#flotchart"), [
{ label: "sin(x)", data: d1},
{ label: "cos(x)", data: d2},
{ label: "tan(x)", data: d3}
], {
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
ticks: [0, [Math.PI / 2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 / 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
},
yaxis: {
ticks: 10,
min: -2,
max: 2
},
grid: {
backgroundColor: { colors: ["#fff", "#eee"] }
}
});
}
//stack chart
if ($("#stackchart").length) {
var d1 = [];
for (var i = 0; i <= 10; i += 1)
d1.push([i, parseInt(Math.random() * 30)]);
var d2 = [];
for (var i = 0; i <= 10; i += 1)
d2.push([i, parseInt(Math.random() * 30)]);
var d3 = [];
for (var i = 0; i <= 10; i += 1)
d3.push([i, parseInt(Math.random() * 30)]);
var stack = 0, bars = true, lines = false, steps = false;
function plotWithOptions() {
$.plot($("#stackchart"), [ d1, d2, d3 ], {
series: {
stack: stack,
lines: { show: lines, fill: true, steps: steps },
bars: { show: bars, barWidth: 0.6 }
}
});
}
plotWithOptions();
$(".stackControls input").click(function (e) {
e.preventDefault();
stack = $(this).val() == "With stacking" ? true : null;
plotWithOptions();
});
$(".graphControls input").click(function (e) {
e.preventDefault();
bars = $(this).val().indexOf("Bars") != -1;
lines = $(this).val().indexOf("Lines") != -1;
steps = $(this).val().indexOf("steps") != -1;
plotWithOptions();
});
}
//pie chart
var data = [
{ label: "Internet Explorer", data: 12},
{ label: "Mobile", data: 27},
{ label: "Safari", data: 85},
{ label: "Opera", data: 64},
{ label: "Firefox", data: 90},
{ label: "Chrome", data: 112}
];
if ($("#piechart").length) {
$.plot($("#piechart"), data,
{
series: {
pie: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
legend: {
show: false
}
});
function pieHover(event, pos, obj) {
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
}
$("#piechart").bind("plothover", pieHover);
}
//donut chart
if ($("#donutchart").length) {
$.plot($("#donutchart"), data,
{
series: {
pie: {
innerRadius: 0.5,
show: true
}
},
legend: {
show: false
}
});
}
// we use an inline data source in the example, usually data would
// be fetched from a server
var data = [], totalPoints = 300;
function getRandomData() {
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;
var y = prev + Math.random() * 10 - 5;
if (y < 0)
y = 0;
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;
}
// setup control widget
var updateInterval = 30;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
//realtime chart
if ($("#realtimechart").length) {
var options = {
series: { shadowSize: 1 }, // drawing is faster without shadows
yaxis: { min: 0, max: 100 },
xaxis: { show: false }
};
var plot = $.plot($("#realtimechart"), [ getRandomData() ], options);
function update() {
plot.setData([ getRandomData() ]);
// since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
}