CODEWITHSUNDEEP
javascriptamcharts
Anish Antony
Anish Antony

Reputation: 895

Amchart - Export to PNG file

I created an amchart for plotting time based area. I need to add an export to image option to this graph. Below shows my amchart code. What are the lines needed to add the export to image option to this graph




    AmCharts.ready(function () {
                    // first we generate some random data
                    generateChartData();

                    // SERIAL CHART
                    chart = new AmCharts.AmSerialChart();
                    chart.pathToImages = "../amcharts/images/";
                    chart.dataProvider = chartData;
                    chart.categoryField = "date";

                    // data updated event will be fired when chart is first displayed,
                    // also when data will be updated. We'll use it to set some
                    // initial zoom
                    chart.addListener("dataUpdated", zoomChart);

                    // AXES
                    // Category
                    var categoryAxis = chart.categoryAxis;
                    categoryAxis.parseDates = true; // in order char to understand dates, we should set parseDates to true
                    categoryAxis.minPeriod = "mm"; // as we have data with minute interval, we have to set "mm" here.            
                    categoryAxis.gridAlpha = 0.07;
                    categoryAxis.axisColor = "#DADADA";

                    // Value
                    var valueAxis = new AmCharts.ValueAxis();
                    valueAxis.gridAlpha = 0.07;
                    valueAxis.title = "Unique visitors";
                    chart.addValueAxis(valueAxis);

                    // GRAPH
                    var graph = new AmCharts.AmGraph();
                    graph.type = "line"; // try to change it to "column"
                    graph.title = "red line";
                    graph.valueField = "visits";
                    graph.lineAlpha = 1;
                    graph.lineColor = "#d1cf2a";
                    graph.fillAlphas = 0.3; // setting fillAlphas to > 0 value makes it area graph
                    chart.addGraph(graph);

                    // CURSOR
                    var chartCursor = new AmCharts.ChartCursor();
                    chartCursor.cursorPosition = "mouse";
                    chartCursor.categoryBalloonDateFormat = "JJ:NN, DD MMMM";
                    chart.addChartCursor(chartCursor);

                    // SCROLLBAR
                    var chartScrollbar = new AmCharts.ChartScrollbar();

                    chart.addChartScrollbar(chartScrollbar);

                    // WRITE
                    chart.write("chartdiv");
                });

Upvotes: 0

Views: 3940

Answers (2)

M1rwen
M1rwen

Reputation: 1932

Try this code :

chart.export = {
enabled: true,
position: "bottom-right"
}
chart.initHC = false;
chart.validateNow();

And don't forget to include the needed export plugin!

Upvotes: 0

Simon
Simon

Reputation: 708

You should just be able to add the following before you write the chart to the DIV.

"exportConfig":{
    "menuTop": 0,
    menuItems: [{
        textAlign: 'center',
        icon: 'images/graph_export.png',
        iconTitle: 'Save chart as an image',
        onclick:function(){},
        items: [
            {title:'JPG', format:'jpg'},
            {title:'PNG', format:'png'},
            {title:'SVG', format:'svg'}
        ]
    }]
}

This will give you a download icon on the graph to download in either JPG, PNG or SVG formats.

Upvotes: 1

Related Questions