title: Saving pie chart as an image using database data
body: <p>Require some help when trying to save chart as an image. Sorry just started this new chart.js.</p>
  
  <p>Issue:</p>
  
  <ol>
  <li>How do I add my database data inside the chart? I keep try to add in $user but it keep giving me undefined user.</li>
  </ol>
  
  <p>Here is the data that I want to add in from my database,</p>
  
  <pre><code>  $users = DB::table('personal_infos')
        -&gt;join('evaluations','evaluations.user_id', '=', 'personal_infos.id') 
        -&gt;select('evaluations.recommendation','evaluations.created_at' ) 
        -&gt;where('evaluations.recommendation', '=', 'Yes')  
        -&gt;get();
  </code></pre>
  
  <p>For now I just used something like this to generate the pie chart:</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
              $("#save-btn").click(function() {
          $("#canvas").get(0).toBlob(function(blob) {
              saveAs(blob, "chart_1.png");
          });
  });
  
  var data = [
      {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
      },
      {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
      },
      {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
      }
  ];
  
  var ctx = $("#canvas").get(0).getContext("2d");
  var mychart = new Chart(ctx).Pie(data,
  {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke : false,
  
      //String - The colour of each segment stroke
      segmentStrokeColor : "#fff",
  
      //Number - The width of each segment stroke
      segmentStrokeWidth : 2,
  
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout : 0, // This is 0 for Pie charts
  
      //Number - Amount of animation steps
      animationSteps : 10,
  
      //String - Animation easing effect
      animationEasing : "linear",
  
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate : true,
  
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale : false,
  
      //String - A legend template
      legendTemplate : "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;segments.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=segments[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(segments[i].label){%&gt;&lt;%=segments[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
  
  }
  );
          &lt;/script&gt;
  </code></pre>