(function($) { "use strict"; var data = [], totalPoints = 300; function getRandomData() { if (data.length > 0) data = data.slice(1); while (data.length < totalPoints) { var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5; if (y < 0) { y = 0; } else if (y > 100) { y = 100; } data.push(y); } var res = []; for (var i = 0; i < data.length; ++i) { res.push([i, data[i]]) } return res; } var updateInterval = 30; $("#updateInterval").val(updateInterval).change(function () { var v = $(this).val(); if (v && !isNaN(+v)) { updateInterval = +v; if (updateInterval < 1) { updateInterval = 1; } else if (updateInterval > 2000) { updateInterval = 2000; } $(this).val("" + updateInterval); } }); var plot = $.plot("#real-time-update", [ getRandomData() ], { series: { shadowSize: 0 }, yaxis: { min: 0, max: 100 }, xaxis: { show: !1 }, background:{ color:'#469dff' }, grid: { borderWidth: 0 }, colors: [vihoAdminConfig.primary] }); function update() { plot.setData([getRandomData()]); plot.draw(); setTimeout(update, updateInterval); } update(); })(jQuery); if ($("#flot-categories").length > 0) { var a = { color: vihoAdminConfig.primary, data: [ ["Jan", 25], ["Feb", 8], ["Mar", 4], ["Apr", 13], ["May", 17], ["Jun", 9], ["Jul", 5], ["Aug", 11], ["Sep", 17], ["Oct", 8], ["Nov", 26], ] }; $.plot("#flot-categories", [a], { series: { bars: { show: !0, barWidth: .8, align: "center", fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] } } }, xaxis: { mode: "categories", tickLength: 0 }, grid: { borderWidth: 0 } }) } if ($("#annotations-chart").length > 0) { for (var a = [], b = 0; b < 20; ++b) a.push([b, Math.sin(b)]); var c = [{ data: a, label: "Pressure", color: vihoAdminConfig.primary }], d = [{ color: "#ffffff", yaxis: { from: 1 } }, { color: "#ffffff", yaxis: { to: -1 } }, { color: "#ffffff", lineWidth: 1, xaxis: { from: 1, to: 1 } }, { color: "#ffffff", lineWidth: 1, xaxis: { from: 9, to: 9 } }], e = $("#annotations-chart"), f = $.plot(e, c, { bars: { show: !0, barWidth: .7, fill: 1 }, xaxis: { ticks: [], autoscaleMargin: .02 }, yaxis: { min: -2, max: 2 }, grid: { markings: d, borderWidth: 0 } }), g = f.pointOffset({ x: 2, y: -1.2 }); e.append("
Warming up
"), g = f.pointOffset({ x: 8, y: -1.2 }), e.append("
Actual measurements
"); var h = f.getCanvas().getContext("2d"); h.beginPath(), g.left += 4, h.moveTo(g.left, g.top), h.lineTo(g.left, g.top - 10), h.lineTo(g.left + 10, g.top - 5), h.lineTo(g.left, g.top), h.fillStyle = "#5e6db3", h.fill() } if ($("#flot-basic-chart").length > 0) { for (var a = [], b = 0; b < 14; b += .5) a.push([b, Math.sin(b)]); var c = { color: "#e2c636", data: [ [0, 3], [4, 8], [8, 5], [9, 13] ] }, d = { color: vihoAdminConfig.primary, data: [ [0, 12], [7, 0], null, [0, 2.5], [12, 10.5] ] }; $.plot("#flot-basic-chart", [a, c, d], { grid: { borderWidth: 0 }, bars: { show: !0, lineWidth: 0, fill: !0, fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] } }, colors: [vihoAdminConfig.secondary, vihoAdminConfig.secondary ,vihoAdminConfig.secondary ,vihoAdminConfig.secondary] }) } $(function() { var datasets = { "usa": { label: "USA", data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]] }, "russia": { label: "Russia", data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]] }, "uk": { label: "UK", data: [[1988, 62982], [1989, 62027], [1990, 60696], [1991, 62348], [1992, 58560], [1993, 56393], [1994, 54579], [1995, 50818], [1996, 50554], [1997, 48276], [1998, 47691], [1999, 47529], [2000, 47778], [2001, 48760], [2002, 50949], [2003, 57452], [2004, 60234], [2005, 60076], [2006, 59213]] }, "germany": { label: "Germany", data: [[1988, 55627], [1989, 55475], [1990, 58464], [1991, 55134], [1992, 52436], [1993, 47139], [1994, 43962], [1995, 43238], [1996, 42395], [1997, 40854], [1998, 40993], [1999, 41822], [2000, 41147], [2001, 40474], [2002, 40604], [2003, 40044], [2004, 38816], [2005, 38060], [2006, 36984]] }, "denmark": { label: "Denmark", data: [[1988, 3813], [1989, 3719], [1990, 3722], [1991, 3789], [1992, 3720], [1993, 3730], [1994, 3636], [1995, 3598], [1996, 3610], [1997, 3655], [1998, 3695], [1999, 3673], [2000, 3553], [2001, 3774], [2002, 3728], [2003, 3618], [2004, 3638], [2005, 3467], [2006, 3770]] }, "sweden": { label: "Sweden", data: [[1988, 6402], [1989, 6474], [1990, 6605], [1991, 6209], [1992, 6035], [1993, 6020], [1994, 6000], [1995, 6018], [1996, 3958], [1997, 5780], [1998, 5954], [1999, 6178], [2000, 6411], [2001, 5993], [2002, 5833], [2003, 5791], [2004, 5450], [2005, 5521], [2006, 5271]] }, "norway": { label: "Norway", data: [[1988, 4382], [1989, 4498], [1990, 4535], [1991, 4398], [1992, 4766], [1993, 4441], [1994, 4670], [1995, 4217], [1996, 4275], [1997, 4203], [1998, 4482], [1999, 4506], [2000, 4358], [2001, 4385], [2002, 5269], [2003, 5066], [2004, 5194], [2005, 4887], [2006, 4891]] } }; var i = 0; $.each(datasets, function(key, val) { val.color = i; ++i; }); var choiceContainer = $("#choices"); $.each(datasets, function(key, val) { choiceContainer.append("
" + "
"); }); choiceContainer.find("input").click(plotAccordingToChoices); function plotAccordingToChoices() { var data = []; choiceContainer.find("input:checked").each(function () { var key = $(this).attr("name"); if (key && datasets[key]) { data.push(datasets[key]); } }); if (data.length > 0) { $.plot("#toggling-series-flot", data, { yaxis: { min: 0 }, xaxis: { tickDecimals: 0 }, grid: { borderWidth: 0 }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#e6edef"] }); } } plotAccordingToChoices(); }); $(function() { function a() { $("#stacking-flot-chart").length > 0 && $.plot("#stacking-flot-chart", j, { series: { stack: f, lines: { show: h, fill: !0, steps: i }, bars: { show: g, barWidth: .6 } }, grid: { borderWidth: 0 } }) } for (var b = [], c = 0; c <= 10; c += 1) b.push([c, parseInt(30 * Math.random(), 30)]); for (var d = [], c = 0; c <= 10; c += 1) d.push([c, parseInt(30 * Math.random(), 30)]); for (var e = [], c = 0; c <= 10; c += 1) e.push([c, parseInt(30 * Math.random(), 30)]); var f = 0, g = !0, h = !1, i = !1, j = [{ color: vihoAdminConfig.secondary, data: b }, { color: vihoAdminConfig.primary, data: d }, { color: "#222222", data: e }]; a(), $(".stackControls button").click( function(b) { b.preventDefault(), f = "With stacking" == $(this).text() || null, a() }), $(".graphControls button").on("click", function(b) { b.preventDefault(), g = $(this).text().indexOf("Bars") != -1, h = $(this).text().indexOf("Lines") != -1, i = $(this).text().indexOf("steps") != -1, a() }) }); $(function() { function drawArrow(ctx, x, y, radius){ ctx.beginPath(); ctx.moveTo(x + radius, y + radius); ctx.lineTo(x, y); ctx.lineTo(x - radius, y + radius); ctx.stroke(); } function drawSemiCircle(ctx, x, y, radius){ ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI, false); ctx.moveTo(x - radius, y); ctx.lineTo(x + radius, y); ctx.stroke(); } var data1 = [ [1,1,.5,.1,.3], [2,2,.3,.5,.2], [3,3,.9,.5,.2], [1.5,-.05,.5,.1,.3], [3.15,1.,.5,.1,.3], [2.5,-1.,.5,.1,.3] ]; var data1_points = { show: true, radius: 5, fillColor: "#007bff", errorbars: "xy", xerr: {show: true, asymmetric: true, upperCap: "-", lowerCap: "-"}, yerr: {show: true, color: "red", upperCap: "-"} }; var data2 = [ [.7,3,.2,.4], [1.5,2.2,.3,.4], [2.3,1,.5,.2] ]; var data2_points = { show: true, radius: 5, errorbars: "y", yerr: {show:true, asymmetric:true, upperCap: drawArrow, lowerCap: drawSemiCircle} }; var data3 = [ [1,2,.4], [2,0.5,.3], [2.7,2,.5] ]; var data3_points = { radius: 0, errorbars: "y", yerr: {show:true, upperCap: "-", lowerCap: "-", radius: 5} }; var data4 = [ [1.3, 1], [1.75, 2.5], [2.5, 0.5] ]; var data4_errors = [0.1, 0.4, 0.2]; for (var i = 0; i < data4.length; i++) { data4_errors[i] = data4[i].concat(data4_errors[i]) } var data = [ {color: "#717171", points: data1_points, data: data1, label: "data1"}, {color: "#222222", points: data2_points, data: data2, label: "data2"}, {color: vihoAdminConfig.secondary, lines: {show: true}, points: data3_points, data: data3, label: "data3"}, {color: vihoAdminConfig.primary, bars: {show: true, align: "center", barWidth: 0.25}, data: data4, label: "data4"}, {color: "#e2c636", points: data3_points, data: data4_errors} ]; $.plot($("#error-flot-chart"), data , { legend: { position: "sw", show: true }, series: { lines: { show: false } }, xaxis: { min: 0.6, max: 3.1 }, yaxis: { min: 0, max: 3.5 }, zoom: { interactive: true }, pan: { interactive: true }, grid: { borderWidth: 0 } }); }); $(function() { var data = [], series = Math.floor(Math.random() * 6) + 3; for (var i = 0; i < series; i++) { data[i] = { label: "Series" + (i + 1), data: Math.floor(Math.random() * 100) + 1 } } $.plot('#default-pie-flot-chart', data, { series: { pie: { show: true } }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); $.plot('#default-pie-legend-flot-chart', data, { series: { pie: { show: true } }, legend: { show: false }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); $.plot('#hidden-label-radius-flot-chart', data, { series: { pie: { show: true, radius: 1, label: { show: true, radius: 2/3, threshold: 0.1 } } }, legend: { show: false }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); $.plot('#default-pie-flot-chart-hover', data, { series: { pie: { show: true } }, grid: { hoverable: true, clickable: true }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); $.plot('#custom-label1pie', data, { series: { pie: { show: true, radius: 1, label: { show: true, radius: 1, background: { opacity: 0.8 } } } }, legend: { show: false }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); $.plot('#label-radius-flot-chart', data, { series: { pie: { show: true, radius: 1, label: { show: true, radius: 3/4, background: { opacity: 0.8 } } } }, legend: { show: false }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); $.plot('#title-pie-flot-chart', data, { series: { pie: { show: true, radius: 1, tilt: 0.5, label: { show: true, radius: 1, background: { opacity: 0.8 } }, combine: { color: '#ddd', threshold: 0.1 } } }, legend: { show: false }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); $.plot('#dount-hole-flot-chart', data, { series: { pie: { innerRadius: 0.5, show: true } }, colors: [vihoAdminConfig.primary, "#ba895" ,"#222222" ,"#717171" ,"#e2c636", "#d22d3d" ,"#efefef"] }); }); if ($("#multiple-real-timeupdate ").length > 0) { var a = [], b = 300, c = function() { for (a.length > 0 && (a = a.slice(1)); a.length < b;) { var c = a.length > 0 ? a[a.length - 1] : 50, d = c + 10 * Math.random() - 5; d < 0 ? d = 0 : d > 100 && (d = 100), a.push(d) } for (var e = [], f = 0; f < a.length; ++f) e.push([f, a[f]]); return e }, d = [], b = 300, e = function() { for (d.length > 0 && (d = d.slice(1)); d.length < b;) { var a = d.length > 0 ? d[d.length - 1] : 50, c = a + 10 * Math.random() - 5; c < 0 ? c = 0 : c > 100 && (c = 100), d.push(c) } for (var e = [], f = 0; f < d.length; ++f) e.push([f, d[f]]); return e }, f = 30, g = 30; g && !isNaN(+g) && (f = +g, f < 1 ? f = 1 : f > 2e3 && (f = 2e3), $(this).val("" + f)); var h = { color: "#544fff", data: c() }, i = { color: "#000000", data: e() }, j = $.plot("#multiple-real-timeupdate", [h, i], { series: { shadowSize: 0 }, yaxis: { min: 0, max: 100 }, xaxis: { show: !1 }, grid: { borderWidth: 0 }, colors: [vihoAdminConfig.primary, vihoAdminConfig.secondary] }), k = function() { j.setData([c(), e()]), j.draw(), setTimeout(k, f) }; k() }