Kreisdiagramme für VIS

[liv-in-sky]

@cosmicchaos moment

[liv-in-sky]

@cosmicchaos
zum test kannst du erstmal alle werte lassen - und nur die datenpunkte angleichen

später dann die eigenen vari' ändern

[Cosmicchaos]

@liv-in-sky
Soweit hab ich es jetzt. Den letzten Block versteh ich allerdings nicht

[liv-in-sky]

@cosmicchaos

du meinst den block, der keine verbindung hat - "lila und lila gehören zusammen"

das ist eine eingefügte javascript function, die aufgerufen wird (im steuer blockly) und dann den ganzen html code erstellt

der ganze code wird dann in den dp geschrieben - kannst du ansehen im object tab

in der vis - html standard widget - wird dann angegeben, es soll den inhalt (binding) des dp als inhalt nehmen - so steht plötzlich ein html code in dem widget und wird angezeigt - nicht im vis editor sondern erst in der runtime

[liv-in-sky]

@cosmicchaos

wenn du auf die drei punkte drückst - bei dem function blockly siehst du dn inhalt

[Cosmicchaos]

@liv-in-sky
Läuft...
Wahnsinn, was alles geht. Riesen Dank für die Anleitung für Dummies

Wenn ich das richtig sehe liegt jetzt ein Tortendiagramm darunter, korrekt? Ich habe in meiner Vis da noch ein Bild drunter, das geht dann wohl nicht, oder?

[liv-in-sky]

@cosmicchaos
du kannst ein wenig steuern, was hintereinander liegt durch den z-index pro widget im vis editor

im moment liegt der graue kreis einfach über dem widget mit dem tortendiagram - das kannst du aber wegnehmen und etwas anderes mit text oder bild hinlegen

damit ein widget als kreis angezeigt wird,

[Cosmicchaos]

@liv-in-sky Ja, danke. Damit probiere ich ein bisschen rum. Alternativ ginge es vielleicht doch auch mit 2 zusammengebauten circle knob widgets.

Das wären die beiden die ich übereinander legen würde wenn man bei einem die background color irgendwie auf opacity 0 setzen könnte.

Spoiler

[{"tpl":"tplHqCircle","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"0_userdata.0.Eigen_Daten.Anteil_Grid_Tag","min":"0","max":"100","digits":"1","step":"1","is_comma":"true","displayPrevious":true,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"descriptionLeft":"Anteil_PV_Tag","readOnly":true,"anticlockwise":true,"linecap":false,"angleOffset":"","hideNumber":true,"color":"#5e5e5e","bgcolor":"#1C7BB5","angleArc":"","cursor":"","thickness":"0.15"},"style":{"left":"879px","top":"403px","z-index":"45","width":"100px","height":"100px"},"widgetSet":"hqwidgets"}]

Spoiler

[{"tpl":"tplHqCircle","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"0_userdata.0.Eigen_Daten.Anteil_PV_Tag","min":"0","max":"100","digits":"1","step":"1","is_comma":"true","displayPrevious":"true","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"descriptionLeft":"Anteil_PV_Tag","readOnly":true,"anticlockwise":false,"linecap":false,"angleOffset":"","hideNumber":true,"color":"#B4CD34","thickness":"0.15","bgcolor":"#ffffff"},"style":{"left":"1164px","top":"400px","z-index":"50","width":"100px","height":"100px","background-color":""},"widgetSet":"hqwidgets"}]

[liv-in-sky]

@cosmicchaos wirst du nur mit jquery hinbekommen - teil von jvascript

[liv-in-sky]

@cosmicchaos

habe das schon selbst versucht gehabt - daher habe ich das tortendiagram

[Cosmicchaos]

@liv-in-sky schade, das sah dem ursprünglichen Ziel schon verdammt ähnlich...

[liv-in-sky]

@cosmicchaos

hast du mal versucht, mit transparent als farbe zu arbeiten ?

dann musst du aber 3 widgets übereinander legen und alle müssen ja an einer anderen stelle anfangen - also mit winkeloffset - dazu musst du aber den winkeloffset abhängig von deinen werten in den datenpunkten machen

[Cosmicchaos]

@liv-in-sky ich werde blöd, damit geht's... manchmal ist es zu einfach.

man kann das zweite widget invertieren, fängt also oben auf 12 Uhr an, geht aber nach links (Grid). Der Rest ist Batterie. Das zweite Widget leigt drüber und geht nach rechts und zeigt den PV-Anteil.

[liv-in-sky]

@cosmicchaos poste mal das ergebnis - also das widget - würd ich gerne mal sehen

[Homoran]

@cosmicchaos sagte in Kreisdiagramme für VIS:

Ich habe in meiner Vis da noch ein Bild drunter, das geht dann wohl nicht, oder?

was für ein Bild?
Hat das eine icon-Funktion?

Oder was geht nicht?

[Cosmicchaos]

@liv-in-sky

Spoiler

[{"tpl":"tplHqCircle","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"oid":"0_userdata.0.Eigen_Daten.Anteil_PV_Tag","min":"0","max":"100","digits":"1","step":"1","is_comma":"true","displayPrevious":"true","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"descriptionLeft":"Anteil_PV_Tag","readOnly":true,"anticlockwise":false,"linecap":false,"angleOffset":"","hideNumber":true,"color":"#B4CD34","thickness":"0.15","bgcolor":"transparent","cursor":"","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"1026px","top":"821px","z-index":"50","width":"100px","height":"100px"},"widgetSet":"hqwidgets"}]

Spoiler

[{"tpl":"tplHqCircle","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"0_userdata.0.Eigen_Daten.Anteil_Grid_Tag","min":"0","max":"100","digits":"1","step":"1","is_comma":"true","displayPrevious":true,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"descriptionLeft":"Anteil_PV_Tag","readOnly":true,"anticlockwise":true,"linecap":false,"angleOffset":"","hideNumber":true,"color":"#5e5e5e","bgcolor":"#1C7BB5","angleArc":"","cursor":"","thickness":"0.15"},"style":{"left":"1138px","top":"826px","z-index":"45","width":"100px","height":"100px"},"widgetSet":"hqwidgets"}]

[Cosmicchaos]

@homoran Das Icon hat keine Funktion. Es ging mit der Lösung von liv-in-sky nicht, die Mitte des Widgets transparent zu halten. Mit den beiden knob widgets funzt das jedoch.

[liv-in-sky]

@cosmicchaos

du solltest auch den code in sog. code tags packen und das dann in den spoiler

[Enrico Fischer]

@liv-in-sky said in Kreisdiagramme für VIS:

@cosmicchaos

wie wäre es mit sowas und in der mitte einen kreis darüberlegen

ist html code - müßte nur umgebaut werden mit ein paar bindings zum steuern

evtl kann man den mittelpunkt auh noch in den html code einbinden

könnte morgen mal ein paar tests machen

widgetimport

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<style>\n    \n  div.my2test { background: conic-gradient(yellowgreen 70%, gold 0 86%, #f06 0);\n            height: 150px;\n    width: 150px;\n     border-radius:50%;\n  }\n</style>\n\n<div class=\"my2test \">\n   \n</div>"},"style":{"left":"405px","top":"397px","width":"163px","height":"172px"},"widgetSet":"basic"}]

Ich denke auch das das der beste Ansatz ist.Einfach das Diagramm auf z-index 1 legen und einen Html mit einem Radius von 100 und einem Durchmesser der kleiner ist wie das Diagramm darüber legen.Hintergrund des html widgets muss dann die selbe Farbe haben wie dein Vis hintergrund.

Widget Code

[{"tpl":"tplVis-materialdesign-Chart-Pie","data":{"oid":"nothing_selected","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","chartDataMethod":"inputPerEditor","dataCount":"1","chartType":"doughnut","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background","chartAreaBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background_chart","titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","globalColor":"","hoverColor":"","borderColor":"","hoverBorderColor":"","showValues":"showValuesOff","valuesFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.pie.value","valuesFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor":"center","valuesPositionAlign":"end","valuesTextAlign":"center","legendPosition":"right","legendFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.legend","legendFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.legend","legendFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend","legendPointStyle":"true","showTooltip":"true","tooltipBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background","tooltipShowColorBox":"true","tooltipTitleFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title","tooltipTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title","tooltipTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title","tooltipBodyFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text","tooltipBodyFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text","tooltipBodyFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid0":"proxmox.0.node_proxmox.memory.free","oid1":"proxmox.0.node_proxmox.memory.used","dataColor0":"#cede12","dataColor1":"#1958cc","borderWidth":"0","cardUse":false},"style":{"left":"97px","top":"32px","width":"300px","height":"300px","z-index":"1"},"widgetSet":"materialdesign"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0},"style":{"left":"117px","top":"52px","z-index":"2","width":"260","height":"260","background-color":"#f0e0e0","border-radius":"100%"},"widgetSet":"basic"},{"tpl":"tplValueFloat","data":{"oid":"proxmox.0.node_proxmox.memory.free","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","is_comma":"true","factor":"1","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html_append_plural":" MB free"},"style":{"left":"47px","top":"365px","color":"#cede12","width":"200","height":"30","font-size":"x-large"},"widgetSet":"basic"},{"tpl":"tplValueFloat","data":{"oid":"proxmox.0.node_proxmox.memory.used","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","is_comma":"true","factor":"1","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html_append_plural":" MB used"},"style":{"left":"247px","top":"365px","color":"#1958cc","width":"200","height":"30","font-size":"x-large","text-align":"right"},"widgetSet":"basic"}]

[Glasfaser]

@cosmicchaos sagte in Kreisdiagramme für VIS:

Das zweite Widget leigt drüber

Das Kreisdiagramm funktioniert auch nur mit einem Widget , :

.

hier die drei Datenpunkte eintragen :

Hier kannst du den inneren Kreisdurchmesser ( vom Kuchen ) einstellen :
.

.

Widget

[{"tpl":"tplVis-materialdesign-Chart-Pie","data":{"oid":"","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","chartDataMethod":"inputPerEditor","dataCount":"2","chartType":"doughnut","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background","chartAreaBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background_chart","titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","globalColor":"","hoverColor":"","borderColor":"","hoverBorderColor":"","showTooltip":false,"tooltipBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background","tooltipShowColorBox":"true","tooltipTitleFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title","tooltipTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title","tooltipTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_title","tooltipBodyFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text","tooltipBodyFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text","tooltipBodyFontSize":"16","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid0":"0_userdata.0.1","oid1":"0_userdata.0.2","dataColor0":"#cede12","dataColor1":"#1958cc","borderWidth":"0","cardUse":false,"oid2":"0_userdata.0.3","label0":"","valueTextColor0":"","label1":"","valueTextColor1":"","chartPaddingTop":"","chartPaddingLeft":"","chartPaddingRight":"","chartPaddingBottom":"","doughnutCutOut":"85","dataColor2":"#d2d0d0","name":"PV Kreis","g_pieValuesLayout":true,"showValues":"showValuesOff","valuesFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.pie.value","valuesFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor":"center","valuesPositionAlign":"end","valuesTextAlign":"center","g_legendLayout":false,"legendPosition":"right","legendFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.legend","legendFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.legend","legendFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend","legendPointStyle":"true"},"style":{"left":"505px","top":"105px","width":"300px","height":"300px","z-index":"50"},"widgetSet":"materialdesign"}]