amCharts Export

[Brad_GMI]

Good Morning Everyone,

I've been doing a good bit of chart customization without issue, but I've hit a snag on my final step.

One of my projects would benefit from the ability to export the chart to a document. Consulting the amCharts documentation, I found some examples that would suit my needs.

However, when implementing the export option in the Mango setup, I cannot get the export menu to appear.

<ma-serial-chart style="height: 300px; width: 100%" 
series-1-values="point1Values" 
series-1-point="point1" 
options="{export:{enabled: true}}">
</ma-serial-chart>

In theory, this should enable the default export menu from what I understand from the documentation. Is this enabled in the mango chart directive?

[Jared Wiltshire]

Hey Brad, you can try adding these tags to your markup to enable the amcharts export functionality. Depending on where you put them though they may not work as the main amcharts JS file has to be loaded first.

<script src="/resources/amcharts/plugins/export/export.js"></script>
<link rel="stylesheet" href="/resources/amcharts/plugins/export/export.css">

Can you give me some more idea of how you have your custom dashboard setup? Have you copied the adminTemplate into a new folder in overrides for example? The best place to load these scripts is from the app.js file if you have one, let me know and I'll tell you how to add these dependencies into app.js.

I'll ensure the export functionality is enabled by default in the next dashboards module.

[Brad_GMI]

@Jared-Wiltshire I'm using the SinglePageApp template for this particular project. It is located in the overrides folder.

[Jared Wiltshire]

OK, at the start of your app.js add this 'mango-3.0/maAppComponents' to the define section, so it looks like this

define([
    'angular',
    './directives/login/login', // load directives from the directives folder
    'mango-3.0/maMaterialDashboards', // load mango-3.0 angular modules
    'angular-ui-router', // load external angular modules
    'angular-loading-bar',
    'mango-3.0/maAppComponents'
], function(angular, login) {

Add 'maAppComponents' to the angular module so it looks like this.

// create an angular app with our desired dependencies
var mySinglePageApp = angular.module('mySinglePageApp', [
    'ui.router',
    'angular-loading-bar',
    'maMaterialDashboards',
    'ngMessages',
    'maAppComponents'
]);

Now we need to add a resolve dependency to our dashboard state, add the dataPointDeps section as below

$stateProvider.state('dashboard', {
        templateUrl: 'views/dashboard/main.html',
        resolve: {
            auth: ['$rootScope', 'User', function($rootScope, User) {
                // retrieves the current user when we navigate to a dashboard page
                // if an error occurs the $stateChangeError listener redirects to the login page
                $rootScope.user = User.current();
                return $rootScope.user.$promise;
            }],
            dataPointDeps: ['rQ', 'cssInjector', function(rQ, cssInjector) {
                cssInjector.injectLink(require.toUrl('amcharts/plugins/export/export.css'), 'amcharts-export.css');
                return rQ(['amcharts/plugins/export/export']);
            }]
        }
    }

[Brad_GMI]

Thanks Jared,

I implemented the code above and can export to all sources except xlsx.

The following error shows up in the developer console:

TypeError: jszip is not a constructor

I suspect this requires some more dependencies to be loaded in?

Currently the CSV option is good enough for my project, so I will make a custom export menu, but I could see the usefulness of a excel export option.

[Jared Wiltshire]

Yep you're quite right, I get the same. Thats odd as the amcharts library automatically loads the rest of the plugins fine and the jszip library is definitely there. I'll check its working for the next dashboards release.