Export StockChart as Base64 Image | CanvasJS JavaScript StockCharts

Export StockChart as Base64 Image | CanvasJS JavaScript StockCharts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<div id="chartContainer" style="height: 400px; width: 100%;"></div>
<button id="getBase64Image" type="button">Get Base64 Image</button>

JavaScript

var dps1 = [], dps2= [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
  theme: "light2",
  exportEnabled: true,
  title:{
    text:"BTC/USD"
  },
  subtitles: [{
  	text: "Open Console to see Base64 String"
  }],
  charts: [{
    axisX: {
      crosshair: {
        enabled: true,
        snapToDataPoint: true
      }
    },
    axisY: {
      prefix: "$"
    },
    data: [{
      type: "candlestick",
      yValueFormatString: "$#,###.##",
      dataPoints : dps1
    }]
  }],
  navigator: {
    data: [{
      dataPoints: dps2
    }],
    slider: {
      minimum: new Date(2018, 04, 01),
      maximum: new Date(2018, 06, 01)
    }
  }
});
$.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {
  for(var i = 0; i < data.length; i++){
    dps1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
    dps2.push({x: new Date(data[i].date), y: Number(data[i].close)});
  }
  stockChart.render();
});

$("#getBase64Image").click(function(){
  html2canvas(document.querySelector("#chartContainer")).then(canvas => {  
    var dataURL = canvas.toDataURL();
    console.log(dataURL)
  });
});