Thursday 20 March 2014

Save highstock as binary image

Here I am going to explain how to save highstock chart as a binary image .

Highstock View

Here we are plotting Highstock .

 <div id="chart"></div>

For converting Highstock to binary image ,first we have to convert this to canvas .


 <canvas id="canvas" width="1000px" height="600px" 
 <img class="binaryimage">

Here first we have to find the svg

var svg = document.getElementById('chart').children[0].innerHTML;

Note : If zero is not working you can try with one .Here we are just trying to find the svg


var svg = document.getElementById('chart').children[0].innerHTML;
var img = canvas.toDataURL("image/png"); 

//img is data:image/png;base64
img = img.replace('data:image/png;base64,', '');
$('.binaryimage').attr('src', 'data:image/png;base64,'+img);


You can take this html of binary image and can save to db or you can save only the binary code.

You can include these also

<script type="text/javascript" 

<script type="text/javascript" 

<script type="text/javascript" 


Play in fiddle

Save highchart as binary image

Highcharts is a very good option for creating Interactive javascript charts for your webpage. Highstock is an another advanced option of highstock. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

You can refer about highstock here
And for highstock

I am explaining here how to save angular highchart as a binary image.


<higchart id="highchartContainer" config="highchart" ></highchart> 

Angular code

$scope.highchart ={
 options : {
  chart : {
   type : 'bar'
  series :[{
  data : [ 20 ,40 ,50 ,60 ]
  title : {
  text : 'sample text'
  loading : false 

Save higchart as binary image .

<button ng-click="saveAsBinary();">Save </button>

<img id="binaryImage"/>

$scope.saveAsBinary = function( ){
 var svg = document.getElementById('highchartContainer')
// svg = chart.getSVG();   
 var base_image = new Image();
 svg = "data:image/svg+xml,"+svg;
 base_image.src = svg;
 $('#binaryImage').attr('src', svg);


You can take this html or binary code and can save in DB directly.

If you are facing any issue with firfox you can try above method ( highstock to binary image) .Basically both are using same logic and no issues in firfox except you need support of some other plugins .


Play in fiddle

Related Posts

1. Create responsive highchart

2. Angular flash message using directive

3. Angular routing

4. Rating Stars using angular js Directive concept

5. Communicate with controllers in angular js

No comments :

Post a Comment