/* Plugin Name: amCharts Data Loader Description: This plugin adds external data loading capabilities to all amCharts libraries. Author: Martynas Majeris, amCharts Version: 1.0.16 Author URI: http://www.amcharts.com/ Copyright 2015 amCharts Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. Please note that the above license covers only this plugin. It by all means does not apply to any other amCharts products that are covered by different licenses. */ /** * TODO: * incremental load * XML support (?) */ /* globals AmCharts, ActiveXObject */ /* jshint -W061 */ /** * Initialize language prompt container */ AmCharts.translations.dataLoader = {}; /** * Set init handler */ AmCharts.addInitHandler( function( chart ) { /** * Check if dataLoader is set (initialize it) */ if ( undefined === chart.dataLoader || !isObject( chart.dataLoader ) ) chart.dataLoader = {}; /** * Check charts version for compatibility: * the first compatible version is 3.13 */ var version = chart.version.split( '.' ); if ( ( Number( version[ 0 ] ) < 3 ) || ( 3 === Number( version[ 0 ] ) && ( Number( version[ 1 ] ) < 13 ) ) ) return; /** * Define object reference for easy access */ var l = chart.dataLoader; l.remaining = 0; l.percentLoaded = {}; /** * Set defaults */ var defaults = { 'async': true, 'format': 'json', 'showErrors': true, 'showCurtain': true, 'noStyles': false, 'reload': 0, 'timestamp': false, 'delimiter': ',', 'skip': 0, 'skipEmpty': true, 'emptyAs': undefined, 'useColumnNames': false, 'init': false, 'progress': false, 'reverse': false, 'reloading': false, 'complete': false, 'error': false, 'numberFields': [], 'headers': [], 'chart': chart }; /** * Create a function that can be used to load data (or reload via API) */ l.loadData = function() { /** * Load all files in a row */ if ( 'stock' === chart.type ) { // delay this a little bit so the chart has the chance to build itself setTimeout( function() { // preserve animation if ( 0 > chart.panelsSettings.startDuration ) { l.startDuration = chart.panelsSettings.startDuration; chart.panelsSettings.startDuration = 0; } // cycle through all of the data sets for ( var x = 0; x < chart.dataSets.length; x++ ) { var ds = chart.dataSets[ x ]; // load data if ( undefined !== ds.dataLoader && undefined !== ds.dataLoader.url ) { callFunction( ds.dataLoader.init, ds.dataLoader, chart ); ds.dataProvider = []; applyDefaults( ds.dataLoader ); loadFile( ds.dataLoader.url, ds, ds.dataLoader, 'dataProvider' ); } // load events data if ( undefined !== ds.eventDataLoader && undefined !== ds.eventDataLoader.url ) { callFunction( ds.eventDataLoader.init, ds.eventDataLoader, chart ); ds.events = []; applyDefaults( ds.eventDataLoader ); loadFile( ds.eventDataLoader.url, ds, ds.eventDataLoader, 'stockEvents' ); } } }, 100 ); } else { callFunction( l.init, l, chart ); applyDefaults( l ); if ( undefined === l.url ) return; // preserve animation if ( undefined !== chart.startDuration && ( 0 < chart.startDuration ) ) { l.startDuration = chart.startDuration; chart.startDuration = 0; } if ( 'gauge' === chart.type ) { // set empty data set if ( undefined === chart.arrows ) chart.arrows = []; loadFile( l.url, chart, l, 'arrows' ); } else { // set empty data set if ( undefined === chart.dataProvider ) chart.dataProvider = chart.type === 'map' ? {} : []; loadFile( l.url, chart, l, 'dataProvider' ); } } }; /** * Trigger load */ l.loadData(); /** * Loads a file and determines correct parsing mechanism for it */ function loadFile( url, holder, options, providerKey ) { // set default providerKey if ( undefined === providerKey ) providerKey = 'dataProvider'; // show curtain if ( options.showCurtain ) showCurtain( undefined, options.noStyles ); // increment loader count l.remaining++; // set percent loaded for this file l.percentLoaded[ url ] = 0; // hijack user-defined "progress" handler with our own, so that we can // track progress if ( options.progress !== undefined && typeof( options.progress ) === 'function' && options._progress === undefined ) { options._progress = options.progress; options.progress = function( percent ) { // set progress l.percentLoaded[ url ] = percent; // calculate global percent var totalPercent = 0; var fileCount = 0; for ( var x in l.percentLoaded ) { if ( l.percentLoaded.hasOwnProperty( x ) ) { fileCount++; totalPercent += l.percentLoaded[ x ]; } } var globalPercent = Math.round( ( totalPercent / fileCount ) * 100 ) / 100; // call user function options._progress.call( this, globalPercent, Math.round( percent * 100 ) / 100, url ); }; } // load the file AmCharts.loadFile( url, options, function( response ) { // error? if ( false === response ) { callFunction( options.error, options, chart ); raiseError( AmCharts.__( 'Error loading the file', chart.language ) + ': ' + url, false, options ); } else { // determine the format if ( undefined === options.format ) { // TODO options.format = 'json'; } // lowercase options.format = options.format.toLowerCase(); // invoke parsing function switch ( options.format ) { case 'json': holder[ providerKey ] = AmCharts.parseJSON( response ); if ( false === holder[ providerKey ] ) { callFunction( options.error, options, chart ); raiseError( AmCharts.__( 'Error parsing JSON file', chart.language ) + ': ' + l.url, false, options ); holder[ providerKey ] = []; return; } else { holder[ providerKey ] = postprocess( holder[ providerKey ], options ); callFunction( options.load, options, chart ); } break; case 'csv': holder[ providerKey ] = AmCharts.parseCSV( response, options ); if ( false === holder[ providerKey ] ) { callFunction( options.error, options, chart ); raiseError( AmCharts.__( 'Error parsing CSV file', chart.language ) + ': ' + l.url, false, options ); holder[ providerKey ] = []; return; } else { holder[ providerKey ] = postprocess( holder[ providerKey ], options ); callFunction( options.load, options, chart ); } break; default: callFunction( options.error, options, chart ); raiseError( AmCharts.__( 'Unsupported data format', chart.language ) + ': ' + options.format, false, options.noStyles ); return; } // decrement remaining counter l.remaining--; // we done? if ( 0 === l.remaining ) { // callback callFunction( options.complete, chart ); // take in the new data if ( options.async ) { if ( 'map' === chart.type ) { // take in new data chart.validateNow( true ); // remove curtain removeCurtain(); } else { // add a dataUpdated event to handle post-load stuff if ( 'gauge' !== chart.type ) { chart.addListener( 'dataUpdated', function( event ) { // restore default period (stock chart) if ( 'stock' === chart.type && !options.reloading && undefined !== chart.periodSelector ) { chart.periodSelector.setDefaultPeriod(); } // remove curtain removeCurtain(); // remove this listener chart.events.dataUpdated.pop(); } ); } // take in new data chart.validateData(); // invalidate size for the pie chart // disabled for now as it is not longer necessary /*if ( 'pie' === chart.type && chart.invalidateSize !== undefined ) chart.invalidateSize();*/ // gauge chart does not trigger dataUpdated event // let's explicitly remove the curtain for it if ( 'gauge' === chart.type ) removeCurtain(); // make the chart animate again if ( l.startDuration ) { if ( 'stock' === chart.type ) { chart.panelsSettings.startDuration = l.startDuration; for ( var x = 0; x < chart.panels.length; x++ ) { chart.panels[ x ].startDuration = l.startDuration; chart.panels[ x ].animateAgain(); } } else { chart.startDuration = l.startDuration; if ( chart.animateAgain !== undefined ) chart.animateAgain(); } } } } } // schedule another load if necessary if ( options.reload ) { if ( options.timeout ) clearTimeout( options.timeout ); options.timeout = setTimeout( loadFile, 1000 * options.reload, url, holder, options, providerKey ); options.reloading = true; } } } ); } /** * Checks if postProcess is set and invokes the handler */ function postprocess( data, options ) { if ( undefined !== options.postProcess && isFunction( options.postProcess ) ) try { return options.postProcess.call( l, data, options, chart ); } catch ( e ) { raiseError( AmCharts.__( 'Error loading file', chart.language ) + ': ' + options.url, false, options ); return data; } else return data; } /** * Returns true if argument is array */ function isObject( obj ) { return 'object' === typeof( obj ); } /** * Returns true is argument is a function */ function isFunction( obj ) { return 'function' === typeof( obj ); } /** * Applies defaults to config object */ function applyDefaults( obj ) { for ( var x in defaults ) { if ( defaults.hasOwnProperty( x ) ) setDefault( obj, x, defaults[ x ] ); } } /** * Checks if object property is set, sets with a default if it isn't */ function setDefault( obj, key, value ) { if ( undefined === obj[ key ] ) obj[ key ] = value; } /** * Raises an internal error (writes it out to console) */ function raiseError( msg, error, options ) { if ( options.showErrors ) showCurtain( msg, options.noStyles ); else { removeCurtain(); console.log( msg ); } } /** * Shows curtain over chart area */ function showCurtain( msg, noStyles ) { // remove previous curtain if there is one removeCurtain(); // did we pass in the message? if ( undefined === msg ) msg = AmCharts.__( 'Loading data...', chart.language ); // create and populate curtain element var curtain = document.createElement( 'div' ); curtain.setAttribute( 'id', chart.div.id + '-curtain' ); curtain.className = 'amcharts-dataloader-curtain'; if ( true !== noStyles ) { curtain.style.position = 'absolute'; curtain.style.top = 0; curtain.style.left = 0; curtain.style.width = ( undefined !== chart.realWidth ? chart.realWidth : chart.divRealWidth ) + 'px'; curtain.style.height = ( undefined !== chart.realHeight ? chart.realHeight : chart.divRealHeight ) + 'px'; curtain.style.textAlign = 'center'; curtain.style.display = 'table'; curtain.style.fontSize = '20px'; try { curtain.style.background = 'rgba(255, 255, 255, 0.3)'; } catch ( e ) { curtain.style.background = 'rgb(255, 255, 255)'; } curtain.innerHTML = '
' + msg + '
'; } else { curtain.innerHTML = msg; } chart.containerDiv.appendChild( curtain ); l.curtain = curtain; } /** * Removes the curtain */ function removeCurtain() { try { if ( undefined !== l.curtain ) chart.containerDiv.removeChild( l.curtain ); } catch ( e ) { // do nothing } l.curtain = undefined; } /** * Execute callback function */ function callFunction( func, param1, param2, param3 ) { if ( 'function' === typeof func ) func.call( l, param1, param2, param3 ); } }, [ 'pie', 'serial', 'xy', 'funnel', 'radar', 'gauge', 'gantt', 'stock', 'map' ] ); /** * Returns prompt in a chart language (set by chart.language) if it is * available */ if ( undefined === AmCharts.__ ) { AmCharts.__ = function( msg, language ) { if ( undefined !== language && undefined !== AmCharts.translations.dataLoader[ language ] && undefined !== AmCharts.translations.dataLoader[ language ][ msg ] ) return AmCharts.translations.dataLoader[ language ][ msg ]; else return msg; }; } /** * Loads a file from url and calls function handler with the result */ AmCharts.loadFile = function( url, options, handler ) { // prepopulate options with minimal defaults if necessary if ( typeof( options ) !== 'object' ) options = {}; if ( options.async === undefined ) options.async = true; // create the request var request; if ( window.XMLHttpRequest ) { // IE7+, Firefox, Chrome, Opera, Safari request = new XMLHttpRequest(); } else { // code for IE6, IE5 request = new ActiveXObject( 'Microsoft.XMLHTTP' ); } // open the connection try { request.open( 'GET', options.timestamp ? AmCharts.timestampUrl( url ) : url, options.async ); } catch ( e ) { handler.call( this, false ); } // add headers? if ( options.headers !== undefined && options.headers.length ) { for ( var i = 0; i < options.headers.length; i++ ) { var header = options.headers[ i ]; request.setRequestHeader( header.key, header.value ); } } // add onprogress handlers if ( options.progress !== undefined && typeof( options.progress ) === 'function' ) { request.onprogress = function( e ) { var complete = ( e.loaded / e.total ) * 100; options.progress.call( this, complete ); } } // set handler for data if async loading request.onreadystatechange = function() { if ( 4 === request.readyState && 404 === request.status ) handler.call( this, false ); else if ( 4 === request.readyState && 200 === request.status ) handler.call( this, request.responseText ); }; // load the file try { request.send(); } catch ( e ) { handler.call( this, false ); } }; /** * Parses JSON string into an object */ AmCharts.parseJSON = function( response ) { try { if ( undefined !== JSON ) return JSON.parse( response ); else return eval( response ); } catch ( e ) { return false; } }; /** * Prases CSV string into an object */ AmCharts.parseCSV = function( response, options ) { // parse CSV into array var data = AmCharts.CSVToArray( response, options.delimiter ); // do we need to cast some fields to numbers? var numbers = options.numberFields && ( options.numberFields.length > 0 ); // init resuling array var res = []; var cols = []; var col, i; // first row holds column names? if ( options.useColumnNames ) { cols = data.shift(); // normalize column names for ( var x = 0; x < cols.length; x++ ) { // trim col = cols[ x ].replace( /^\s+|\s+$/gm, '' ); // check for empty if ( '' === col ) col = 'col' + x; cols[ x ] = col; } if ( 0 < options.skip ) options.skip--; } // skip rows for ( i = 0; i < options.skip; i++ ) data.shift(); // iterate through the result set var row; while ( ( row = options.reverse ? data.pop() : data.shift() ) ) { if ( options.skipEmpty && row.length === 1 && row[ 0 ] === '' ) continue; var dataPoint = {}; for ( i = 0; i < row.length; i++ ) { col = undefined === cols[ i ] ? 'col' + i : cols[ i ]; dataPoint[ col ] = row[ i ] === "" ? options.emptyAs : row[ i ]; // check if we need to cast to integer if ( numbers && options.numberFields.indexOf( col ) !== -1 ) dataPoint[ col ] = Number( dataPoint[ col ] ); } res.push( dataPoint ); } return res; }; /** * Parses CSV data into array * Taken from here: (thanks!) * http://www.bennadel.com/blog/1504-ask-ben-parsing-csv-strings-with-javascript-exec-regular-expression-command.htm */ AmCharts.CSVToArray = function( strData, strDelimiter ) { // Check to see if the delimiter is defined. If not, // then default to comma. strDelimiter = ( strDelimiter || ',' ); // Create a regular expression to parse the CSV values. var objPattern = new RegExp( ( // Delimiters. "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" + // Quoted fields. "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + // Standard fields. "([^\"\\" + strDelimiter + "\\r\\n]*))" ), "gi" ); // Create an array to hold our data. Give the array // a default empty first row. var arrData = [ [] ]; // Create an array to hold our individual pattern // matching groups. var arrMatches = null; // Keep looping over the regular expression matches // until we can no longer find a match. while ( ( arrMatches = objPattern.exec( strData ) ) ) { // Get the delimiter that was found. var strMatchedDelimiter = arrMatches[ 1 ]; // Check to see if the given delimiter has a length // (is not the start of string) and if it matches // field delimiter. If id does not, then we know // that this delimiter is a row delimiter. if ( strMatchedDelimiter.length && ( strMatchedDelimiter !== strDelimiter ) ) { // Since we have reached a new row of data, // add an empty row to our data array. arrData.push( [] ); } // Now that we have our delimiter out of the way, // let's check to see which kind of value we // captured (quoted or unquoted). var strMatchedValue; if ( arrMatches[ 2 ] ) { // We found a quoted value. When we capture // this value, unescape any double quotes. strMatchedValue = arrMatches[ 2 ].replace( new RegExp( "\"\"", "g" ), "\"" ); } else { // We found a non-quoted value. strMatchedValue = arrMatches[ 3 ]; } // Now that we have our value string, let's add // it to the data array. arrData[ arrData.length - 1 ].push( strMatchedValue ); } // Return the parsed data. return ( arrData ); }; /** * Appends timestamp to the url */ AmCharts.timestampUrl = function( url ) { var p = url.split( '?' ); if ( 1 === p.length ) p[ 1 ] = new Date().getTime(); else p[ 1 ] += '&' + new Date().getTime(); return p.join( '?' ); };