Hi @ll,
ich hab für Interessierte mal eine quick-and-dirty-Lösung, wie man Sparklines (Microcharts) ins WFE integrieren kann. Das ist kein plug-and-play-Projekt, andererseits aber auch recht einfach ins IPS zu integrieren.
Was sind Sparklines?
das sind -wie schon angedeutet - mikroskopisch kleine Charts, die sich quasi in den Fließtext einbetten lassen und nicht höher als die Textzeile selbst sind (größer geht aber auch). Sie sind erstmals 2004 von Prof. Edward Tufte vorgestellt worden, MS hat 2008 begonnen, das Thema in seine Office-Produkte zu integrieren.
Sparklines haben den Zweck, mit minimalstem Aufwand und Platzbedarf maximale Informationen zu bieten. In erster Linie lassen sich über Sparklines Trends darstellen, der Leser erkennt in Milisekunden, welche Aussage im Chart steckt.
Sparklines sind damit das Mittel der Wahl, um auf kleinstem Raum hochverdichtete Informationen mit schnell erfassbaren Aussagen darzustellen - wie z.B. in KPI-Dashboards.
Integration ins WFE
der Output muss als HTML-Content in eine String-Variable mit ~HTML-Profil geschrieben werden. Im Header-Bereich des HTML-Dokuments müssen 2 JS-Scripte (Download: jQuery Sparklines, jquery: jQuery: The Write Less, Do More, JavaScript Library, Version > 1.4 ) eingebunden werden. die beiden Scripte am besten in den Ordner /webfront/user/js/ legen.
<!-- Sparklines JS -->
<script type="text/javascript" src="/user/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/user/js/jquery.sparkline.js"></script>
<!-- Sparklines JS -->
dann werden - auch im Header - das oder die anzuzeigenden Sparklines definiert:
<script type="text/javascript">
$(function() {
/** This code runs when everything has been loaded on the page */
/* Inline sparklines take their values from the contents of the tag */
$('.inlinesparkline').sparkline();
/* Sparklines can also take their values from the first argument
passed to the sparkline() function */
var myvalues = [10,8,5,7,4,4,1];
$('.dynamicsparkline').sparkline(myvalues);
/* The second argument gives options such as chart type */
$('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );
/* Use 'html' instead of an array of values to pass options
to a sparkline with data in the tag */
$('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
});
</script>
anschließend wird das eigentliche Sparkline-Chart in den html-Body eingebunden, z.B. in eine Tabellenzelle:
<td>
<p>
<span class="dynamicsparkline">Loading..</span>
</p>
</td>
die im Chart darzustellenden Werte befinden sich oben in der js-Variable ‚myvalues‘. Um diese Werte nun dynamisch aus IPS auszulesen und ins Chart einzufügen, kann man folgendermassen vorgehen:
- Werte aus IPS auslesen und in einen String umwandeln (im Beispiel: Niederschlagsmenge des heutigen tages, Stundendurchschnitt):
// Niederschlagsmenge
$Array = AC_GetAggregatedValues($AH_ID, $NSMenge_ID, 0, $ts, $te, 25);
$Array = array_reverse($Array);
$ns_menge = '';
for($i=0;$i<count($Array);$i++)
{
$ns_menge .= round($Array[$i]['Avg'], 3).',';
}
unset($Array);
- Übergeben des Strings an die JS-Variable, statt
var myvalues = [10,8,5,7,4,4,1];
nun
var myvalues = ['.$ns_menge.'];
Am Ende kann dann z.B. sowas bei raus kommen:
(wobei ich diese Tabelle eigentlich für meine Webseite gebaut habe, deswegen das etwas differenzierte Design)
Wer will, kann sich die (interaktiven) Sparklines hier live anschauen: RS.Weather visual Cockpit | Raketenschnecke.net (mit der Maus rechts über „aktuelle Meßwerte“ hovern)
Beispiele:
auf der Seite omnipotent.net sind einige Beispiele von Sparklines aufgeführt, ebenso ein Sparkline-Konfigurator, mit dessen Hilfe die kleinen Kerlchen sehr flexibel konfiguriert werden können und der Code anschließend in eigene Scripte übernommen werden kann
Forensuche: Sparkline, Microchart, Graph, Chart, JS, externe Charts, Webseite, Webfront, WFE, Visualisierung, Wetter,
