| | |
| | | /** |
| | | * @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)); |
| | | /**
|
| | | * @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));
|