title: How to generate snapshot of amCharts without visiting browser
body: <p>I am using amCharts library on my website. On the side block I am displaying chart snapshots (thumbnails) and if clicked it goes to the chart itself. To display these snapshots they should be pre-generated but only way I can do it when I am on a chart page. Also I need to update these snapshots by schedule every day. I need a way (if possible) to generate these snapshots without visiting a webpage, ideally through command line.</p>
  
  <p>At the moment I am saving charts as images on the server-side:</p>
  
  <pre><code>   &lt;script src="/static/amcharts/amcharts.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="/static/amcharts/serial.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="/static/amcharts/amstock.js" type="text/javascript"&gt;&lt;/script&gt;
  
     &lt;script src="/static/amcharts/exporting/amexport.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="/static/amcharts/exporting/rgbcolor.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="/static/amcharts/exporting/canvg.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="/static/amcharts/exporting/filesaver.js" type="text/javascript"&gt;&lt;/script&gt;
  
     &lt;script&gt;
        var cdata = {{ chartData|safe }};
  
        AmCharts.ready(function () {
           generateChartData();
           createStockChart();
        });
  
        var chartData = [];
  
        function generateChartData() {
           for (var i = 0; i &lt; cdata.length; i++)
           {
              chartData.push({
                 date: new Date(cdata[i]["date"]),
                 value: cdata[i]["value"],
                 volume: cdata[i]["volume"]
              });
           }
        }
  
        var chart;
  
        function createStockChart() {
           chart = new AmCharts.AmStockChart();
  
           chart.exportConfig = {
              menuItems: []
           };
  
           chart.addListener('rendered', function (event) {
              chart.AmExport.output({format:"png", output: 'datastring'},
                 function(data) {
                    $.post("/charts/save_chart_snapshot/", {
                          imageData: encodeURIComponent(data)
                       });
                 });
           });
  
           chart.pathToImages = "/static/amcharts/images/";
           var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
           categoryAxesSettings.minPeriod = "DD";
           chart.categoryAxesSettings = categoryAxesSettings;
  
           // DATASETS //////////////////////////////////////////
           var dataSet = new AmCharts.DataSet();
           dataSet.color = "#9cc11a";
           dataSet.fieldMappings = [{
              fromField: "value",
              toField: "value"
           }, {
              fromField: "volume",
              toField: "volume"
           }];
           dataSet.dataProvider = chartData;
           dataSet.categoryField = "date";
  
           // set data sets to the chart
           chart.dataSets = [dataSet];
  
           // PANELS ///////////////////////////////////////////
           // first stock panel
           var stockPanel1 = new AmCharts.StockPanel();
           stockPanel1.showCategoryAxis = false;
           stockPanel1.title = "Value";
           stockPanel1.percentHeight = 70;
  
           // graph of first stock panel
           var graph1 = new AmCharts.StockGraph();
           graph1.valueField = "value";
           graph1.type = "smoothedLine";
           graph1.lineThickness = 2;
           graph1.bullet = "round";
           graph1.bulletBorderColor = "#FFFFFF";
           graph1.bulletBorderAlpha = 1;
           graph1.bulletBorderThickness = 3;
           stockPanel1.addStockGraph(graph1);
  
           // create stock legend
           var stockLegend1 = new AmCharts.StockLegend();
           stockLegend1.valueTextRegular = " ";
           stockLegend1.markerType = "none";
           stockPanel1.stockLegend = stockLegend1;
  
  
           // second stock panel
           var stockPanel2 = new AmCharts.StockPanel();
           stockPanel2.title = "Volume";
           stockPanel2.percentHeight = 30;
           var graph2 = new AmCharts.StockGraph();
           graph2.valueField = "volume";
           graph2.type = "column";
           graph2.cornerRadiusTop = 2;
           graph2.fillAlphas = 1;
           stockPanel2.addStockGraph(graph2);
  
           // create stock legend
           var stockLegend2 = new AmCharts.StockLegend();
           stockLegend2.valueTextRegular = " ";
           stockLegend2.markerType = "none";
           stockPanel2.stockLegend = stockLegend2;
  
           // set panels to the chart
           chart.panels = [stockPanel1, stockPanel2];
  
  
           // OTHER SETTINGS ////////////////////////////////////
           var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
           scrollbarSettings.graph = graph1;
           scrollbarSettings.updateOnReleaseOnly = true;
           scrollbarSettings.usePeriod = "WW"; // this will improve performance
           scrollbarSettings.position = "top";
           chart.chartScrollbarSettings = scrollbarSettings;
  
           var cursorSettings = new AmCharts.ChartCursorSettings();
           cursorSettings.valueBalloonsEnabled = true;
           chart.chartCursorSettings = cursorSettings;
  
  
           // PERIOD SELECTOR ///////////////////////////////////
           var periodSelector = new AmCharts.PeriodSelector();
           periodSelector.position = "top";
           periodSelector.dateFormat = "YYYY-MM-DD";
           periodSelector.inputFieldWidth = 150;
           periodSelector.periods = [{
              period: "DD",
              count: 1,
              label: "1 day"
           }, {
              period: "DD",
              count: 2,
              label: "2 days"
           }, {
              period: "DD",
              count: 5,
              label: "5 days"
           }, {
              period: "DD",
              count: 12,
              label: "12 days"
           }, {
              period: "MAX",
              label: "MAX"
           }];
           chart.periodSelector = periodSelector;
  
           var panelsSettings = new AmCharts.PanelsSettings();
           panelsSettings.usePrefixes = true;
           chart.panelsSettings = panelsSettings;
  
           chart.write('chartdiv');
        }
  
     &lt;/script&gt;
  </code></pre>
  
  <p>And this is how I save it on server-side:</p>
  
  <pre><code>def save_chart_snapshot(request):
     if request.POST:
        data = urllib.unquote(request.POST['imageData'])
        imageData = data.split(';')[1].split(',')[1]
        filename = "static/temp/charts/snapshots/" + request.POST['isin'] + ".png"
        if not os.path.exists(filename):
           try:
              fh = open(filename, "wb")
              fh.write(imageData.decode('base64'))
           except IOError:
              logger.error("Cannot find file or read data: " + filename)
           else:
              fh.close()
              logger.debug("Chart snapshot is generated: " + filename)
     return HttpResponse("done")
  </code></pre>