Lid |
|
Hallo allemaal,
Voor een grafiek met jqplot gebruik ik de volgende code:
<link class="include" rel="stylesheet" type="text/css" href="http://camilstaps.nl/wp-content/plugins/nanostats/jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jquery.min.js"></script>
<div id="nanostats" style="width:600px; height:350px;"></div>
<script class="include" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jquery.jqplot.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.canvasAxisTickRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.highlighter.min.js"></script>
<link class="include" rel="stylesheet" type="text/css" href="http://camilstaps.nl/wp-content/plugins/nanostats/jquery.jqplot.min.css" /> <script class="include" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jquery.min.js"></script> <div id="nanostats" style="width:600px; height:350px;"></div> <script class="include" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jquery.jqplot.min.js"></script> <script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.barRenderer.min.js"></script> <script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.categoryAxisRenderer.min.js"></script> <script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.canvasAxisTickRenderer.min.js"></script> <script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.canvasTextRenderer.min.js"></script> <script class="include" language="javascript" type="text/javascript" src="http://camilstaps.nl/wp-content/plugins/nanostats/jqplot.highlighter.min.js"></script>
(ge-include scripts en stylesheet bestaan en kloppen)
$(document).ready(function(){
var s1 = [[1,1817],[2,2414],[3,4400],[4,5013],[5,8873],[6,11875],[7,13346],[8,14785],[9,17290],[10,17854],[11,17854],[12,18414],[13,19468],[14,21766],[15,23772],[16,24426],[17,27164],[18,27164],[19,32172],[20,35680],[21,35680],[22,40700],[23,40967],[24,42096],[25,42096],[26,44834],[27,47908],[28,49145],[29,49247],[30,50003]];
var s2 = [[1,1667],[2,3333],[3,5000],[4,6667],[5,8333],[6,10000],[7,11667],[8,13333],[9,15000],[10,16667],[11,18333],[12,20000],[13,21667],[14,23333],[15,25000],[16,26667],[17,28333],[18,30000],[19,31667],[20,33333],[21,35000],[22,36667],[23,38333],[24,40000],[25,41667],[26,43333],[27,45000],[28,46667],[29,48333],[30,50000]];
var plot1 = $.jqplot('nanostats', [s2,s1], {
seriesColors: ["#674732","#8888cc"],
series:[
{
highlighter: {
formatString: ""
},
markerOptions: {
size: 0
}
},
{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 10
},
highlighter: {
formatString: "Day %s: %d"
}
}
],
title: "NaNoWriMo Stats for camilstaps",
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
min: 0,
max: 60000,
numberTicks: 7,
tickOptions: {formatString: '%d'}
}
},
highlighter: {
show: true,
sizeAdjust: 0,
showMarker: false
}
});
});
$(document).ready(function(){ var s1 = [[1,1817],[2,2414],[3,4400],[4,5013],[5,8873],[6,11875],[7,13346],[8,14785],[9,17290],[10,17854],[11,17854],[12,18414],[13,19468],[14,21766],[15,23772],[16,24426],[17,27164],[18,27164],[19,32172],[20,35680],[21,35680],[22,40700],[23,40967],[24,42096],[25,42096],[26,44834],[27,47908],[28,49145],[29,49247],[30,50003]]; var s2 = [[1,1667],[2,3333],[3,5000],[4,6667],[5,8333],[6,10000],[7,11667],[8,13333],[9,15000],[10,16667],[11,18333],[12,20000],[13,21667],[14,23333],[15,25000],[16,26667],[17,28333],[18,30000],[19,31667],[20,33333],[21,35000],[22,36667],[23,38333],[24,40000],[25,41667],[26,43333],[27,45000],[28,46667],[29,48333],[30,50000]]; var plot1 = $.jqplot('nanostats', [s2,s1], { seriesColors: ["#674732","#8888cc"], series:[ { highlighter: { formatString: "" }, markerOptions: { size: 0 } }, { renderer: $.jqplot.BarRenderer, rendererOptions: { barWidth: 10 }, highlighter: { formatString: "Day %s: %d" } } ], title: "NaNoWriMo Stats for camilstaps", axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer }, yaxis: { min: 0, max: 60000, numberTicks: 7, tickOptions: {formatString: '%d'} } }, highlighter: { show: true, sizeAdjust: 0, showMarker: false } }); });
Je kunt het resultaat zien op http://file.camilstaps.nl/jqplot.html
Wat nu het vreemde is, is dat de staafgrafiek pas begint bij x-waarde 2, terwijl hij zou moeten beginnen bij waarde 1 gezien de datalijst en ook de hover als je met je muis over de eerste staaf gaat.
Hierdoor wordt ook de laatste waarde, 50003, niet weergegeven in de grafiek.
Als ik s2 en s1 omdraai is het precies andersom: dan begint s1 pas bij de tweede x en laat hij de laatste s1 niet zien.
Weet iemand hoe dit komt en/of hoe ik dit kan verhelpen?
Alvast bedankt!
|