• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    amCharts Export

    Dashboard Designer & Custom AngularJS Pages
    2
    6
    3.5k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      Brad_GMI
      last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • Jared WiltshireJ
        Jared Wiltshire
        last edited by

        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.

        Developer at Radix IoT

        B 1 Reply Last reply Reply Quote 0
        • B
          Brad_GMI @Jared Wiltshire
          last edited by Brad_GMI

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

          1 Reply Last reply Reply Quote 0
          • Jared WiltshireJ
            Jared Wiltshire
            last edited by

            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']);
                        }]
                    }
                }
            

            Developer at Radix IoT

            1 Reply Last reply Reply Quote 0
            • B
              Brad_GMI
              last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • Jared WiltshireJ
                Jared Wiltshire
                last edited by

                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.

                Developer at Radix IoT

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post