/* 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 = '