chartjs-2.0-test

by Oscar Vingtoft

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="chartjs-tooltip"></div>
<div class="row">
  <div class="col-lg-10">
     <h1 style="text-align:center;">ChartJS 2.5 test</h1>
     <div style="width:100%; margin: 0 auto;">
     <canvas id="canvas"></canvas>
    </div>
  </div>
</div>

JavaScript

var ctx = $("#canvas");


Chart.pluginService.register({
        beforeDraw: function (chart, easing) {
            var helpers = Chart.helpers;
            var ctx = chart.chart.ctx;
            var chartArea = chart.chartArea;

            ctx.save();
            ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, (chartArea.bottom - chartArea.top)/3);
            ctx.restore();

            ctx.save();
            ctx.fillStyle = 'rgba(255, 255, 0, 0.2)';
            var a = (chartArea.top) + ((chartArea.bottom - chartArea.top)/3);
            ctx.fillRect(chartArea.left, a, chartArea.right - chartArea.left, (chartArea.bottom - chartArea.top)/3);
            ctx.restore();

            ctx.save();
            ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
            var a = (chartArea.top) + (((chartArea.bottom - chartArea.top)/3)*2);
            ctx.fillRect(chartArea.left, a, chartArea.right - chartArea.left, (chartArea.bottom - chartArea.top)/3);
            ctx.restore();
        }
    });
    
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"],
        datasets: [{
            label: '',
            data: [85, 80, 60, 55, 65, 75, 35, 30, 45, 60, 85, 75, 80],
        }]
    },
		options: {
        tooltips: {
            custom: function(tooltip) {
			        if (!tooltip) {
              	alert("Why is this alert not fired?");
                return;
			        }
					},
				},
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMax: 100,
                    suggestedMin: 0,
                    beginAtZero:true,
                    callback: function(label, index, labels) {
                        return ''
                    }
                }
            }]
        }
    }
});