C3 line chart

C3 charts example.

by Chetan Motamarri

HTML

<script src="http://jsfiddle.net/masayuki0812/7kYJu/"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">

<button>Download as image</button>

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

JavaScript

// generate c3 chart
var chart = c3.generate({
	 axis: {   
  			  y: {
            label: {
              text: "y axis label",
              position: 'outer-middle'
            }
          },
          x: {
            tick: {
              fit: true 
            },
            label: {
              text: "x axis label",
              position: 'outer-center'
            }
          }
    },
    
    legend: {
      position: 'inset'
    },
 	 
    data: {
        columns: [
            ['data', 10, 20, 30, 40, 50]
        ]
    }
});


// button event listener
var btn = document.querySelector('button');

btn.addEventListener('click', function() {

	  var chartDiv = document.getElementById("chart");
		var svg = chartDiv.getElementsByTagName("svg")[0]; 
		var xml = (new XMLSerializer()).serializeToString(svg);
 		var image = new Image();
  			image.src = 'data:image/svg+xml;base64,' + window.btoa(xml);
      
    image.onload = function() {
        // create canvas and push that image into canvas
    	 var canvas = document.createElement("canvas");
       	   canvas.width = image.width;
  		     canvas.height = image.height + 50;
           canvas.style.display = "none";
    	 
       var ctx = canvas.getContext( "2d" );
    	     ctx.drawImage( image, 0, 0 );
           ctx.globalCompositeOperation = 'destination-over'
   				 ctx.fillStyle = "#FFFFFF";
    			 ctx.fillRect(0, 0, canvas.width, canvas.height);

		   var a = document.createElement('a');
  				 a.download = "image.png";
  				 a.href = canvas.toDataURL('image/png');
  				 a.click();
    };
});