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 highcharts.com/
And for highstock highcharts.com/highstock.

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

View

 
<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')
                                       .children[0].innerHTML;
// 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 below method ( highstock to binary image) .Basically both are using same logic and no issues in firfox except you need to add some more plugins .

Demo

Play in fiddle

Save Highstock chart 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 .

View

 
 <canvas id="canvas" width="1000px" height="600px" 
           style="display:none;"></canvas>
 
 <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

Controller

 
var svg = document.getElementById('chart').children[0].innerHTML;
    
canvg(document.getElementById('canvas'),svg);
    
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.

Demo

Play in fiddle

You can include these also

 
<script type="text/javascript" 
  src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js">
</script> 

<script type="text/javascript" 
  src="http://canvg.googlecode.com/svn/trunk/StackBlur.js">
</script>

<script type="text/javascript" 
  src="http://canvg.googlecode.com/svn/trunk/canvg.js">
</script> 
 

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