Enkla diagram med jQuery och Flot

Jag använder inte så mycket Javascript på CV-online.se, men till andra projekt använder jag ibland jQuery. jQuery är ett riktigt bra bibliotek som förenklar arbetet med Javascript. En stor fördel är att det finns en mängd plugins. Flot är ett plugin som jag hittade jag idag, det tog 5 minuter att göra diagrammet nedan.

Flot är ett bra alternativ till Googles Chart-API även om det i dagsläget har ett par brister (t.ex. avsaknad av cirkeldiagram och ingen möjlighet att skriva förklarande text på x- och y-axlarna), men det fixas förhoppningsvis snart.

Diagrammet visar antalet nya användare på CV-online.se per månad (siffrorna är något avrundade) varje år sedan starten.

För att skapa diagrammet inkluderas tre filer:

<!--[if IE]<script language="javascript" type="text/javascript" src="/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="/jqueryjs"></script>
<script language="javascript" type="text/javascript" src="/jquery.flot.js"></script>

Placera ut diagrammet på sidan:

<div id="placeholder" style="width:400px;height:250px;"></div>

Och slutligen lite kod (jag har plockat bort lite data här):

$(function () {
var datasets = [
{ label: "2007", data: [[1,2225], [2,2275], [3,2220], ..., lines: { show: true }, points: { show: true } },
{ label: "2008", data: [[1,2725], [2,3275], [3,3125], ..., lines: { show: true }, points: { show: true } }
];

var options = { legend: { position: "ne" }, xaxis: { ticks: [[1, "jan"], [2, "feb"], [3, "mar"], ...] } }

$.plot($("#placeholder"), datasets, options);
});
</script>