Saturday 15 March 2014

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


7 comments :

  1. Very helpful .thanks

    ReplyDelete
  2. First method is not working it seems in some version of firfox .Able to convert but binary image is not displaying.
    second one is working in all browsers

    ReplyDelete
    Replies
    1. yea . Save highchart as binary image will work perfectly .While displaying the binary image into UI back ,i noticed it has some issue in some version of firfox .But the second method save highstock as bianry image will work in all browsers ,you can try either of this ,only the difference is that while using second method you have to include additional plugins as i mentioned above

      Delete
  3. it is better if you give some more info

    ReplyDelete
    Replies
    1. I added fiddle and demo page ,please refer that .

      Delete
  4. What i have to do to scale the png image? the highchart exporting{scale:2}... does not work. Any ideas?

    ReplyDelete