Kreisdiagramme für VIS

liv-in-sky

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

Image 1.png

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

[{"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"}]

Cosmicchaos

@liv-in-sky ja, das sieht schon mal ziemlich gut aus. Leider ist HTML jetzt nicht so mein Steckenpferd, also ich wüsste nicht wie ich jetzt den Kreis in der Mitte "freistellen" könnte.

liv-in-sky

@cosmicchaos

das muss ich auch noch rausfinden - ich meld mich wieder

Cosmicchaos

@liv-in-sky vielleicht lässt sich ja mit dem Circel-knob-widet was anfangen? Leider bekomme ich damit nicht mehr als 2 Datenpunkte gezeigt.

liv-in-sky

@cosmicchaos ich glaube, da bekommen wir keine 3 werte hin

Homoran

@cosmicchaos sagte in Kreisdiagramme für VIS:

ich wüsste nicht wie ich jetzt den Kreis in der Mitte "freistellen" könnte.

so wie @liv-in-sky geschrieben hat:

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

in der mitte einen kreis darüberlegen

du nimmst einfach ein Border-Widget, legst das in der z-Achse höher als das HTML-Widget, ziehst das auf die nötige Größe und rundest die Ecken so ab, dass es einen Kreis ergibt

liv-in-sky

@cosmicchaos

oder ein svg shape - legst es übereinander und :

Image 2.png

deine texte musst du auch darüber legen

jetzt haben wir noch ein problem - ich kann kein binding im style tag nutzen - das muss ich anders lösen

[{"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 40%, lightblue 0 86%, grey 0);\n            height: 150px;\n    width: 150px;\n     border-radius:50%;\n  }\n  div.myCircle{\n      \n  }\n  \n</style>\n\n<div id=\"parent\">\n     <div class=\"my2test \"></div>\n      <div class=\"myCircle\"></div>\n    </div>\n\n   \n"},"style":{"left":"1011px","top":"239px","width":"150px","height":"150px"},"widgetSet":"basic"},{"tpl":"tplShapes","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","svgType":"circle","strokeColor":"#7e9295","fill":"#7e9295","strokeWidth":"5","scaleWidth":"1","scaleHeight":"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},"style":{"left":"1021px","top":"249px","width":"130px","height":"130px"},"widgetSet":"basic"}]

liv-in-sky

@cosmicchaos

am einfachsten wäre es, wir machen ein blockly und erschaffen dort das widget - anschliessend wird dieser code in einen datenpunkt geschrieben

in der vis nehmen wir dann ein binding dieses datenpunktes und das widget erscheint

ist das ok für dich ?

liv-in-sky

@cosmicchaos

hier das blockly - musst du anpassen - die werte müssen ja irgendwo existieren und falls da kommastellen kommen könnten müssen wir noch runden

<xml xmlns="https://developers.google.com/blockly/xml">
 <variables>
   <variable id=";aDy/}ywi%i!2!SB-b:l">color1</variable>
   <variable id="V]zTB|X(/g(hTIc_|Ik$">color2</variable>
   <variable id="R#EF5{X:I}`jWCJaJV](">color3</variable>
   <variable id="^DF]1Q5`sEB2(?1UXJGM">prozent2</variable>
   <variable id="@9Em_9A$~}VCwHc-^e}p">prozent3</variable>
   <variable id="dzRnI+LWFl;[_^LUBJ(D">breite</variable>
   <variable id="qr.D#D-;.J:}YEmaW^Hi">hoehe</variable>
 </variables>
 <block type="on" id="y9G!6eHLGMYAeyfV]NTz" x="-1313" y="113">
   <field name="OID">Object ID</field>
   <field name="CONDITION">ne</field>
   <field name="ACK_CONDITION"></field>
   <statement name="STATEMENT">
     <block type="variables_set" id="W8-SUTlwHpPfP:pK)#?N">
       <field name="VAR" id=";aDy/}ywi%i!2!SB-b:l">color1</field>
       <value name="VALUE">
         <block type="colour_picker" id="Y7O:8P6QL#wrUQe.w${c">
           <field name="COLOUR">#99ff99</field>
         </block>
       </value>
       <next>
         <block type="variables_set" id="Z+g4v:FhRN6|dPpedsS{">
           <field name="VAR" id="V]zTB|X(/g(hTIc_|Ik$">color2</field>
           <value name="VALUE">
             <block type="colour_picker" id="SX(5]x?N.nk@Eql=guv`">
               <field name="COLOUR">#33ffff</field>
             </block>
           </value>
           <next>
             <block type="variables_set" id="#eJ6#|3Fr,I`xg:XoLFq">
               <field name="VAR" id="R#EF5{X:I}`jWCJaJV](">color3</field>
               <value name="VALUE">
                 <block type="colour_picker" id="hn!6)+18L%pk9G`~(BFn">
                   <field name="COLOUR">#c0c0c0</field>
                 </block>
               </value>
               <next>
                 <block type="variables_set" id="rA8NONs4XHHIyoon(TO}">
                   <field name="VAR" id="^DF]1Q5`sEB2(?1UXJGM">prozent2</field>
                   <value name="VALUE">
                     <block type="text" id="@fksEDO4;eJ;*eT*M-b|">
                       <field name="TEXT">33</field>
                     </block>
                   </value>
                   <next>
                     <block type="variables_set" id="SF_ZfIqP]w@k`#tDEl9I">
                       <field name="VAR" id="@9Em_9A$~}VCwHc-^e}p">prozent3</field>
                       <value name="VALUE">
                         <block type="text" id="cjki+@LDuWuC;Y?WOIzj">
                           <field name="TEXT">90</field>
                         </block>
                       </value>
                       <next>
                         <block type="variables_set" id="S8c4E_dyWJXmB0F^XU~3">
                           <field name="VAR" id="dzRnI+LWFl;[_^LUBJ(D">breite</field>
                           <value name="VALUE">
                             <block type="text" id=".B$NLNXMtJKsG6SjV.Ez">
                               <field name="TEXT">150</field>
                             </block>
                           </value>
                           <next>
                             <block type="variables_set" id="u)RvjpPbU-(%tERR.Rof">
                               <field name="VAR" id="qr.D#D-;.J:}YEmaW^Hi">hoehe</field>
                               <value name="VALUE">
                                 <block type="text" id="oei3wb0b9_#EpqR0U5.+">
                                   <field name="TEXT">150</field>
                                 </block>
                               </value>
                               <next>
                                 <block type="control" id=")p}dgd=@DR|UfYckw~nJ">
                                   <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                                   <field name="OID">0_userdata.0.CONTROL-OWN.AAATEST.TestString3</field>
                                   <field name="WITH_DELAY">FALSE</field>
                                   <value name="VALUE">
                                     <block type="procedures_callcustomreturn" id="U9:,$76hUn~FV0wTwk*`">
                                       <mutation name="etwas tun"></mutation>
                                     </block>
                                   </value>
                                 </block>
                               </next>
                             </block>
                           </next>
                         </block>
                       </next>
                     </block>
                   </next>
                 </block>
               </next>
             </block>
           </next>
         </block>
       </next>
     </block>
   </statement>
 </block>
 <block type="procedures_defcustomreturn" id=")eVoKO|^2:#U1/S*iijM" x="-1112" y="562">
   <mutation statements="false"></mutation>
   <field name="NAME">etwas tun</field>
   <field name="SCRIPT">cmV0dXJuIGA8c3R5bGU+DQogICAgDQogIGRpdi5teTJ0ZXN0IHsgYmFja2dyb3VuZDogY29uaWMtZ3JhZGllbnQoJHtjb2xvcjF9ICR7cHJvemVudDJ9JSwgJHtjb2xvcjJ9IDAgJHtwcm96ZW50M30lLCAke2NvbG9yM30gMCk7DQogICAgICAgICAgICBoZWlnaHQ6ICR7aG9laGV9cHg7DQogICAgICAgICAgICB3aWR0aDogJHticmVpdGV9cHg7DQogICAgICAgICAgICBib3JkZXItcmFkaXVzOjUwJTsNCiAgfQ0KICBkaXYubXlDaXJjbGV7ICB9DQogIA0KPC9zdHlsZT4NCg0KDQogICAgIDxkaXYgY2xhc3M9Im15MnRlc3QgIj48L2Rpdj5gDQogICAgICA=</field>
   <comment pinned="false" h="80" w="160">Beschreibe diese Funktion …</comment>
 </block>
</xml>

Image 4.png

und das widget

[{"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":"{0_userdata.0.CONTROL-OWN.AAATEST.TestString3}}"},"style":{"left":"1007px","top":"235px","width":"150px","height":"150px","z-index":"1"},"widgetSet":"basic"},{"tpl":"tplShapes","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","svgType":"circle","strokeColor":"#7e9295","fill":"#7e9295","strokeWidth":"5","scaleWidth":"1","scaleHeight":"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},"style":{"left":"1017px","top":"245px","width":"130px","height":"130px","z-index":"3"},"widgetSet":"basic"}]

Cosmicchaos

@liv-in-sky Okay, ich werde das mal ausprobieren. Leider hab ich nicht wirklich verstanden was Du da gebaut hast, bin aber auch eher Anfänger in Scripten und individuellen Widgets...

liv-in-sky

@cosmicchaos

wo genau ist as problem - das widget muss ja nur kopiert werden - und ist dann leer - ds widget wird nur in der runtime angezeigt - also nicht im vis editor - sondern nur wenn du die seite richtig aufrufst

wo hast du probleme bei dem blockly - auch das importieren - also neues leeres blockly anlegen und importieren

wo hackt es den

Cosmicchaos

@liv-in-sky said in Kreisdiagramme für VIS: Im Moment beim Import des Blockly. In einem leeren Script kann ich den Code nicht einfügen, oder mach ich was falsch?

liv-in-sky

@cosmicchaos

so

AApossis (173).gif

Cosmicchaos

@liv-in-sky Okay, das hab ich. Danke schon mal. Man lernt nie aus
Jetzt müsste ich das Blockly entsprehend mit meinen Variablen anpassen, oder?

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

AApossis (174).gif

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

AApossis (175).gif

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?

NEWS

Kreisdiagramme für VIS

Support us

889
Online

32.0k
Users

80.6k
Topics

1.3m
Posts

NEWS

Kreisdiagramme für VIS

Support us

889Online

32.0kUsers

80.6kTopics

1.3mPosts

889
Online

32.0k
Users

80.6k
Topics

1.3m
Posts