Warning: Declaration of PageLinesHighlight::section_template($clone_id) should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/highlight/section.php on line 0

Warning: Declaration of PLheroUnit::section_template($clone_id) should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/hero/section.php on line 0

Warning: Declaration of PageLinesBanners::section_template($clone_id) should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/banners/section.php on line 0

Warning: Declaration of PageLinesCarousel::section_template($clone_id) should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/carousel/section.php on line 0

Warning: Declaration of PLMasthead::section_template($clone_id) should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/masthead/section.php on line 0

Warning: Declaration of PLNavBar::section_template($clone_id, $location = '') should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/navbar/section.php on line 0

Warning: Declaration of PageLinesQuickSlider::section_template($clone_id) should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/quickslider/section.php on line 0

Warning: Declaration of PageLinesQuickSlider::section_head($clone_id) should be compatible with PageLinesSection::section_head() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/quickslider/section.php on line 0

Warning: Declaration of PageLinesFeatures::section_template($clone_id) should be compatible with PageLinesSection::section_template() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/features/section.php on line 0

Warning: Declaration of PageLinesFeatures::section_head($clone_id) should be compatible with PageLinesSection::section_head() in /var/www/marcusnyberg.com/wp-content/themes/pagelines/sections/features/section.php on line 0
Marcus Nyberg | Drawing horizontal lines in chart.js

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 *