function legend(parent, orig_data) {
    parent.className = 'legend';
    var data = orig_data.hasOwnProperty('datasets') ? orig_data.datasets : orig_data;

    while(parent.hasChildNodes()) {
        parent.removeChild(parent.lastChild);
    }

    for (var i in data) {
        d = data[i];
        var title = document.createElement('span');
        title.className = 'title';
        parent.appendChild(title);

        var colorSample = document.createElement('div');
        colorSample.className = 'color-sample';
        colorSample.style.backgroundColor = colorToHex(d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color);
        colorSample.style.borderColor = colorToHex(d.hasOwnProperty('fillColor') ? d.fillColor : d.color);
        title.appendChild(colorSample);

        var text = document.createTextNode(d.label);
        title.appendChild(text);
    }
}

function componentToHex(c) {
    var hex = Number(c).toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function colorToHex(color) {
    var matchElements = color.match(/^rgba\((\d+),(\d+),(\d+)/);
    if (matchElements)
        return rgbToHex(matchElements[1], matchElements[2], matchElements[3]);
    else
        return color;
}

    {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Warning"
    }


  ];

    var myDoughnut1 = new Chart(ctx).Doughnut(doughnutData, {responsive : true});

    legend(document.getElementById("legend"), doughnutData1,myDoughnut1);

<?php
  include('dbconn.php');
  include('get-chart-data.php');
?>
<script src="js/vendor/Chart.js"></script>
<script src="js/legend.js"></script>
<div>
  <canvas id="pieChartMonthlyIncome" width="400" height="400" class="text-center"></canvas>
    <div id="pieChartMonthlyIncomeLegend"></div>
      <script type="text/javascript">
        var data1 = [
          {
              value: <?php echo $bonus_sum; ?>,
              color:"#F38630",
              label: 'Bonus'
          },
          {
              value: <?php echo $salary_sum; ?>,
              color : "#E0E4CC",
              label: 'Salary'
          },
          {
              value: <?php echo $pm_sum; ?>,
              color : "#69D2E7",
              label: 'Pocket Money'
          },
          {
              value: <?php echo $refund_sum; ?>,
              color : "#62D2E7",
              label: 'Refund'
          },
          {
              value: <?php echo $i_others_sum; ?>,
              color : "#61D2E7",
              label: 'Others'
          }
      ];

      var ctx1 = document.getElementById("pieChartMonthlyIncome").getContext("2d");
      var pieChart1 = new Chart(ctx1).Pie(data1);

      legend(document.getElementById("pieChartMonthlyIncomeLegend"), data1, pieChart1);=
  </script>
</div>