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
            });

        });

console.log not working in Internet Explorer

I am doing a lot of javascript coding nowadays with knockout.js and jQuery. Working in Firefox and Firebug make you forget all those nasty habits of Internet Explorer, until the releasedate is coming closer. ho ho! This was one nasty ”thing” that I had forgotten. Console.log is only available in ”debug mode” (hit F12) in Internet Explorer. If you are calling console.log in ”standard mode” your webpage breaks.

One solution is to remove all logging and another one is to follow ”Mister Lucky’s” comment at stackoverflow and declare console.log like this:

if (!('console' in this)) console={};
'log info warn error dir clear'.replace(/\w+/g,function(f) {
if (!(f in console)) console[f]=console.log||new Function;
});

Now I never forget this silly one…

Updates on an knockout.js observableArray not showing in GUI

This was a really simple problem but is was pretty annoying for a while. I was working with an observableArray in knockout.js and wanted to update a field in one of the items like this:


var ExperienceViewModel = {
  items: ko.observableArray([])
  // adding items to array...
}

function updateViewModel(data)
{
  for (var i = 0; i < viewModel.items().length; i++) {
    if (viewModel.items()[i].Id == data.Id) {
      viewModel.items()[i].Description = data.Description;
    }
  }
}

By doing changes to the viewModel items this way the user interface (webpage) wasn't updated. Strange!? To get it working I had to remove the item from the array and then add it again like this:


function updateViewModel(data)
{
  for (var i = 0; i < viewModel.items().length; i++) {
    if (viewModel.items()[i].Id == data.Id) {
      viewModel.items.splice(i, 1);
      viewModel.items.push(data);
    }
  }
}

I am not a master of knockout.js, however this solution solved my problem.

google_protectAndRun is not defined

Tonight I got a very strange error that in Firefox error-log says ”google_protectAndRun is not defined”. The webpage that I am creating only shows a blank page directly after the page is loaded (when my jquery ”ready”-stuff runs). The error occurs when I am wrapping a ”div” around the adsense-code with jQuery like this:

$("#divID").wrap("<div class="someclass"></div>");

Please help! I cant find any solution to this error.

Hemsida till Ludvig Nordström sällskapet

Jag har nyligen hjälp en kompis med att bygga en hemsida åt Ludvig Nordström sällskapet. Så kika på den!

ludvig1

Eftersom jag är ett stort fan av att använda WordPress (php) som CMS till enklare webbsidor åt föreningar/mindre företag så blev det givetvis den tekniska lösningen. Som vanligt blev det lite hackande i form av att mixtra med teman samt plugins/tillägg men det var ganska enkla fixar som behövde göras. Samtidigt var det kul att se alla bra nyheter i WordPress 2.8. Det är riktigt imponerande att följa WP’s utveckling.

”Operation aborted” i Internet Explorer och javascript

Det fel som orsakar att användaren får upp meddelandet ”operation aborted” i Internet Explorer i kombination med javascript tog mig en lång stund att klura ut. Detta fel har gäckat mig i flera månader utan att jag lyckats lösa det. Tydligen så klarar inte IE att uppdatera DOM-trädet på ett visst sätt utan att crasha.

Operation aborted

Felet beskrivs här och en lösning beskrivs här

Min lösning var att sätta defer=”defer” på det javascript som ändrar i webbsidan dynamiskt så att det körs först när sidan laddats och renderats. Ovanpå detta så lade jag scriptet som uppdaterar sidan i en onload=doMyStuff(). På så sätt SKA sidan ha renderats klart innan jag börjar ändra i den. Så tror jag åtminstone att det funkar…

Det finns en anledning till att utvecklare ogillar Internet Explorer i alla dess former. usch och fy…

Confirm javascript on .NET Linkbutton in datagrids

Today I was struck with some really weird behaviour from a LinkButton in a Datagrid. I could not get the the confirm() javascript to fire. My code-behind was something like this:

LinkButton lb = ((LinkButton)dgItem.FindControl(”lb”));
lb.Attributes[”onClick”] = ”return confirm(‘Do you really want to do that?’);”;

I dont really know why the onClick confirm-box does not fire before the href PostBack. However, the solution was to put the LinkButton inside a span and put the onClick attribute on the span.

// Web page
<span runat="server" id="spanLb">
<Linkbutton stuff/>
</span>

//Code-behind
HtmlControl spanLb = ((HtmlControl)dgItem.FindControl(”spanLb”));
spanLb.Attributes[”onClick”] = ”return confirm(‘Do you really want to do that?’);”;