%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/flot/bar/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/flot/bar/annotations.js |
/*========================================================================================= File Name: annotation.js Description: Flot annotation chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Annotation chart // ------------------------------ $(window).on("load", function(){ var d1 = []; for (var i = 0; i < 20; ++i) { d1.push([i, Math.sin(i)]); } var data = [{ data: d1, label: "Pressure", color: "#5175E0" }]; var markings = [ { color: "#f6f6f6", yaxis: { from: 1 } }, { color: "#f6f6f6", yaxis: { to: -1 } }, { color: "#000", lineWidth: 1, xaxis: { from: 2, to: 2 } }, { color: "#000", lineWidth: 1, xaxis: { from: 8, to: 8 } } ]; var placeholder = $("#annotation"); var plot = $.plot(placeholder, data, { bars: { show: true, barWidth: 0.5, fill: true, lineWidth: 0, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.8 } ] } }, xaxis: { ticks: [], autoscaleMargin: 0.02 }, yaxis: { min: -2, max: 2 }, grid: { borderWidth: 1, borderColor: "#e9e9e9", color: '#999', minBorderMargin: 20, labelMargin: 10, margin: { top: 8, bottom: 20, left: 20 }, markings: markings }, }); var o = plot.pointOffset({ x: 2, y: -1.2}); // Append it to the placeholder that Flot already uses for positioning placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Warming up</div>"); o = plot.pointOffset({ x: 8, y: -1.2}); placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Actual measurements</div>"); // Draw a little arrow on top of the last label to demonstrate canvas // drawing var ctx = plot.getCanvas().getContext("2d"); ctx.beginPath(); o.left += 4; ctx.moveTo(o.left, o.top); ctx.lineTo(o.left, o.top - 10); ctx.lineTo(o.left + 10, o.top - 5); ctx.lineTo(o.left, o.top); ctx.fillStyle = "#000"; ctx.fill(); });