In der kommenden Version v0.79 von JooWI Online werden die ersten Daten in Diagrammen angezeigt.
Hierfür kommt das jQuery Plugin jqPlot zum Einsatz, welches nach einigem herumprobieren meine geforderten Anforderungen absolut erfüllt.
In diesem Beitrag beschreibe ich meine ersten Erfahrungen mit jqPlot.
Als erstes muss natürlich die Erweiterung von genannter Seite heruntergeladen werden. Das Paket enthält bereits eine Dokumentation sowie einige sehr hilfreiche Beispiele.
Dies ist mein erstes Diagramm nach einigen Stunden Dokumentation lesen, Google Suche und Beispiele durchsehen.
Folgend beschreibe ich den Weg zu diesem Diagramm, inkl. der Cursorerkennung sowie einen Diagramm-Zoom.
Die eigentliche Ebene mit der Legende sind nicht Bestandteil von jqPlot. Da bei mir die Beschriftung mit der enthaltenen Legende in jqPlot immer umgedreht aufgelistet wurde, habe ich mich einfach entschieden, die Legende auszublenden und eine Eigene per CSS zu erstellen.
Für mein Diagramm mussten folgende JavaScript Dateien geladen sein:
// jQuery allgemein
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// die jqPlot Dateien
<link rel="stylesheet" href="/js/jqplot/jquery.jqplot.css" type="text/css" />
<script type="text/javascript" src="/js/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="/js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
// für meine gewünschte Formatierung habe ich hier noch ein weiteres Nummern-Formatier-Plugin geladen
<script type="text/javascript" src="/js/jquery.number.min.js"></script>
Damit das Plugin weiß, wohin es sein Diagramm laden soll, wird eine entsprechende Ebene mit einer gewünschten ID benötigt:
<div id="chartdiv" style="height:120px; width:100%; "></div>
Im Kopf der Datei, nachdem die vorher genannten Daten geladen wurden, habe ich dann folgenden Diagrammcode erstellt:
$(document).ready(function(){
var line1 = [[open,1,jQuery.number(open, 2, ',', '.')+' €']];
var line2 = [[current_year,1,jQuery.number(current_year, 2, ',', '.')+' €']];
var line3 = [[last_year,1,jQuery.number(last_year, 2, ',', '.')+' €']];
var line4 = [[total,1,jQuery.number(total, 2, ',', '.')+' €']];
// make x-axis
var x = 10;
if (parseInt(open) > parseInt(total))
{
while (x < open)
{
consoleLog('x: ' + x);
x = x * 10;
}
}
else
{
while (x < total)
{
consoleLog('x: ' + x);
x = x * 10;
}
}
var chart = jQuery.jqplot('chartdiv', [line4,line3,line2,line1], {
animate: true,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'e',
edgeTolerance: -5
},
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal'
}
},
// series: [
// {
// label: Joomla.JText._('INFORMATION_STATS_CONTACT_SALES_TOTAL', 'INFORMATION_STATS_CONTACT_SALES_TOTAL'),
// },
// {
// label: Joomla.JText._('INFORMATION_STATS_CONTACT_SALES_LAST_YEAR', 'INFORMATION_STATS_CONTACT_SALES_LAST_YEAR')
// },
// {
// label: Joomla.JText._('INFORMATION_STATS_CONTACT_SALES_CURRENT_YEAR', 'INFORMATION_STATS_CONTACT_SALES_CURRENT_YEAR')
// },
// {
// label: Joomla.JText._('INFORMATION_STATS_CONTACT_OPEN_INVOICES', 'INFORMATION_STATS_CONTACT_OPEN_INVOICES')
// }
// ],
axesDefaults: {
},
axes: {
xaxis: {
label: Joomla.JText._('INFORMATION_STATS_CONTACT_SALES', 'INFORMATION_STATS_CONTACT_SALES'),
labelOptions: {
fontFamily: 'Arial, Helvetica, sans-serif',
fontSize: '12px',
fontColor: '#333'
},
max: x
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
show: false,
fontSize: '0pt'
}
}
},
// legend: {
// show: false,
// location: 'e',
// placement: 'outside'
// },
cursor: {
show: true,
zoom: true,
showTooltip: false
}
});
}
- in den ersten 4 Zeilen setze ich lediglich die Werte meiner 4 Balken und formatiere diese hier auch gleich ins deutsche Euro-Format
- anschließend erstelle ich meine eigene X-Achse, abhängig davon, ob die Variable OPEN oder TOTAL größer ist, wird X mit 10 multipliziert
(Dies wäre nicht unbedingt notwendig gewesen, da jqPlot die Achsen auch selbst ermitteln kann. Ich wollte dennoch die Freiheit, eine Eigene zu erstellen.) - dann gehts an das richtige Diagramm, wo die ID der zuvor erstellten DIV-Ebene auch zu sehen ist, sowie die 4 erstellten Balken (lines)
- die auskommentierten Bereiche sind die von jqPlot verfügbare Legende, welche ich ja wie bereits oben erwähnt, ausgeblendet habe
- animate:true sorgt für eine nette Balkenanimation beim Laden
- die fontSize:0pt der yaxis sorgt dafür, dass ich hier keine Achsenbeschriftung angezeigt haben will, genausowenig wie die Ticks der Linien (show:false)
- der cursor: Bereich sorgt letzendlich dafür, dass ich ins Diagramm zoomen kann. Für die standard Ansicht, reicht ein anschließender Doppelclick ins Diagramm
