plotData: function(state, options) {
// If no options specify by user, use default options
if(options != null) {
this.options = options;
if(this.options.xaxis.max > this.limit) {
this.limit = this.options.xaxis.max;
}
}
var labelsMap = this.labelsMap;
//set label legends to shorter label
this.options.legend = {
labelFormatter: function(label, series){
var split = label.split(".");
var shortLabel = split[0] +"."+split[1]+"....." + split[split.length-1];
labelsMap[label] = {label : shortLabel};
return '<div class="legendLabel" id="'+label+'" title="'+label+'">'+shortLabel+'</div>';
}
};
if (state!= null) {
if(state instanceof Array){
this.datasets.push({
data : state
});
}
else{
var value = state.getValue();
var id = state.getInstancePath();
this.datasets.push({
label : id,
variable : state,
data : [ [0,value] ]
});
}
}
var plotHolder = $("#" + this.id);
if(this.plot == null) {
this.plot = $.plot(plotHolder, this.datasets, this.options);
plotHolder.resize();
}
else {
this.plot = $.plot(plotHolder, this.datasets, this.options);
}
//fix conflict between jquery and bootstrap tooltips
$.widget.bridge('uitooltip', $.ui.tooltip);
//show tooltip for legends
$(".legendLabel").tooltip();
return "Line plot added to widget";
},
refresh_now() {
if (this.element.height() === 0 || this.element.width() === 0)
return;
if (this.flot === null)
this.flot = $.plot(this.element, this.flot_data, this.options);
this.flot.setData(this.flot_data);
var axes = this.flot.getAxes();
/* Walking and fetching samples are not synchronized, which
* means that a walk step might reveal a sample that hasn't
* been fetched yet. To reduce flicker, we cut off one extra
* sample at the end.
*/
axes.xaxis.options.min = this.grid.beg * this.interval;
axes.xaxis.options.max = (this.grid.end - 2) * this.interval;
if (this.options.setup_hook)
this.options.setup_hook(this.flot);
/* This makes sure that the axes are displayed even for an
* empty plot.
*/
axes.xaxis.show = true;
axes.xaxis.used = true;
axes.yaxis.show = true;
axes.yaxis.used = true;
this.flot.setupGrid();
this.flot.draw();
if (this.options.post_hook)
this.options.post_hook(this.flot);
}
function drawPieChart(placeholder, data, position) {
$.plot(placeholder, data, {
series: {
pie: {
show: true,
tilt: 0.8,
highlight: {
opacity: 0.25
},
stroke: {
color: '#fff',
width: 2
},
startAngle: 2
}
},
legend: {
show: true,
position: position || "ne",
labelBoxBorderColor: null,
margin: [-30, 15]
},
grid: {
hoverable: true,
clickable: true
}
});
}
setLegend : function(variable, legend){
var labelsMap = this.labelsMap;
//set label legends to shorter label
this.options.legend = {
labelFormatter: function(label, series){
var shortLabel;
if(variable.getInstancePath() != label){
shortLabel = labelsMap[label].label;
}
else{
shortLabel = legend;
labelsMap[label].label = shortLabel;
}
return '<div class="legendLabel" id="'+label+'" title="'+label+'">'+shortLabel+'</div>';
}
};
this.plot = $.plot($("#" + this.id), this.datasets,this.options);
//fix conflict between jquery and bootstrap tooltips
$.widget.bridge('uitooltip', $.ui.tooltip);
//show tooltip for legends
$(".legendLabel").tooltip();
},
$(() => {
const plotOpts = {
grid: { show: false },
colors: [colors.value[3], colors.value[1]],
legend: { show: false },
lines: { show: true },
yaxis: { min: -1 }
}
$.plot(
$('#reliability'),
[
{
data: [
[1, 10],
[2, 10],
[3, 9],
[4, 8],
[5, 6],
[6, 4],
[7, 2],
[8, 1],
[9, 0],
[10, 0]
]
}
],
plotOpts
)
})
function renderRightPlot(data) {
if (data.ranges.length < 1){
$rightPlot.html('<p class="error">No se han definido rangos</p>')
} else {
const plot_data = []
for (const range of data.ranges) {
let label
if (range.range === null){
label = 'No reporta densidad'
} else {
// ES6 Object destructuring
let {min, max} = range.range
// ES6 Template literal
label = `${min} PPG - ${max} PPG`
}
plot_data.push({
label,
data: range.occurrences
})
}
$.plot($rightPlot, plot_data, plot_options)
}
$fluidName.html(data.fluid_name)
// ES6 Object destructuring
let {min, max} = data
renderDens($minDensFl, min)
renderDens($maxDensFl, max)
}
$(".locochart",this.el).bind("plotselected", function (event, ranges) {
// clamp the zooming to prevent eternal zoom
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
}
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
}
// Save the current range so that switching plot scale (log/linear)
// can preserve the zoom level:
self.ranges = ranges;
// do the zooming
this.plot = $.plot($(".locochart",this.el), self.packedData,
$.extend(true, {}, self.plotOptions, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
})
);
// don't fire event on the overview to prevent eternal loop
self.overview.setSelection(ranges, true);
});
// Note: setupMarker and setupMarkers *are* different.
// See markers_data.on_open_marker
function setupMarker(infoWindow, field) {
// Infowindow
const plotId = 'plot_' + field.id
if ($('#' + plotId).length > 0) return
const plotHtml = `
<div style="width:250px; height:250px;" id="${plotId}">
</div>`
let content = infoWindow.getContent()
content += plotHtml
infoWindow.setContent(content)
const dist = field.distribution
const data = []
for (const fluid of dist)
data.push({
label: fluid.name,
data: fluid.occurrences,
color: fluid.color,
fluid_id: fluid.id
})
const $plot = $('#' + plotId)
$.plot($plot, data, plot_options)
// Listen to plotclick
$plot.bind('plotclick', (event, pos, obj) => {
markerPlotClick(event, obj, field.id, data)
})
}
const plotFn = () => {
const plot = $.plot($targetElem, series, options)
flotAddLabels(plot, {
yOffset: -15,
process: value => `${value} (${percentage(value / sum)})`,
})
}
resetPlot: function() {
if(this.plot != null) {
this.datasets = [];
this.options = this.defaultPlotOptions;
var plotHolder = $("#" + this.id);
this.plot = $.plot(plotHolder, this.datasets, this.options);
}
},
plotXYData: function(dataX, dataY, options) {
// If no options specify by user, use default options
if(options != null) {
this.options = options;
if(this.options.xaxis.max > this.limit) {
this.limit = this.options.xaxis.max;
}
}
if(newDataX.name != null && newDataY.name != null) {
for(var dataset in this.datasets) {
if(newDataX.name + "/" + newDataY.name == this.datasets[dataset].label) {
return this.name + " widget is already plotting object " + newDataX.name + "/" + newDataY.name;
}
}
this.datasets.push({
label: newDataX.name + "/" + newDataY.name,
data: [
[ newDataX.value, newDataY.value ]
]
});
}
else {
this.datasets.push({
label: "",
data: newDataX
});
this.datasets.push({
label: "",
data: newDataY
});
}
var plotHolder = $("#" + this.id);
if(this.plot == null) {
this.plot = $.plot(plotHolder, this.datasets, this.options);
plotHolder.resize();
}
else {
this.plot = $.plot(plotHolder, this.datasets, this.options);
}
return "Line plot added to widget";
},
setOptions: function(options) {
this.options = options;
if(this.options.xaxis != null) {
if(this.options.xaxis.max > this.limit) {
this.limit = this.options.xaxis.max;
}
}
this.plot = $.plot($("#" + this.id), this.datasets, this.options);
},
addPlot: function() {
var d1 = [ 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
var data = [
{ label: "8+ bft", color:"red", data: d1, rose: {show: true } },
{ label: "4-7", color:"orange", data: d1, rose: {show: true } },
{ label: "1-3", color:"green", data: d1, rose: {show: true} }
];
this.plot = $.plot($(".chart", this.el),data, this.plotOptions);
},
function maybe_start() {
if (running && outer_div.width() > 0 && outer_div.height() > 0) {
if (!plot) {
sync_divs();
plot = $.plot(inner_div, data, options);
} else
resize();
if (starting)
window.clearInterval(starting);
} else if (!starting) {
starting = window.setInterval(maybe_start, 500);
}
}
function drawPlot(plotConfig) {
if (!plotConfig || !plotConfig.length) {
$elem.empty();
return;
}
if (!$('.chart-canvas', $elem).length) $elem.html(template);
var canvasElem = $('.chart-canvas', $elem);
var title = _(plotConfig).map('_title').compact().last();
$('.chart-title', $elem).text(title == null ? '' : title);
var options = _.cloneDeep(defaultOptions);
var series = _.map(plotConfig, function (series, index) {
series = _.cloneDeep(_.defaults(series, {
shadowSize: 0,
lines: {
lineWidth: 3
}
}));
series._id = index;
if (series._hide) {
series.data = [];
//series.color = "#ddd";
series.label = '(hidden) ' + series.label;
}
if (series._global) {
_.merge(options, series._global);
}
return series;
});
$scope.plot = $.plot(canvasElem, _.compact(series), options);
legendScope.$destroy();
legendScope = $scope.$new();
// Used to toggle the series, and for displaying values on hover
legendValueNumbers = canvasElem.find('.ngLegendValueNumber');
_.each(canvasElem.find('.ngLegendValue'), function (elem) {
$compile(elem)(legendScope);
});
}
seajs.use(["jquery/flot/0.8.1/jquery.flot-debug", "jquery/flot/0.8.1/jquery-flot.resize-debug"], function () {
var d1 = [], i;
for (i = 0; i < Math.PI * 2; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
var d2 = [];
for (i = 0; i < Math.PI * 2; i += 0.5) {
d2.push([i, Math.cos(i)]);
}
var d3 = [];
for (i = 0; i < Math.PI * 2; i += 0.2) {
d3.push([i, Math.tan(i)]);
}
var sales_charts = trendNode.css({'width': '100%', 'height': '220px'});
$.plot(sales_charts, [
{ label: "Domains", data: d1 },
{ label: "Hosting", data: d2 },
{ label: "Services", data: d3 }
], {
hoverable: true,
shadowSize: 0,
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
tickLength: 0
},
yaxis: {
ticks: 10,
min: -2,
max: 2,
tickDecimals: 3
},
grid: {
backgroundColor: { colors: [ "#fff", "#fff" ] },
borderWidth: 1,
borderColor: '#555'
}
});
});
render: function() {
var param_ds = {
color: '#5EB7FF',
label: 'Data Series',
data: this.data,
bars: {
show: true,
wovodat: true
},
dataType: 'ds'
},
option = {
grid: {
hoverable: true,
},
xaxis: {
min: this.timeRange.get('startTime'),
max: this.timeRange.get('endTime'),
mode: 'time',
autoscale: true
},
yaxis: {
min: 0,
max: 200,
autoscale: true,
panRange: false,
zoomRange: false
},
pan: {
interactive: true
},
zoom: {
interactive: true
}
};
this.$el.html('<div></div>');
this.$el.width(800);
this.$el.height(200);
this.graph = $.plot(this.$el, [param_ds], option);
this.$el.bind('plothover', this.onHover);
this.$el.bind('plotpan', this.onPan);
this.$el.bind('plotzoom', this.onPan);
},
// Renders the plot on the screen using flot jQuery plugin.
// data is the JSON response (already parsed)
function renderPlot(data) {
const min = Math.min(data.points[0].grain_size, data.x10)
const x10_line = makeLines(data.x10, 10, min)
const x60_line = makeLines(data.x60, 60, min)
const x90_line = makeLines(data.x90, 90, min)
const x50_line = makeLines(data.x50, 50, min)
const x30_line = makeLines(data.x30, 30, min)
const series = [
flattenPoints(data.points),
x10_line,
x60_line,
x90_line,
x50_line,
x30_line
]
$.plot($plot, series, plot_options)
setupAxes()
}
render: function(options) {
var el = this.$el,
param_ed_for = {
label: 'Alert level',
data: options.data,
bars: {
show: true,
wovodat: true,
drawBottom: true,
lineWidth: 0
},
dataType: 'ed_for'
},
option = {
grid: {
hoverable: true
},
xaxis: {
min: options.startTime,
max: options.endTime,
autoscale: true,
mode: 'time',
timeformat: '%Y-%m'
},
yaxis: {
show:false,
panRange: false
}
};
if (!options || !options.startTime || !options.endTime || !options.data || !options.data.length) {
el.html('');
return;
}
el.width(800);
el.height(60);
$.plot(el, [param_ed_for], option);
el.bind('plothover', this.onHover);
},
function plotOverviewGraph() {
// We want to show lines for series in the overview plot, if they are visible
$scope.seriesList.forEach(function (series) {
series.flotSeries.points.show = false;
series.flotSeries.lines.show = series.visible;
});
$scope.overviewPlot = $.plot(
$('#overview-plot'),
$scope.seriesList.map(function (series) {
return series.flotSeries;
}),
{
xaxis: { mode: 'time' },
selection: { mode: 'xy', color: '#97c6e5' },
series: { shadowSize: 0 },
lines: { show: true },
points: { show: false },
legend: { show: false },
grid: {
color: '#cdd6df',
borderWidth: 2,
backgroundColor: '#fff',
hoverable: true,
clickable: true,
autoHighlight: false,
},
},
);
// Reset $scope.seriesList with lines.show = false
$scope.seriesList.forEach(function (series) {
series.flotSeries.points.show = series.visible;
series.flotSeries.lines.show = false;
});
$('#overview-plot').on('plotunselected', plotUnselected);
$('#overview-plot').on('plotselected', plotSelected);
}
function markerPlotClick(event, obj, field_id, data) {
const fluid_id = obj.series.fluid_id
// Overlay
$overlay.fadeIn()
// Empty DOM elements
emptyAll()
// Field info
getFieldInfo(field_id)
.then(setupFieldInfo, handleFieldInfoError)
// Left plot contents
$.plot($leftPlot, data, plot_options)
// Right plot contents
setupRightPlot(field_id, fluid_id)
// Listen to plotclick
$leftPlot.bind('plotclick', (event, pos, obj) => {
leftPlotClick(event, obj, field_id)
})
}
define(function(require){"use strict";var $=require("jquery"),_=require("underscore"),Backbone=require("backbone");require("flot");require("flot_resize");require("flot_windrose");return Backbone.View.extend({settings:{points:150,instant:true,showtips:true,get:function(key){return this[key]}},initialize:function(options){if(options&&options.settings){for(var prop in options.settings){this.settings[prop]=options.settings[prop]}}this.livedata=[];this.previousPoint=null;this.plotOptions={series:{rose:{active:true,roseSize:.8,leafSize:.5,drawGrid:{gridMode:"ticks",labelPos:.5,drawValue:true}}},grid:{hoverable:true,clickable:true,tickLabel:["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"]}}},render:function(){console.log("Rendering a flow wind rose widget");this.$el.html('<div class="chart" style="position: relative; min-height: 350px;"></div>');this.addPlot();return this},addPlot:function(){var d1=[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];var data=[{label:"8+",color:"red",data:d1,rose:{show:true}},{label:"4-7",color:{colors:["yellow","orange","red"]},data:d1,rose:{show:true}},{label:"1-3",color:"green",data:d1,rose:{show:true}}];this.plot=$.plot($(".chart",this.el),data,this.plotOptions)},trimLiveData:function(){if(this.livedata.length>=this.settings.points){this.livedata=this.livedata.slice(1)}},fastAppendPoint:function(data){if(this.settings.points)this.trimLiveData();var stamp=data.timestamp?new Date(data.timestamp).getTime():(new Date).getTime();this.livedata.push({stamp:stamp,dir:data.value.dir,speed:data.value.speed})},redraw:function(){if(this.livedata.length<2)return;var force13=[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];var force47=[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];var force8p=[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],latest=0;for(var i=1;i<this.livedata.length;i++){var data=this.livedata[i-1];var duration=this.livedata[i].stamp-data.stamp;var dir=data.dir/22.5;if(data.speed<10){force13[dir]+=duration}else if(data.speed<33){force47[dir]+=duration}else{force8p[dir]+=duration}}var timespan=this.livedata[this.livedata.length-1].stamp-this.livedata[0].stamp;for(var i=0;i<16;i++){force13[i]=force13[i]/timespan*100;force47[i]=force47[i]/timespan*100;force8p[i]=force8p[i]/timespan*100;force47[i]+=force13[i];force8p[i]+=force47[i]}if(this.settings.instant){latest=this.livedata[this.livedata.length-1].dir}var data=[{label:"8+",color:"red",data:force8p,rose:{show:true}},{label:"4-7",color:{colors:["yellow","orange","red"]},data:force47,rose:{show:true}},{label:"1-3",color:"green",data:force13,rose:{show:true}},{color:"blue",data:[latest],rose:{show:this.settings.instant,pointer:true}}];this.plot.setData(data);this.plot.setupGrid();this.plot.draw()},appendPoint:function(data){this.fastAppendPoint(data);this.redraw()}})});
addPlot: function () {
var self = this;
// Now initialize the plot area:
// this.plotOptions.legend = { container: $('#legend',this.el) };
// In some instances, we get an error here, depending on how/when we
// called the initialization. if that's the case, then just retry automatically
// after 250ms
try {
this.plot = $.plot($(".chart", this.el), [{
data: [],
label: "",
color: this.color
}], this.plotOptions);
} catch (e) {
setTimeout(this.addPlot, 250);
return;
}
// Adjust whether we want a log display, or linear (setup in global settings)
var log_disabled = (this.flotplot_settings.log) && (this.flotplot_settings.log == false);
if (settings.get('cpmscale') == "log") {
this.plotOptions.yaxis = {
min: 1,
//ticks: [1,10,30,50,100,500,1000,1500],
transform: function (v) {
return Math.log(v + 10);
},
inverseTransform: function (v) {
return Math.exp(v) - 10;
}
};
}
if (('yaxis' in this.plotOptions) || log_disabled) {
delete this.plotOptions.yaxis.min;
delete this.plotOptions.yaxis.transform;
delete this.plotOptions.yaxis.inverseTransform;
}
// Add Tooltips
if (!this.flotplot_settings.showtips)
return;
$(".chart", this.el).bind("plothover", function (event, pos, item) {
if (item) {
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
self.showTooltip(item.pageX, item.pageY,
"<small>" + ((self.plotOptions.xaxis.timezone) ?
((self.plotOptions.xaxis.timezone === 'UTC') ?
new Date(x).toUTCString() :
new Date(x).toString()) : x) + "</small><br>" + item.series.label + ": <strong>" + y + "</strong>");
} else {
$("#tooltip").remove();
}
});
// Connect overview and main charts
if (this.flotplot_settings.selectable) {
$(".chart", this.el).on("plotselected", function (event, ranges) {
// clamp the zooming to prevent eternal zoom
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
}
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
}
// Save the current range so that switching plot scale (log/linear)
// can preserve the zoom level:
self.ranges = ranges;
// do the zooming
self.plotOptions = $.extend(true, {}, self.plotOptions, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
},
yaxis: {
min: ranges.yaxis.from,
max: ranges.yaxis.to
}
});
self.render();
self.redraw();
// Pass event onwards
self.trigger("plotselected", event, ranges);
});
}
$('.chart', this.el).css('height', this.$el.parent().css('height'));
if (this.flotplot_settings.vertical_stretch ||
this.flotplot_settings.vertical_stretch_parent) {
var self = this;
var rsc = function () {
var chartheight;
if (self.flotplot_settings.vertical_stretch) {
chartheight = window.innerHeight - $(self.el).offset().top - 20;
if (settings.get("showstream"))
chartheight -= ($('#showstream').height() + 20);
} else {
chartheight = $(self.el.parentElement).height();
}
$('.chart', self.el).css('height', chartheight + 'px');
// Manually resize the plot (no need for the Flot-resize plugin
// to do this, since it adds stupid timers and other niceties...
self.plot.resize();
self.plot.setupGrid();
self.plot.draw();
}
this.rsc = rsc;
$(window).on('resize', this.rsc);
rsc();
}
},
function addScatterChart() {
var width = elem.width();
var height = elem.height();
var size = Math.min(width, height);
var plotCanvas = $('<div></div>');
var plotCss = {
top: '10px',
margin: 'auto',
position: 'relative',
height: (size - 20) + 'px'
};
plotCanvas.css(plotCss);
var $panelContainer = elem.parents('.panel-container');
var backgroundColor = $panelContainer.css('background-color');
var options = {
legend: {
show: false
},
series: {
pie: {
show: true,
stroke: {
color: backgroundColor,
width: parseFloat(ctrl.panel.strokeWidth).toFixed(1)
},
label: {
show: ctrl.panel.legend.show && ctrl.panel.legendType === 'On graph',
formatter: formatter
},
highlight: {
opacity: 0.0
}
}
},
grid: {
hoverable: true,
clickable: false
}
};
if (panel.pieType === 'donut') {
options.series.pie.innerRadius = 0.5;
}
elem.html(plotCanvas);
$.plot(plotCanvas, ctrl.data, options);
plotCanvas.bind("plothover", function (event, pos, item) {
if (!item) {
$tooltip.detach();
return;
}
var body;
var percent = parseFloat(item.series.percent).toFixed(2);
var formatted = ctrl.formatValue(item.series.data[0][1]);
body = '<div class="graph-tooltip-small"><div class="graph-tooltip-time">';
body += '<div class="graph-tooltip-value">' + item.series.label + ': ' + formatted;
body += " (" + percent + "%)" + '</div>';
body += "</div></div>";
$tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
});
}
setAxisLabel: function(labelY, labelX) {
this.options.yaxis.axisLabel = labelY;
this.plot = $.plot($("#" + this.id), this.datasets,this.options);
}
function drawPlot(plotConfig) {
if (!plotConfig || !plotConfig.length) {
$elem.empty();
return;
}
if (!$('.chart-canvas', $elem).length) $elem.html(template);
var canvasElem = $('.chart-canvas', $elem);
var title = _(plotConfig).map('_title').compact().last();
$('.chart-title', $elem).text(title == null ? '' : title);
var options = _.cloneDeep(defaultOptions);
// Get the X-axis tick format
var format = getxAxisFormatter($scope.interval);
// Use moment to format ticks so we get timezone correction
options.xaxis.tickFormatter = function (val) {
return moment(val).format(format);
};
// Calculate how many ticks can fit on the axis
var tickLetterWidth = 7;
var tickPadding = 45;
options.xaxis.ticks = Math.floor($elem.width() / ((format.length * tickLetterWidth) + tickPadding));
var series = _.map(plotConfig, function (series, index) {
series = _.cloneDeep(_.defaults(series, {
shadowSize: 0,
lines: {
lineWidth: 3
}
}));
series._id = index;
if (series._hide) {
series.data = [];
//series.color = "#ddd";
series.label = '(hidden) ' + series.label;
}
if (series._global) {
_.merge(options, series._global);
}
return series;
});
$scope.plot = $.plot(canvasElem, _.compact(series), options);
legendScope.$destroy();
legendScope = $scope.$new();
// Used to toggle the series, and for displaying values on hover
legendValueNumbers = canvasElem.find('.ngLegendValueNumber');
_.each(canvasElem.find('.ngLegendValue'), function (elem) {
$compile(elem)(legendScope);
});
}
function addPieChart() {
var width = elem.width();
var height = elem.height();
var size = Math.min(width, height);
var plotCanvas = $('<div></div>');
var plotCss = {
top: '10px',
margin: 'auto',
position: 'relative',
height: (size - 20) + 'px'
};
plotCanvas.css(plotCss);
var $panelContainer = elem.parents('.panel-container');
var options = {
legend: {
show: false
},
series: {
pie: {
innerRadius: 0.5,
show: true,
stroke: {
// stroke color does not support rgba colors
color: 'rgb(255,255,255)',
width: parseFloat(ctrl.panel.strokeWidth).toFixed(1)
},
label: {
show: ctrl.panel.legend.show && ctrl.panel.legendType === 'On graph',
formatter: formatter
},
highlight: {
opacity: 0.0
}
}
},
grid: {
hoverable: true,
clickable: ctrl.panel.clickable
}
};
if (panel.pieType === 'donut') {
options.series.pie.innerRadius = 0.5;
} else {
options.series.pie.innerRadius = 0;
}
elem.html(plotCanvas);
var plot = $.plot(plotCanvas, ctrl.data, options);
plotCanvas.bind("plothover", function (event, pos, item) {
var $panelContainer = $(event.target).parents(".panel-container");
if (!item) {
_.each( $panelContainer.find(".graph-legend-series"), function(legend) {
$(legend).css("opacity","1.0");
});
$tooltip.detach();
return;
}
_.each( $panelContainer.find(".graph-legend-series"), function(legend) {
if ( $(legend).attr("data-series-key") !== item.series.label ) {
$(legend).css("opacity","0.5");
} else {
$(legend).css("opacity","1");
}
});
var body;
var percent = parseFloat(item.series.percent).toFixed(2);
var formatted = ctrl.formatValue(item.series.data[0][1]);
body = '<div class="graph-tooltip-small"><div class="graph-tooltip-time">';
body += '<div class="graph-tooltip-value">' + item.series.label + ': ' + formatted;
body += " (" + percent + "%)" + '</div>';
body += "</div></div>";
$tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
});
if (ctrl.panel.clickable) {
plotCanvas.bind("plotclick", function (evt, pos, item) {
ctrl.handle_click_event(this, evt, item.series.label.trim());
});
}
}
$(function() {
var d1 = [[0, 501], [1, 620], [2, 437], [3, 361], [4, 549], [5, 618], [6, 570], [7, 758], [8, 658], [9, 538], [10, 488] ];
var d2 = [[0, 401], [1, 520], [2, 337], [3, 261], [4, 449], [5, 518], [6, 470], [7, 658], [8, 558], [9, 438], [10, 388] ];
var data = ([{
label: "New Visitors",
data: d1,
lines: {
show: true,
fill: true,
fillColor: {
colors: ["rgba(255,255,255,.4)", "rgba(183,236,240,.4)"]
}
}
},
{
label: "Unique Visitors",
data: d2,
lines: {
show: true,
fill: true,
fillColor: {
colors: ["rgba(255,255,255,.0)", "rgba(253,96,91,.7)"]
}
}
}
]);
var options = {
grid: {
backgroundColor:
{
colors: ["#ffffff", "#f4f4f6"]
},
hoverable: true,
clickable: true,
tickColor: "#eeeeee",
borderWidth: 1,
borderColor: "#eeeeee"
},
// Tooltip
tooltip: true,
tooltipOpts: {
content: "%s X: %x Y: %y",
shifts: {
x: -60,
y: 25
},
defaultTheme: false
},
legend: {
labelBoxBorderColor: "#000000",
container: $("#main-chart-legend"), //remove to show in the chart
noColumns: 0
},
series: {
stack: true,
shadowSize: 0,
highlightColor: 'rgba(000,000,000,.2)'
},
// lines: {
// show: true,
// fill: true
//
// },
points: {
show: true,
radius: 3,
symbol: "circle"
},
colors: ["#5abcdf", "#ff8673"]
};
var plot = $.plot($("#main-chart #main-chart-container"), data, options);
});
$q.all(highlightPromises).then(function () {
// plot the actual graph
$scope.plot = $.plot(
$('#graph'),
$scope.seriesList.map(function (series) {
return series.flotSeries;
}),
{
xaxis: { mode: 'time' },
series: { shadowSize: 0 },
selection: { mode: 'xy', color: '#97c6e5' },
lines: { show: false },
points: { show: true },
legend: { show: false },
grid: {
color: '#cdd6df',
borderWidth: 2,
backgroundColor: '#fff',
hoverable: true,
clickable: true,
autoHighlight: false,
markings: markings,
},
},
);
updateSelectedItem(null);
highlightDataPoints();
plotOverviewGraph();
zoomGraph();
if ($scope.selectedDataPoint) {
showTooltip($scope.selectedDataPoint);
}
function updateSelectedItem() {
if (!$scope.selectedDataPoint) {
hideTooltip();
}
}
$('#graph').on('plothover', function (event, pos, item) {
// if examining an item, disable this behaviour
if ($scope.selectedDataPoint) return;
$('#graph').css({ cursor: item ? 'pointer' : '' });
if (item && item.series.thSeries) {
if (item.seriesIndex !== $scope.prevSeriesIndex ||
item.dataIndex !== $scope.prevDataIndex) {
var seriesDataPoint = getSeriesDataPoint(item);
showTooltip(seriesDataPoint);
$scope.prevSeriesIndex = item.seriesIndex;
$scope.prevDataIndex = item.dataIndex;
}
} else {
hideTooltip();
$scope.prevSeriesIndex = null;
$scope.prevDataIndex = null;
}
});
$('#graph').on('plotclick', function (e, pos, item) {
if (item) {
$scope.selectedDataPoint = getSeriesDataPoint(item);
showTooltip($scope.selectedDataPoint);
updateSelectedItem();
} else {
$scope.selectedDataPoint = null;
hideTooltip();
$scope.$digest();
}
updateDocument();
highlightDataPoints();
});
$('#graph').on('plotselected', function (event, ranges) {
$scope.plot.clearSelection();
plotSelected(event, ranges);
zoomGraph();
});
// Close pop up when user clicks outside of the graph area
$('html').click(function () {
$scope.closePopup();
});
// Stop propagation when user clicks inside the graph area
$('#graph, #graph-tooltip').click(function (event) {
event.stopPropagation();
});
});
addPlot: function() {
var self=this;
if (this.deviceLogs == null || this.deviceLogs.length == 0)
return;
$('#log_size',this.el).html(this.deviceLogs.getOverallLength());
$('#log_start',this.el).html(new Date(this.deviceLogs.getLogsStart()).toString());
$('#log_end',this.el).html(new Date(this.deviceLogs.getLogsEnd()).toString());
// Restore current zoom level if it exists:
if (this.ranges) {
this.plot = $.plot($(".locochart",this.el), this.packedData,
$.extend(true, {}, this.plotOptions, {
xaxis: { min: this.ranges.xaxis.from, max: this.ranges.xaxis.to },
yaxis: { min: this.ranges.yaxis.from, max: this.ranges.yaxis.to }
})
);
} else {
this.plot = $.plot($(".locochart", this.el), this.packedData, this.plotOptions);
};
$(".locochart", this.el).bind("plothover", function (event, pos, item) {
if (item) {
if (this.previousPoint != item.dataIndex) {
this.previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
self.showTooltip(item.pageX, item.pageY,
"<small>" + ((settings.get('timezone') === 'UTC') ?
new Date(x).toUTCString() :
new Date(x).toString()) + "</small><br>" + item.series.label + ": <strong>" + y + "</strong>");
}
} else {
$("#tooltip").remove();
this.previousPoint = null;
}
});
// Create the overview chart:
this.overview = $.plot($("#overview",this.el), this.packedData, this.overviewOptions);
// Connect overview and main charts
$(".locochart",this.el).bind("plotselected", function (event, ranges) {
// clamp the zooming to prevent eternal zoom
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
}
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
}
// Save the current range so that switching plot scale (log/linear)
// can preserve the zoom level:
self.ranges = ranges;
// do the zooming
this.plot = $.plot($(".locochart",this.el), self.packedData,
$.extend(true, {}, self.plotOptions, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
})
);
// don't fire event on the overview to prevent eternal loop
self.overview.setSelection(ranges, true);
});
$("#overview",this.el).bind("plotselected", function (event, ranges) {
self.plot.setSelection(ranges);
});
// Last, update the save data URL to point to the data we just displayed:
this.saveDataUrl();
},