Long time no see! The blog is awakening.

I wanted to produce a graph with chart.js that had two horizontal lines for alarm and warning levels. The resulting graph and code is shown below. This is a reply to this post.

chart


        Chart.types.Line.extend({
            name: "LineWithLine",
            initialize: function () {
                Chart.types.Line.prototype.initialize.apply(this, arguments);
            },
            draw: function () {
                Chart.types.Line.prototype.draw.apply(this, arguments);
                var firstPoint = this.datasets[0].points[0];

                this.chart.ctx.beginPath();
                this.chart.ctx.strokeStyle = '#ff0000';
                this.chart.ctx.strokeColor = '#ff0000';
                this.chart.ctx.moveTo(firstPoint.x, this.scale.calculateY(this.options.larmLevel));
                this.chart.ctx.lineTo(this.chart.width, this.scale.calculateY(this.options.larmLevel));
                this.chart.ctx.stroke();
                this.chart.ctx.closePath();

                this.chart.ctx.beginPath();
                this.chart.ctx.strokeStyle = '#CCCC00';
                this.chart.ctx.strokeColor = '#CCCC00';
                this.chart.ctx.moveTo(firstPoint.x, this.scale.calculateY(this.options.warningLevel));
                this.chart.ctx.lineTo(this.chart.width, this.scale.calculateY(this.options.warningLevel));
                this.chart.ctx.stroke();
                this.chart.ctx.closePath();
            }
        });

        var data = {
            labels: ["13/10", "14/10", "15/10", "16/10", "17/10", "18/10", "19/10", "20/10"],
            datasets: [
                {
                    data: [14, 100, 87, 76, 49, 42, 20 ,10]
                }
            ]
        };

       $(document).ready(function () {

            var ctx = document.getElementById("myChart").getContext("2d");
            var myLineChart = new Chart(ctx).LineWithLine(data, {
                larmLevel: 12,
                warningLevel: 24
            });

        });

Share →

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *