devilbox/.devilbox/www/htdocs/vendor/phpmyadmin-4.0/js/chart.js

542 lines
14 KiB
JavaScript
Raw Normal View History

2016-10-22 14:57:10 +00:00
/**
* Chart type enumerations
*/
var ChartType = {
LINE : 'line',
SPLINE : 'spline',
AREA : 'area',
BAR : 'bar',
COLUMN : 'column',
PIE : 'pie',
TIMELINE: 'timeline'
2016-10-22 14:57:10 +00:00
};
/**
* Abstract chart factory which defines the contract for chart factories
*/
var ChartFactory = function() {
2016-10-22 14:57:10 +00:00
};
ChartFactory.prototype = {
createChart : function(type, options) {
2016-10-22 14:57:10 +00:00
throw new Error("createChart must be implemented by a subclass");
}
};
/**
* Abstract chart which defines the contract for charts
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var Chart = function(elementId) {
2016-10-22 14:57:10 +00:00
this.elementId = elementId;
};
Chart.prototype = {
draw : function(data, options) {
2016-10-22 14:57:10 +00:00
throw new Error("draw must be implemented by a subclass");
},
redraw : function(options) {
2016-10-22 14:57:10 +00:00
throw new Error("redraw must be implemented by a subclass");
},
destroy : function() {
2016-10-22 14:57:10 +00:00
throw new Error("destroy must be implemented by a subclass");
}
};
/**
* Abstract representation of charts that operates on DataTable where,<br />
* <ul>
* <li>First column provides index to the data.</li>
* <li>Each subsequent columns are of type
* <code>ColumnType.NUMBER<code> and represents a data series.</li>
* </ul>
* Line chart, area chart, bar chart, column chart are typical examples.
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var BaseChart = function(elementId) {
2016-10-22 14:57:10 +00:00
Chart.call(this, elementId);
};
BaseChart.prototype = new Chart();
BaseChart.prototype.constructor = BaseChart;
BaseChart.prototype.validateColumns = function(dataTable) {
2016-10-22 14:57:10 +00:00
var columns = dataTable.getColumns();
if (columns.length < 2) {
throw new Error("Minimum of two columns are required for this chart");
}
for ( var i = 1; i < columns.length; i++) {
2016-10-22 14:57:10 +00:00
if (columns[i].type != ColumnType.NUMBER) {
throw new Error("Column " + (i + 1) + " should be of type 'Number'");
}
}
return true;
};
/**
* Abstract pie chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var PieChart = function(elementId) {
2016-10-22 14:57:10 +00:00
BaseChart.call(this, elementId);
};
PieChart.prototype = new BaseChart();
PieChart.prototype.constructor = PieChart;
PieChart.prototype.validateColumns = function(dataTable) {
2016-10-22 14:57:10 +00:00
var columns = dataTable.getColumns();
if (columns.length > 2) {
throw new Error("Pie charts can draw only one series");
}
return BaseChart.prototype.validateColumns.call(this, dataTable);
};
/**
* Abstract timeline chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var TimelineChart = function(elementId) {
2016-10-22 14:57:10 +00:00
BaseChart.call(this, elementId);
};
TimelineChart.prototype = new BaseChart();
TimelineChart.prototype.constructor = TimelineChart;
TimelineChart.prototype.validateColumns = function(dataTable) {
2016-10-22 14:57:10 +00:00
var result = BaseChart.prototype.validateColumns.call(this, dataTable);
if (result) {
var columns = dataTable.getColumns();
if (columns[0].type != ColumnType.DATE) {
throw new Error("First column of timeline chart need to be a date column");
}
}
return result;
};
/**
* The data table contains column information and data for the chart.
*/
var DataTable = function() {
2016-10-22 14:57:10 +00:00
var columns = [];
var data;
2016-10-22 14:57:10 +00:00
this.addColumn = function(type, name) {
2016-10-22 14:57:10 +00:00
columns.push({
'type' : type,
'name' : name
});
};
this.getColumns = function() {
2016-10-22 14:57:10 +00:00
return columns;
};
this.setData = function(rows) {
2016-10-22 14:57:10 +00:00
data = rows;
fillMissingValues();
};
this.getData = function() {
2016-10-22 14:57:10 +00:00
return data;
};
var fillMissingValues = function() {
if (columns.length == 0) {
2016-10-22 14:57:10 +00:00
throw new Error("Set columns first");
}
var row, column;
for ( var i = 0; i < data.length; i++) {
2016-10-22 14:57:10 +00:00
row = data[i];
if (row.length > columns.length) {
row.splice(columns.length - 1, row.length - columns.length);
} else if (row.length < columns.length) {
for ( var j = row.length; j < columns.length; j++) {
2016-10-22 14:57:10 +00:00
row.push(null);
}
}
}
};
};
/**
* Column type enumeration
*/
var ColumnType = {
STRING : 'string',
NUMBER : 'number',
BOOLEAN : 'boolean',
DATE : 'date'
};
2016-10-22 14:57:10 +00:00
/*******************************************************************************
* JQPlot specifc code
2016-10-22 14:57:10 +00:00
******************************************************************************/
/**
* Chart factory that returns JQPlotCharts
*/
var JQPlotChartFactory = function() {
};
JQPlotChartFactory.prototype = new ChartFactory();
JQPlotChartFactory.prototype.createChart = function(type, elementId) {
var chart;
switch (type) {
case ChartType.LINE:
chart = new JQPlotLineChart(elementId);
break;
case ChartType.SPLINE:
chart = new JQPlotSplineChart(elementId);
break;
case ChartType.TIMELINE:
chart = new JQPlotTimelineChart(elementId);
break;
case ChartType.AREA:
chart = new JQPlotAreaChart(elementId);
break;
case ChartType.BAR:
chart = new JQPlotBarChart(elementId);
break;
case ChartType.COLUMN:
chart = new JQPlotColumnChart(elementId);
break;
case ChartType.PIE:
chart = new JQPlotPieChart(elementId);
break;
}
return chart;
};
2016-10-22 14:57:10 +00:00
/**
* Abstract JQplot chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotChart = function(elementId) {
2016-10-22 14:57:10 +00:00
Chart.call(this, elementId);
this.plot;
this.validator;
2016-10-22 14:57:10 +00:00
};
JQPlotChart.prototype = new Chart();
JQPlotChart.prototype.constructor = JQPlotChart;
JQPlotChart.prototype.draw = function(data, options) {
2016-10-22 14:57:10 +00:00
if (this.validator.validateColumns(data)) {
this.plot = $.jqplot(this.elementId, this.prepareData(data), this
.populateOptions(data, options));
}
};
JQPlotChart.prototype.destroy = function() {
if (this.plot != null) {
2016-10-22 14:57:10 +00:00
this.plot.destroy();
}
};
JQPlotChart.prototype.redraw = function(options) {
if (this.plot != null) {
2016-10-22 14:57:10 +00:00
this.plot.replot(options);
}
};
JQPlotChart.prototype.populateOptions = function(dataTable, options) {
2016-10-22 14:57:10 +00:00
throw new Error("populateOptions must be implemented by a subclass");
};
JQPlotChart.prototype.prepareData = function(dataTable) {
2016-10-22 14:57:10 +00:00
throw new Error("prepareData must be implemented by a subclass");
};
/**
* JQPlot line chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotLineChart = function(elementId) {
2016-10-22 14:57:10 +00:00
JQPlotChart.call(this, elementId);
this.validator = BaseChart.prototype;
};
JQPlotLineChart.prototype = new JQPlotChart();
JQPlotLineChart.prototype.constructor = JQPlotLineChart;
JQPlotLineChart.prototype.populateOptions = function(dataTable, options) {
2016-10-22 14:57:10 +00:00
var columns = dataTable.getColumns();
var optional = {
axes : {
xaxis : {
label : columns[0].name,
renderer : $.jqplot.CategoryAxisRenderer,
ticks : []
},
yaxis : {
label : (columns.length == 2 ? columns[1].name : 'Values'),
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
}
},
series : []
};
$.extend(true, optional, options);
if (optional.series.length == 0) {
for ( var i = 1; i < columns.length; i++) {
2016-10-22 14:57:10 +00:00
optional.series.push({
label : columns[i].name.toString()
});
}
}
if (optional.axes.xaxis.ticks.length == 0) {
2016-10-22 14:57:10 +00:00
var data = dataTable.getData();
for ( var i = 0; i < data.length; i++) {
optional.axes.xaxis.ticks.push(data[i][0].toString());
2016-10-22 14:57:10 +00:00
}
}
return optional;
};
JQPlotLineChart.prototype.prepareData = function(dataTable) {
2016-10-22 14:57:10 +00:00
var data = dataTable.getData(), row;
var retData = [], retRow;
for ( var i = 0; i < data.length; i++) {
2016-10-22 14:57:10 +00:00
row = data[i];
for ( var j = 1; j < row.length; j++) {
2016-10-22 14:57:10 +00:00
retRow = retData[j - 1];
if (retRow == null) {
2016-10-22 14:57:10 +00:00
retRow = [];
retData[j - 1] = retRow;
}
retRow.push(row[j]);
}
}
return retData;
};
/**
* JQPlot spline chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotSplineChart = function(elementId) {
2016-10-22 14:57:10 +00:00
JQPlotLineChart.call(this, elementId);
};
JQPlotSplineChart.prototype = new JQPlotLineChart();
JQPlotSplineChart.prototype.constructor = JQPlotSplineChart;
JQPlotSplineChart.prototype.populateOptions = function(dataTable, options) {
2016-10-22 14:57:10 +00:00
var optional = {};
var opt = JQPlotLineChart.prototype.populateOptions.call(this, dataTable,
options);
var compulsory = {
seriesDefaults : {
rendererOptions : {
smooth : true
}
}
};
$.extend(true, optional, opt, compulsory);
return optional;
};
/**
* JQPlot timeline chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotTimelineChart = function(elementId) {
2016-10-22 14:57:10 +00:00
JQPlotLineChart.call(this, elementId);
this.validator = TimelineChart.prototype;
};
JQPlotTimelineChart.prototype = new JQPlotLineChart();
JQPlotTimelineChart.prototype.constructor = JQPlotAreaChart;
2016-10-22 14:57:10 +00:00
JQPlotTimelineChart.prototype.populateOptions = function(dataTable, options) {
2016-10-22 14:57:10 +00:00
var optional = {
axes : {
xaxis : {
tickOptions : {
formatString:'%b %#d, %y'
2016-10-22 14:57:10 +00:00
}
}
}
2016-10-22 14:57:10 +00:00
};
var opt = JQPlotLineChart.prototype.populateOptions.call(this, dataTable, options);
var compulsory = {
axes : {
xaxis : {
renderer : $.jqplot.DateAxisRenderer
}
}
};
$.extend(true, optional, opt, compulsory);
return optional;
};
JQPlotTimelineChart.prototype.prepareData = function(dataTable) {
2016-10-22 14:57:10 +00:00
var data = dataTable.getData(), row, d;
var retData = [], retRow;
for ( var i = 0; i < data.length; i++) {
2016-10-22 14:57:10 +00:00
row = data[i];
d = row[0];
for ( var j = 1; j < row.length; j++) {
2016-10-22 14:57:10 +00:00
retRow = retData[j - 1];
if (retRow == null) {
2016-10-22 14:57:10 +00:00
retRow = [];
retData[j - 1] = retRow;
}
if (d != null) {
2016-10-22 14:57:10 +00:00
retRow.push([d.getTime(), row[j]]);
}
}
}
return retData;
};
/**
* JQPlot area chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotAreaChart = function(elementId) {
2016-10-22 14:57:10 +00:00
JQPlotLineChart.call(this, elementId);
};
JQPlotAreaChart.prototype = new JQPlotLineChart();
JQPlotAreaChart.prototype.constructor = JQPlotAreaChart;
JQPlotAreaChart.prototype.populateOptions = function(dataTable, options) {
2016-10-22 14:57:10 +00:00
var optional = {
seriesDefaults : {
fillToZero : true
}
2016-10-22 14:57:10 +00:00
};
var opt = JQPlotLineChart.prototype.populateOptions.call(this, dataTable,
options);
var compulsory = {
seriesDefaults : {
fill : true
}
2016-10-22 14:57:10 +00:00
};
$.extend(true, optional, opt, compulsory);
return optional;
};
/**
* JQPlot column chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotColumnChart = function(elementId) {
2016-10-22 14:57:10 +00:00
JQPlotLineChart.call(this, elementId);
};
JQPlotColumnChart.prototype = new JQPlotLineChart();
JQPlotColumnChart.prototype.constructor = JQPlotColumnChart;
JQPlotColumnChart.prototype.populateOptions = function(dataTable, options) {
2016-10-22 14:57:10 +00:00
var optional = {
seriesDefaults : {
fillToZero : true
}
2016-10-22 14:57:10 +00:00
};
var opt = JQPlotLineChart.prototype.populateOptions.call(this, dataTable,
options);
var compulsory = {
seriesDefaults : {
renderer : $.jqplot.BarRenderer
}
};
$.extend(true, optional, opt, compulsory);
return optional;
};
/**
* JQPlot bar chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotBarChart = function(elementId) {
2016-10-22 14:57:10 +00:00
JQPlotLineChart.call(this, elementId);
};
JQPlotBarChart.prototype = new JQPlotLineChart();
JQPlotBarChart.prototype.constructor = JQPlotBarChart;
JQPlotBarChart.prototype.populateOptions = function(dataTable, options) {
2016-10-22 14:57:10 +00:00
var columns = dataTable.getColumns();
var optional = {
axes : {
yaxis : {
label : columns[0].name,
2016-10-22 14:57:10 +00:00
labelRenderer : $.jqplot.CanvasAxisLabelRenderer,
renderer : $.jqplot.CategoryAxisRenderer,
ticks : []
},
xaxis : {
label : (columns.length == 2 ? columns[1].name : 'Values'),
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
}
},
series : [],
seriesDefaults : {
fillToZero : true
}
};
2016-10-22 14:57:10 +00:00
var compulsory = {
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
barDirection : 'horizontal'
}
}
};
$.extend(true, optional, options, compulsory);
if (optional.axes.yaxis.ticks.length == 0) {
2016-10-22 14:57:10 +00:00
var data = dataTable.getData();
for ( var i = 0; i < data.length; i++) {
2016-10-22 14:57:10 +00:00
optional.axes.yaxis.ticks.push(data[i][0].toString());
}
}
if (optional.series.length == 0) {
for ( var i = 1; i < columns.length; i++) {
2016-10-22 14:57:10 +00:00
optional.series.push({
label : columns[i].name.toString()
2016-10-22 14:57:10 +00:00
});
}
}
return optional;
};
/**
* JQPlot pie chart
*
2016-10-22 14:57:10 +00:00
* @param elementId
* id of the div element the chart is drawn in
*/
var JQPlotPieChart = function(elementId) {
2016-10-22 14:57:10 +00:00
JQPlotChart.call(this, elementId);
this.validator = PieChart.prototype;
};
JQPlotPieChart.prototype = new JQPlotChart();
JQPlotPieChart.prototype.constructor = JQPlotPieChart;
JQPlotPieChart.prototype.populateOptions = function(dataTable, options) {
var optional = {};
2016-10-22 14:57:10 +00:00
var compulsory = {
seriesDefaults : {
renderer : $.jqplot.PieRenderer
}
};
$.extend(true, optional, options, compulsory);
return optional;
};
JQPlotPieChart.prototype.prepareData = function(dataTable) {
2016-10-22 14:57:10 +00:00
var data = dataTable.getData(), row;
var retData = [];
for ( var i = 0; i < data.length; i++) {
2016-10-22 14:57:10 +00:00
row = data[i];
retData.push([ row[0], row[1] ]);
}
return [ retData ];
};