chart.js base64 image generation - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

chart.js base64 image generation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
      <style id="compiled-css" type="text/css">

#chart div{/*from w w w .ja  v  a  2  s .  com*/
   display: inline-block;
}
#legende{
}
#legende li{
   list-style-type:none;
}
#legende li span{
   display: inline-block;
   width: 15px;
   height: 15px;
   margin-right: 5px;
   border-radius: 2px;
   vertical-align: middle;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var data = [{"label":"Aktiv","value":6,"color":"#123456"},
            {"label":"In Bearbeitung","value":5,"color":"#674100", "highlight":"#563000"},
            {"label":"Aktiv in 7 Tagen","value":0,"color":"#985523"},
            {"label":"Aktiv in 31 Tagen","value":0,"color":"#987654"},
            {"label":"F?llig in 7 Tagen","value":0,"color":"#321987"},
            {"label":"F?llig in 31 Tagen","value":4,"color":"#159987"},
            {"label":"Erledigt","value":3,"color":"#369874"},
            {"label":"?berf?llig","value":2,"color":"#188941"}
           ];
var ctx = document.getElementById("myChart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(data,{animationEasing: "liniear", onAnimationComplete: function(){document.getElementById("basetest").innerHTML = "<img src='" + myPieChart.toBase64Image() + "' />"}});
// And for a doughnut chart
//var myDoughnutChart = new Chart(ctx[1]).Doughnut(data,options);
document.getElementById("legende").innerHTML = myPieChart.generateLegend();
    }

      </script> 
   </head> 
   <body>  
      <div id="basetest"></div> 
      <div id="chart"> 
         <canvas id="myChart" width="400" height="400"></canvas> 
         <div id="legende"></div> 
      </div>   
   </body>
</html>

Related Tutorials