<style> .cvs-euro { background-image: url('/media/plg_content_rgraph/images/euro.jpg'); background-size: 100% 100%; background-repeat: no-repeat;"; } </style>
{rgraph height="300" width="700" title="Fahrzeugkosten - günstigste Autos der Oberklasse" type="Bar" variant="glass" data="Porsche Taycan 4S, Range Rover Sport P300, BMW X7 xDrive40d,Mercedes GLS 350, Porsche 911 Carrera, Mercedes G 350d, BMW 840i Gran Coupé, Lexus LC Coupé 500h, Porsche Panamera PDK, Lexus LS 500h/106.7,107.2,112.1,115.5,115.8,117.4,121.1,121.2,125.0,125.2" tooltipsFormattedDecimals="1"
canvas_class="cvs-euro" tooltip="<b style='padding: 10px;font-size: 15px'>#label#<br><span style='padding:15px'>#val# cent pro Kilometer" yaxisScaleUnitsPost=" cent" xaxisLabelsAngle="30" marginLeft="90" yaxisScaleMin="90" yaxisScaleDecimals="1" yaxisTitle="Cent pro Kilometer" chart_alignment="left" draw_option="draw()" }costs{/rgraph}
Wichtig: Wenn Sie dieses Beispiel via Kopieren/Einfügen testen wollen, stellen Sie sicher, dass das Einfügen mit der Option "paste as plain text" (als unformatierten Text einfügen) durchgeführt wird.
Wichtig: Für den Einsatz von Anzeigeoptionen mit Effekten muss man folgendes beachten. Da php-rgraph geschweifte Klammern ("{" "}") als Delimiter verwendet, müssen im jeweilige Parameter für "draw_option" geschweifte Klammern ("{" bzw. "}") in eckige Klammern ("[" und "]") geändert werden. Wenn dies nicht entprechend beachtet wird, wird das Diagramm nicht korrekt bzw. garnicht angezeigt.
{rgraph chart_name="chart" type="Bar" title="Anzeige Optionen für Säulendiagrmme" width="600" height="300" data="1,1,2,3,4,5,6,7,8,9,10/5000,5000,5000,5000,6000,7000,8000,8000,11000,9000" colorsSequential="true"
yaxisScaleMax="12000" marginBottom="30" marginLeft="70"
event_script="media/plg_content_rgraph/js/draw-event.js" draw_option="grow()"}cvs{/rgraph}
Wichtig: Wenn Sie dieses Beispiel via Kopieren/Einfügen testen wollen, stellen Sie sicher, dass das Einfügen mit der Option "paste as plain text" (als unformatierten Text einfügen) durchgeführt wird.
{rgraph chart_name="chart" type="Bar" title="Update Diagramm mit einem Click" width="600" height="300" data="5000,5000,5000,5000,6000,7000,8000,8000,11000,9000" colorsSequential="true" yaxisScaleMax="12000" variant="3d" marginBottom="105" marginLeft="70" event_script="media/plg_content_rgraph/js/test_event.js" }cvs{/rgraph}
<button type="button" onclick="postMessage('7000,8000,7000,4000,5000,8000,6000,10000,9000,10000', '*');">update</button> <button type="button" onclick="postMessage('5000,5000,5000,5000,6000,7000,8000,8000,11000,9000', '*');">reset</button>
Wichtig: Wenn Sie dieses Beispiel via Kopieren/Einfügen testen wollen, stellen Sie sicher, dass das Einfügen mit der Option "paste as plain text" (als unformatierten Text einfügen) durchgeführt wird.
{rgraph type="Line" data="2013,2014,2015,2016,2017,2018/26,4,-15.5,17,42.5,25" width="600" height="350" yaxisScaleMax="60" yaxisScaleMin="-60" linewidth="4" colors="black" backgroundHbars="-55.0,-5.0,rgba(255,0,0,0.2)| -45,-10,rgba(255,255,0,0.2)|-45,90,rgba(0,255,0,0.2)| 45,10,rgba(255,255,0,0.2)|55,5,rgba(255,0,0,0.2)"}cvsbar{/rgraph}
Wichtig: Wenn Sie dieses Beispiel via Kopieren/Einfügen testen wollen, stellen Sie sicher, dass das Einfügen mit der Option "paste as plain text" (als unformatierten Text einfügen) durchgeführt wird.
Dieses Tortendiagramm zeigt, wie man Details (via "Drill Down") mit weiteren Diagrammen darstellen kann. Die Implementierung besteht aus einem Haupt-Diagramm (dem Tortendiagramm) und drei Säulendiagrammen. Wenn man in ein Segment des Tortendiagramms klicked oder das Contextmenu verwendet (rechts-klick in das Tortendiagramm), so wird das Hauptdiagramm durch ein detaillierteres Säulendiagramm ersetzt. Mit dem Parameter "drill_chart" (zweiter Parameter "1") wird auch ein Contextmenu angefordert, über das man zum Tortendiagramm zurückkehrt (rechts-klick in das jeweilige Säulendiagramm).
{rgraph title="Umsatz im Januar nach Lokation" width="600" height="350" type="Pie" marginTop="30" marginLeft="60" marginRight="80" data="Frankfurt,München,Stuttgart/48000,46000,51000" variant="pie3d" radius="95" labelsSticks="1" labelsIngraphBounding="0" labelsIngraphColor="#f0f0f0" draw_option="implode()" drill_charts="chart1,chart2,chart3" contextmenu="Frankfurt,chart1|München,chart2|Stuttgart,chart3" labelsIngraph="Frankfurt,München,Stuttgart"}cvs{/rgraph}
{title="Umsatz nach Woche in Frankfurt" draw_option="grow()" tooltip="#key#: #val# €"
data="1,2,3,4,5/2000,2000,3500,2500,2600|3200,3100,3200,3300,3300|3100,4100,3200,4400,4500" drill_chart="chart1,1" key="Books,CDs,DVDs" keyPositionX="260" marginTop="50" marginBottom="80"
marginLeft="35" variant="3d" "marginRight="15" titleXaxis="Week" titleXaxisPos="0.6" ymax="5000"}cvs{/rgraph} {rgraph title="Umsatz nach Woche in München" draw_option="fadeIn()" tooltip="#key#: #val# €" data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400" drill_chart="chart2,1" key="Books,CDs,DVDs" keyPositionX="260" marginTop="50" marginBottom="80"
marginLeft="35" variant="3d" "marginRight="15" titleXaxis="Week" titleXaxisPos="0.6" ymax="5000"}cvs{/rgraph} {rgraph title="Umsatz nach Woche in Stuttgart" draw_option="fadeIn()" tooltip="#key#: #val# €" data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700" drill_chart="chart3,1" key="Books,CDs,DVDs" keyPositionX="260" marginTop="50" marginBottom="80"
marginLeft="35" variant="3d" "marginRight="15" titleXaxis="Week" titleXaxisPos="0.6" ymax="5000"}cvs{/rgraph}
Wichtig: Wenn Sie dieses Beispiel via Kopieren/Einfügen testen wollen, stellen Sie sicher, dass das Einfügen mit der Option "paste as plain text" (als unformatierten Text einfügen) durchgeführt wird.