CODEWITHSUNDEEP
jqueryexportamcharts
user3402286
user3402286

Reputation: 23

How to export a graphic AmCharts from an external button?

Currently there is an export button inside the graph, is an option AmCharts default, but I need to do it from an external button.

example: `exportConfig: { menuTop: "21px", menuBottom: "auto", menuRight: "21px", backgroundColor: "#efefef",

                menuItemStyle   : {
                backgroundColor         : '#EFEFEF',
                rollOverBackgroundColor : '#DDDDDD'},

                menuItems: [{
                    textAlign: 'center',
                    icon: 'http://www.amcharts.com/lib/3/images/export.png',
                    onclick:function(){},
                    items: [{
                        title: 'JPG',
                        format: 'jpg'
                    }, {
                        title: 'PNG',
                        format: 'png'
                    }, {
                        title: 'SVG',
                        format: 'svg'
                    }]
                }]
            }
        });`

http://jsfiddle.net/BGuuT/

I need the function to export a button click within the page but off the chart.

Upvotes: 2

Views: 8828

Answers (3)

user2301506
user2301506

Reputation: 300

Can I ask why you don't want the export button to be the default method (part of the chart)? The icon does not get exported with the chart, if that is what you are worried about and you can place the icon out of the graph area so it does not interfere with the graph being displayed.

Upvotes: 0

user3402286
user3402286

Reputation: 23

Another thing, when you run the code I see this error in my code.

This is my code.

        <?php
    session_start();
    require_once('../../core.php');
    ?>
    <script type="text/javascript">
    AmCharts.loadJSON = function(url) {
      // create the request
      if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari
        var request = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        var request = new ActiveXObject('Microsoft.XMLHTTP');
      }

      // load it
      // the last "false" parameter ensures that our code will wait before the
      // data is loaded
      request.open('GET', url, false);
      request.send();

      // parse adn return the output
      return eval(request.responseText);
    };
    </script>


    <div id="chartdiv"></div>

    <input type="button" name="JPG" id="JPG" value="JPG" />




    <script>
    var graphData = AmCharts.loadJSON('Aplicacion/MGI/generaGraph.php?option=3&instancia=40');
    var chartData = AmCharts.loadJSON('Aplicacion/MGI/generaData.php?instancia=40&FiltroIC=1&FiltroCA=1&FiltroIICG=1');
    var chart = AmCharts.makeChart("chartdiv", {
                "graphs": graphData,
                "pathToImages": "Aplicacion/MGI/amchart/images/",
                "dataProvider": chartData,
                "type": "serial",
                "theme": "light",
                "startDuration": 0.8,
                "legend": {        
                    "position": "bottom",
                    "fontSize": 9
                },
                "valueAxes": [{
                    "stackType": "regular",
                    "fontSize": 9,
                    "ignoreAxisWidth": true             
                }],
                "marginLeft": 40,

                "chartcrollbar": {},
                "chartCursor": {
                    "cursorPosition": "mouse"
                },
                "categoryField": "EjeX",
                "categoryAxis": {
                    "gridPosition": "start",
                    "fillAlpha": 0.05,
                    "labelsEnabled":1,
                    "fillColor": "#000000",
                    "fontSize": 9,
                    "labelRotation": 45
                }
            });
        var btn = document.getElementById('JPG');
    btn.onclick = function() {
    var tmp = new AmCharts.AmExport(chart);
    tmp.init();
    tmp.output({
        output: 'datastring',
        format: 'jpg'
    },function(blob) {
        var image = new Image();
        image.src = blob;
        document.body.appendChild(image);
    });
}
    }




    </script>

And this is error

TypeError: tmp.init is not a function


tmp.init();

Upvotes: 0

Maertz
Maertz

Reputation: 4952

sure you can, you can create your export instance manually like so. the export callback contains the blob in that case the base 64 datastring of the image.

var tmp = new AmCharts.AmExport(chart);
tmp.init();
tmp.output({
    output: 'datastring',
    format: 'jpg'
},function(blob) {
    var image = new Image();
    image.src = blob;

    document.body.appendChild(image);
});

here is the updated jsfiddle version, i hope i could help you with that http://jsfiddle.net/BGuuT/1/

Upvotes: 3

Related Questions