You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
582 lines
15 KiB
582 lines
15 KiB
/** |
|
* @license Data plugin for Highcharts |
|
* |
|
* (c) 2012-2013 Torstein Hønsi |
|
* Last revision 2013-06-07 |
|
* |
|
* License: www.highcharts.com/license |
|
*/ |
|
|
|
/* |
|
* The Highcharts Data plugin is a utility to ease parsing of input sources like |
|
* CSV, HTML tables or grid views into basic configuration options for use |
|
* directly in the Highcharts constructor. |
|
* |
|
* Demo: http://jsfiddle.net/highcharts/SnLFj/ |
|
* |
|
* --- OPTIONS --- |
|
* |
|
* - columns : Array<Array<Mixed>> |
|
* A two-dimensional array representing the input data on tabular form. This input can |
|
* be used when the data is already parsed, for example from a grid view component. |
|
* Each cell can be a string or number. If not switchRowsAndColumns is set, the columns |
|
* are interpreted as series. See also the rows option. |
|
* |
|
* - complete : Function(chartOptions) |
|
* The callback that is evaluated when the data is finished loading, optionally from an |
|
* external source, and parsed. The first argument passed is a finished chart options |
|
* object, containing series and an xAxis with categories if applicable. Thise options |
|
* can be extended with additional options and passed directly to the chart constructor. |
|
* |
|
* - csv : String |
|
* A comma delimited string to be parsed. Related options are startRow, endRow, startColumn |
|
* and endColumn to delimit what part of the table is used. The lineDelimiter and |
|
* itemDelimiter options define the CSV delimiter formats. |
|
* |
|
* - endColumn : Integer |
|
* In tabular input data, the first row (indexed by 0) to use. Defaults to the last |
|
* column containing data. |
|
* |
|
* - endRow : Integer |
|
* In tabular input data, the last row (indexed by 0) to use. Defaults to the last row |
|
* containing data. |
|
* |
|
* - googleSpreadsheetKey : String |
|
* A Google Spreadsheet key. See https://developers.google.com/gdata/samples/spreadsheet_sample |
|
* for general information on GS. |
|
* |
|
* - googleSpreadsheetWorksheet : String |
|
* The Google Spreadsheet worksheet. The available id's can be read from |
|
* https://spreadsheets.google.com/feeds/worksheets/{key}/public/basic |
|
* |
|
* - itemDelimiter : String |
|
* Item or cell delimiter for parsing CSV. Defaults to ",". |
|
* |
|
* - lineDelimiter : String |
|
* Line delimiter for parsing CSV. Defaults to "\n". |
|
* |
|
* - parsed : Function |
|
* A callback function to access the parsed columns, the two-dimentional input data |
|
* array directly, before they are interpreted into series data and categories. |
|
* |
|
* - parseDate : Function |
|
* A callback function to parse string representations of dates into JavaScript timestamps. |
|
* Return an integer on success. |
|
* |
|
* - rows : Array<Array<Mixed>> |
|
* The same as the columns input option, but defining rows intead of columns. |
|
* |
|
* - startColumn : Integer |
|
* In tabular input data, the first column (indexed by 0) to use. |
|
* |
|
* - startRow : Integer |
|
* In tabular input data, the first row (indexed by 0) to use. |
|
* |
|
* - table : String|HTMLElement |
|
* A HTML table or the id of such to be parsed as input data. Related options ara startRow, |
|
* endRow, startColumn and endColumn to delimit what part of the table is used. |
|
*/ |
|
|
|
// JSLint options: |
|
/*global jQuery */ |
|
|
|
(function (Highcharts) { |
|
|
|
// Utilities |
|
var each = Highcharts.each; |
|
|
|
|
|
// The Data constructor |
|
var Data = function (dataOptions, chartOptions) { |
|
this.init(dataOptions, chartOptions); |
|
}; |
|
|
|
// Set the prototype properties |
|
Highcharts.extend(Data.prototype, { |
|
|
|
/** |
|
* Initialize the Data object with the given options |
|
*/ |
|
init: function (options, chartOptions) { |
|
this.options = options; |
|
this.chartOptions = chartOptions; |
|
this.columns = options.columns || this.rowsToColumns(options.rows) || []; |
|
|
|
// No need to parse or interpret anything |
|
if (this.columns.length) { |
|
this.dataFound(); |
|
|
|
// Parse and interpret |
|
} else { |
|
|
|
// Parse a CSV string if options.csv is given |
|
this.parseCSV(); |
|
|
|
// Parse a HTML table if options.table is given |
|
this.parseTable(); |
|
|
|
// Parse a Google Spreadsheet |
|
this.parseGoogleSpreadsheet(); |
|
} |
|
|
|
}, |
|
|
|
/** |
|
* Get the column distribution. For example, a line series takes a single column for |
|
* Y values. A range series takes two columns for low and high values respectively, |
|
* and an OHLC series takes four columns. |
|
*/ |
|
getColumnDistribution: function () { |
|
var chartOptions = this.chartOptions, |
|
getValueCount = function (type) { |
|
return (Highcharts.seriesTypes[type || 'line'].prototype.pointArrayMap || [0]).length; |
|
}, |
|
globalType = chartOptions && chartOptions.chart && chartOptions.chart.type, |
|
individualCounts = []; |
|
|
|
each((chartOptions && chartOptions.series) || [], function (series) { |
|
individualCounts.push(getValueCount(series.type || globalType)); |
|
}); |
|
|
|
this.valueCount = { |
|
global: getValueCount(globalType), |
|
individual: individualCounts |
|
}; |
|
}, |
|
|
|
|
|
dataFound: function () { |
|
// Interpret the values into right types |
|
this.parseTypes(); |
|
|
|
// Use first row for series names? |
|
this.findHeaderRow(); |
|
|
|
// Handle columns if a handleColumns callback is given |
|
this.parsed(); |
|
|
|
// Complete if a complete callback is given |
|
this.complete(); |
|
|
|
}, |
|
|
|
/** |
|
* Parse a CSV input string |
|
*/ |
|
parseCSV: function () { |
|
var self = this, |
|
options = this.options, |
|
csv = options.csv, |
|
columns = this.columns, |
|
startRow = options.startRow || 0, |
|
endRow = options.endRow || Number.MAX_VALUE, |
|
startColumn = options.startColumn || 0, |
|
endColumn = options.endColumn || Number.MAX_VALUE, |
|
lines, |
|
activeRowNo = 0; |
|
|
|
if (csv) { |
|
|
|
lines = csv |
|
.replace(/\r\n/g, "\n") // Unix |
|
.replace(/\r/g, "\n") // Mac |
|
.split(options.lineDelimiter || "\n"); |
|
|
|
each(lines, function (line, rowNo) { |
|
var trimmed = self.trim(line), |
|
isComment = trimmed.indexOf('#') === 0, |
|
isBlank = trimmed === '', |
|
items; |
|
|
|
if (rowNo >= startRow && rowNo <= endRow && !isComment && !isBlank) { |
|
items = line.split(options.itemDelimiter || ','); |
|
each(items, function (item, colNo) { |
|
if (colNo >= startColumn && colNo <= endColumn) { |
|
if (!columns[colNo - startColumn]) { |
|
columns[colNo - startColumn] = []; |
|
} |
|
|
|
columns[colNo - startColumn][activeRowNo] = item; |
|
} |
|
}); |
|
activeRowNo += 1; |
|
} |
|
}); |
|
|
|
this.dataFound(); |
|
} |
|
}, |
|
|
|
/** |
|
* Parse a HTML table |
|
*/ |
|
parseTable: function () { |
|
var options = this.options, |
|
table = options.table, |
|
columns = this.columns, |
|
startRow = options.startRow || 0, |
|
endRow = options.endRow || Number.MAX_VALUE, |
|
startColumn = options.startColumn || 0, |
|
endColumn = options.endColumn || Number.MAX_VALUE, |
|
colNo; |
|
|
|
if (table) { |
|
|
|
if (typeof table === 'string') { |
|
table = document.getElementById(table); |
|
} |
|
|
|
each(table.getElementsByTagName('tr'), function (tr, rowNo) { |
|
colNo = 0; |
|
if (rowNo >= startRow && rowNo <= endRow) { |
|
each(tr.childNodes, function (item) { |
|
if ((item.tagName === 'TD' || item.tagName === 'TH') && colNo >= startColumn && colNo <= endColumn) { |
|
if (!columns[colNo]) { |
|
columns[colNo] = []; |
|
} |
|
columns[colNo][rowNo - startRow] = item.innerHTML; |
|
|
|
colNo += 1; |
|
} |
|
}); |
|
} |
|
}); |
|
|
|
this.dataFound(); // continue |
|
} |
|
}, |
|
|
|
/** |
|
* TODO: |
|
* - switchRowsAndColumns |
|
*/ |
|
parseGoogleSpreadsheet: function () { |
|
var self = this, |
|
options = this.options, |
|
googleSpreadsheetKey = options.googleSpreadsheetKey, |
|
columns = this.columns, |
|
startRow = options.startRow || 0, |
|
endRow = options.endRow || Number.MAX_VALUE, |
|
startColumn = options.startColumn || 0, |
|
endColumn = options.endColumn || Number.MAX_VALUE, |
|
gr, // google row |
|
gc; // google column |
|
|
|
if (googleSpreadsheetKey) { |
|
jQuery.getJSON('https://spreadsheets.google.com/feeds/cells/' + |
|
googleSpreadsheetKey + '/' + (options.googleSpreadsheetWorksheet || 'od6') + |
|
'/public/values?alt=json-in-script&callback=?', |
|
function (json) { |
|
|
|
// Prepare the data from the spreadsheat |
|
var cells = json.feed.entry, |
|
cell, |
|
cellCount = cells.length, |
|
colCount = 0, |
|
rowCount = 0, |
|
i; |
|
|
|
// First, find the total number of columns and rows that |
|
// are actually filled with data |
|
for (i = 0; i < cellCount; i++) { |
|
cell = cells[i]; |
|
colCount = Math.max(colCount, cell.gs$cell.col); |
|
rowCount = Math.max(rowCount, cell.gs$cell.row); |
|
} |
|
|
|
// Set up arrays containing the column data |
|
for (i = 0; i < colCount; i++) { |
|
if (i >= startColumn && i <= endColumn) { |
|
// Create new columns with the length of either end-start or rowCount |
|
columns[i - startColumn] = []; |
|
|
|
// Setting the length to avoid jslint warning |
|
columns[i - startColumn].length = Math.min(rowCount, endRow - startRow); |
|
} |
|
} |
|
|
|
// Loop over the cells and assign the value to the right |
|
// place in the column arrays |
|
for (i = 0; i < cellCount; i++) { |
|
cell = cells[i]; |
|
gr = cell.gs$cell.row - 1; // rows start at 1 |
|
gc = cell.gs$cell.col - 1; // columns start at 1 |
|
|
|
// If both row and col falls inside start and end |
|
// set the transposed cell value in the newly created columns |
|
if (gc >= startColumn && gc <= endColumn && |
|
gr >= startRow && gr <= endRow) { |
|
columns[gc - startColumn][gr - startRow] = cell.content.$t; |
|
} |
|
} |
|
self.dataFound(); |
|
}); |
|
} |
|
}, |
|
|
|
/** |
|
* Find the header row. For now, we just check whether the first row contains |
|
* numbers or strings. Later we could loop down and find the first row with |
|
* numbers. |
|
*/ |
|
findHeaderRow: function () { |
|
var headerRow = 0; |
|
each(this.columns, function (column) { |
|
if (typeof column[0] !== 'string') { |
|
headerRow = null; |
|
} |
|
}); |
|
this.headerRow = 0; |
|
}, |
|
|
|
/** |
|
* Trim a string from whitespace |
|
*/ |
|
trim: function (str) { |
|
return typeof str === 'string' ? str.replace(/^\s+|\s+$/g, '') : str; |
|
}, |
|
|
|
/** |
|
* Parse numeric cells in to number types and date types in to true dates. |
|
* @param {Object} columns |
|
*/ |
|
parseTypes: function () { |
|
var columns = this.columns, |
|
col = columns.length, |
|
row, |
|
val, |
|
floatVal, |
|
trimVal, |
|
dateVal; |
|
|
|
while (col--) { |
|
row = columns[col].length; |
|
while (row--) { |
|
val = columns[col][row]; |
|
floatVal = parseFloat(val); |
|
trimVal = this.trim(val); |
|
|
|
/*jslint eqeq: true*/ |
|
if (trimVal == floatVal) { // is numeric |
|
/*jslint eqeq: false*/ |
|
columns[col][row] = floatVal; |
|
|
|
// If the number is greater than milliseconds in a year, assume datetime |
|
if (floatVal > 365 * 24 * 3600 * 1000) { |
|
columns[col].isDatetime = true; |
|
} else { |
|
columns[col].isNumeric = true; |
|
} |
|
|
|
} else { // string, continue to determine if it is a date string or really a string |
|
dateVal = this.parseDate(val); |
|
|
|
if (col === 0 && typeof dateVal === 'number' && !isNaN(dateVal)) { // is date |
|
columns[col][row] = dateVal; |
|
columns[col].isDatetime = true; |
|
|
|
} else { // string |
|
columns[col][row] = trimVal === '' ? null : trimVal; |
|
} |
|
} |
|
|
|
} |
|
} |
|
}, |
|
//* |
|
dateFormats: { |
|
'YYYY-mm-dd': { |
|
regex: '^([0-9]{4})-([0-9]{2})-([0-9]{2})$', |
|
parser: function (match) { |
|
return Date.UTC(+match[1], match[2] - 1, +match[3]); |
|
} |
|
} |
|
}, |
|
// */ |
|
/** |
|
* Parse a date and return it as a number. Overridable through options.parseDate. |
|
*/ |
|
parseDate: function (val) { |
|
var parseDate = this.options.parseDate, |
|
ret, |
|
key, |
|
format, |
|
match; |
|
|
|
if (parseDate) { |
|
ret = parseDate(val); |
|
} |
|
|
|
if (typeof val === 'string') { |
|
for (key in this.dateFormats) { |
|
format = this.dateFormats[key]; |
|
match = val.match(format.regex); |
|
if (match) { |
|
ret = format.parser(match); |
|
} |
|
} |
|
} |
|
return ret; |
|
}, |
|
|
|
/** |
|
* Reorganize rows into columns |
|
*/ |
|
rowsToColumns: function (rows) { |
|
var row, |
|
rowsLength, |
|
col, |
|
colsLength, |
|
columns; |
|
|
|
if (rows) { |
|
columns = []; |
|
rowsLength = rows.length; |
|
for (row = 0; row < rowsLength; row++) { |
|
colsLength = rows[row].length; |
|
for (col = 0; col < colsLength; col++) { |
|
if (!columns[col]) { |
|
columns[col] = []; |
|
} |
|
columns[col][row] = rows[row][col]; |
|
} |
|
} |
|
} |
|
return columns; |
|
}, |
|
|
|
/** |
|
* A hook for working directly on the parsed columns |
|
*/ |
|
parsed: function () { |
|
if (this.options.parsed) { |
|
this.options.parsed.call(this, this.columns); |
|
} |
|
}, |
|
|
|
/** |
|
* If a complete callback function is provided in the options, interpret the |
|
* columns into a Highcharts options object. |
|
*/ |
|
complete: function () { |
|
|
|
var columns = this.columns, |
|
firstCol, |
|
type, |
|
options = this.options, |
|
valueCount, |
|
series, |
|
data, |
|
i, |
|
j, |
|
seriesIndex; |
|
|
|
|
|
if (options.complete) { |
|
|
|
this.getColumnDistribution(); |
|
|
|
// Use first column for X data or categories? |
|
if (columns.length > 1) { |
|
firstCol = columns.shift(); |
|
if (this.headerRow === 0) { |
|
firstCol.shift(); // remove the first cell |
|
} |
|
|
|
|
|
if (firstCol.isDatetime) { |
|
type = 'datetime'; |
|
} else if (!firstCol.isNumeric) { |
|
type = 'category'; |
|
} |
|
} |
|
|
|
// Get the names and shift the top row |
|
for (i = 0; i < columns.length; i++) { |
|
if (this.headerRow === 0) { |
|
columns[i].name = columns[i].shift(); |
|
} |
|
} |
|
|
|
// Use the next columns for series |
|
series = []; |
|
for (i = 0, seriesIndex = 0; i < columns.length; seriesIndex++) { |
|
|
|
// This series' value count |
|
valueCount = Highcharts.pick(this.valueCount.individual[seriesIndex], this.valueCount.global); |
|
|
|
// Iterate down the cells of each column and add data to the series |
|
data = []; |
|
for (j = 0; j < columns[i].length; j++) { |
|
data[j] = [ |
|
firstCol[j], |
|
columns[i][j] !== undefined ? columns[i][j] : null |
|
]; |
|
if (valueCount > 1) { |
|
data[j].push(columns[i + 1][j] !== undefined ? columns[i + 1][j] : null); |
|
} |
|
if (valueCount > 2) { |
|
data[j].push(columns[i + 2][j] !== undefined ? columns[i + 2][j] : null); |
|
} |
|
if (valueCount > 3) { |
|
data[j].push(columns[i + 3][j] !== undefined ? columns[i + 3][j] : null); |
|
} |
|
if (valueCount > 4) { |
|
data[j].push(columns[i + 4][j] !== undefined ? columns[i + 4][j] : null); |
|
} |
|
} |
|
|
|
// Add the series |
|
series[seriesIndex] = { |
|
name: columns[i].name, |
|
data: data |
|
}; |
|
|
|
i += valueCount; |
|
} |
|
|
|
// Do the callback |
|
options.complete({ |
|
xAxis: { |
|
type: type |
|
}, |
|
series: series |
|
}); |
|
} |
|
} |
|
}); |
|
|
|
// Register the Data prototype and data function on Highcharts |
|
Highcharts.Data = Data; |
|
Highcharts.data = function (options, chartOptions) { |
|
return new Data(options, chartOptions); |
|
}; |
|
|
|
// Extend Chart.init so that the Chart constructor accepts a new configuration |
|
// option group, data. |
|
Highcharts.wrap(Highcharts.Chart.prototype, 'init', function (proceed, userOptions, callback) { |
|
var chart = this; |
|
|
|
if (userOptions && userOptions.data) { |
|
Highcharts.data(Highcharts.extend(userOptions.data, { |
|
complete: function (dataOptions) { |
|
|
|
// Merge series configs |
|
if (userOptions.series) { |
|
each(userOptions.series, function (series, i) { |
|
userOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]); |
|
}); |
|
} |
|
|
|
// Do the merge |
|
userOptions = Highcharts.merge(dataOptions, userOptions); |
|
|
|
proceed.call(chart, userOptions, callback); |
|
} |
|
}), userOptions); |
|
} else { |
|
proceed.call(chart, userOptions, callback); |
|
} |
|
}); |
|
|
|
}(Highcharts));
|
|
|