draw: function() { var options = this.options; var $chart = this.$chart; var xFormat = options.data_schema.label.type; var yFormat = options.data_schema.value.type; var rawData = this.data; if (!$chart.get(0).clientWidth) { return; } if (dataFormatter.isValueNumerical(xFormat)) { var sort = function(rawData) { rawData.sort(function(first, second) { if (first.label === null || first.label === undefined) { return -1; } if (second.label === null || second.label === undefined) { return 1; } var firstLabel = dataFormatter.parseValue(first.label, xFormat); var secondLabel = dataFormatter.parseValue(second.label, xFormat); return firstLabel - secondLabel; }); }; _.each(rawData, sort); } var connectDots = options.settings.connect_dots_with_line; var colors = this.config.default_settings.chartColors; var count = 0; var charts = []; var getXLabel = function(data) { var label = dataFormatter.formatValue(data, xFormat); if (label === null) { var number = parseInt(data); if (rawData.length > number) { label = rawData[number].label === null ? 'N/A' : rawData[number].label; } else { label = ''; } } return label; }; var getYLabel = function(data) { var label = dataFormatter.formatValue(data, yFormat); if (label === null) { var number = parseInt(data); if (rawData.length > number) { label = rawData[data].value === null ? 'N/A' : rawData[data].value; } else { label = ''; } } return label; }; var makeChart = function(rawData, count, key) { var chartData = []; for (var i in rawData) { if (!rawData.hasOwnProperty(i)) { continue; } var yValue = dataFormatter.parseValue(rawData[i].value, yFormat); yValue = yValue === null ? parseInt(i) : yValue; var xValue = dataFormatter.parseValue(rawData[i].label, xFormat); xValue = xValue === null ? parseInt(i) : xValue; var item = [xValue, yValue]; chartData.push(item); } return { label: key, data: chartData, color: colors[count % colors.length], markers: { show: false }, points: { show: !connectDots } }; }; _.each(rawData, function(rawData, key) { var result = makeChart(rawData, count, key); count++; charts.push(result); }); Flotr.draw( $chart.get(0), charts, { colors: colors, title: ' ', fontColor: options.settings.chartFontColor, fontSize: options.settings.chartFontSize * (this.narrowScreen ? 0.8 : 1), lines: { show: connectDots }, mouse: { track: true, relative: true, trackFormatter: function(pointData) { return pointData.series.label + ', ' + getXLabel(pointData.x) + ': ' + getYLabel(pointData.y); } }, yaxis: { autoscale: true, autoscaleMargin: 1, tickFormatter: function(y) { return getYLabel(y); }, title: options.data_schema.value.label + ' ' }, xaxis: { autoscale: true, autoscaleMargin: 0, tickFormatter: function(x) { return getXLabel(x); }, title: this.narrowScreen ? ' ' : options.data_schema.label.label, mode: options.xaxis.mode, noTicks: options.xaxis.noTicks, labelsAngle: this.narrowScreen ? 90 : 0, margin: true }, HtmlText: false, grid: { verticalLines: false }, legend: { show: true, noColumns: 1, position: 'nw' } } ); },
draw: function() { var $chart = this.$chart; var options = this.options; var xFormat = options.data_schema.label.type; var yFormat = options.data_schema.value.type; if (!$chart.get(0).clientWidth) { return; } var rawData = this.data; if (dataFormatter.isValueNumerical(xFormat)) { this.sortData(); } var connectDots = options.settings.connect_dots_with_line; var colors = this.config.default_settings.chartColors; var getXLabel = function(data) { var label = dataFormatter.formatValue(data, xFormat); if (label === null) { var number = parseInt(data); if (rawData.length > number) { label = rawData[number].label === null ? 'N/A' : rawData[number].label; } else { label = ''; } } return label; }; var getYLabel = function(data) { var label = dataFormatter.formatValue(data, yFormat); if (label === null) { var number = parseInt(data); if (rawData.length > number) { label = rawData[data].value === null ? 'N/A' : rawData[data].value; } else { label = ''; } } return label; }; var chartData = []; var limits = { yMax: null, yMin: null, xMax: null, xMin: null }; this.processData(chartData, limits); var chart = { data: chartData, color: colors[0], markers: { show: true, position: 'ct', labelFormatter: function(pointData) { return getYLabel(pointData.y); } }, points: { show: !connectDots } }; Flotr.draw( $chart.get(0), [chart], { colors: options.settings.chartColors, fontColor: options.settings.chartFontColor, fontSize: options.settings.chartFontSize, lines: { show: connectDots }, mouse: { track: true, relative: true, trackFormatter: function(pointData) { return getXLabel(pointData.x) + ': ' + getYLabel(pointData.y); } }, yaxis: { max: limits.yMax, min: limits.yMin, tickFormatter: function(y) { return getYLabel(y); }, title: options.data_schema.value.label }, xaxis: { max: limits.xMax, min: limits.xMin, tickFormatter: function(x) { return getXLabel(x); }, title: options.data_schema.label.label }, HtmlText: false, grid: { verticalLines: false } } ); }