eCharts in Ninox nutzen
Der in Ninox integrierte dynamische Druckeditor lässt es zu, dass auch eCharts https://echarts.apache.org/en/index.html in der Druckausgabe integriert werden können.
Da es es sich dabei um einen per Apache Lizenz frei verfügbaren Quellcode handelt, hat ein findiger Ninox Partner 'Götje Ingenieure Partnerschaft' einen Weg gefunden diese eCharts auch für die Darstellung innerhalb von Ninox zu nutzen und damit die Ninox eigenen Charts zu erweitern.
Ich habe deshalb mal eine kleine Beispiel DB erstellt, welche zum einen aufzeigt wie Ninox Daten für die Darstellung aufbereitet werden, als auch eine beispielhafte Übersicht, welche Möglichkeiten der Darstellung sich bieten.
24 Antworten
-
Earned value curve on eCharts
-
These graphics should be Ninox's native ones
-
Hi Uwe
There are any way on this version to place the name Chart and the Legend. ?
I modify your database. Delete some tables the only I cant't delete is the page.
Thankd.
-
I have managed to improve some aspects of the code but I have not yet been able to include the title of the legend
-
Hi.
please need some info here, apreciate
In the dabase example the echarts work great, but when I try to implement it on my main database don't work.
I copy the Page1 table to my database I don't now if the way is correct.
-
Hätte auch mal eine Frage
Wie kann man das denn besser machen? Jahre sollten ja schon dynamisch sein, doch wie bekomme ich die Objekte aus dem JSON, auch die Mengen der Jahre/Monate sind bestimmt schön blöd aus dem JSON geholt.
let myY := year(Anfang_Auswertungszeitraum); let myYM := yearmonth(Anfang_Auswertungszeitraum); let datorder := ((select Abrechnungen where 'anfahrt Nr' = 1 and yearmonth('Abrechnung vom') >= myYM) order by 'Abrechnung vom'); let vArray1 := []; let vArrayObj1 := []; let vObj1 := {}; for ZY in range(myY, year(today()) + 1) do for ZM in range(1, 13) do let anz := cnt(datorder[year('Abrechnung vom') = ZY and month('Abrechnung vom') = ZM]); vObj1 := { Jahr: ZY, Monat: monthName(ZM), value: anz }; vArrayObj1 := [vObj1]; vArray1 := array(vArray1, vArrayObj1) end end; let jsonauswertung := parseJSON(formatJSON(vArray1)); let zahlen22 := for i in jsonauswertung do if i.Jahr = "2022" then i.value end end; let zahlen23 := for i in jsonauswertung do if i.Jahr = "2023" then i.value end end; let zahlen24 := for i in jsonauswertung do if i.Jahr = "2024" then i.value end end; let jahr22 := formatJSON(zahlen22); let jahr23 := formatJSON(zahlen23); let jahr24 := formatJSON(zahlen24); html(eChartQuell() + " <div id='Graph1' style='width:100%; height:100%;'></div> <script type='text/javascript'> var chartDom = document.getElementById('Graph1'); var myChart = echarts.init(chartDom); var option; option = { title: { text: ' Test Auswertung', subtext: ' beschreibung', left: 'left' }, legend: { data: ['2022', '2023', '2024'] }, tooltip: { trigger: 'axis', show: true }, toolbox: { orient: 'vertical', left: 'right', top: 'center', feature: { title: 'Data View', mark: { show: true }, saveAsImage: {show: true}, dataView : {show: true, readOnly: false}, restore: {}, magicType: { type: ['line', 'bar'] } } }, xAxis: { type: 'category', data: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'] }, yAxis: { type: 'value', }, series: [ { name: '2022', type: 'line', data: " + jahr22 + ", },{ name: '2023', type: 'line', data: " + jahr23 + ", },{ name: '2024', type: 'line', data: " + jahr24 + ", } ] }; option && myChart.setOption(option); myChart.setOption(option); </script> </body>")
Das dazugehörige JSON:
[{"Jahr":2022,"Monat":"Januar","value":33},{"Jahr":2022,"Monat":"Februar","value":38},{"Jahr":2022,"Monat":"März","value":45},{"Jahr":2022,"Monat":"April","value":44},{"Jahr":2022,"Monat":"Mai","value":46},{"Jahr":2022,"Monat":"Juni","value":36},{"Jahr":2022,"Monat":"Juli","value":45},{"Jahr":2022,"Monat":"August","value":32},{"Jahr":2022,"Monat":"September","value":66},{"Jahr":2022,"Monat":"Oktober","value":53},{"Jahr":2022,"Monat":"November","value":47},{"Jahr":2022,"Monat":"Dezember","value":40},{"Jahr":2023,"Monat":"Januar","value":34},{"Jahr":2023,"Monat":"Februar","value":35},{"Jahr":2023,"Monat":"März","value":63},{"Jahr":2023,"Monat":"April","value":39},{"Jahr":2023,"Monat":"Mai","value":48},{"Jahr":2023,"Monat":"Juni","value":38},{"Jahr":2023,"Monat":"Juli","value":46},{"Jahr":2023,"Monat":"August","value":26},{"Jahr":2023,"Monat":"September","value":59},{"Jahr":2023,"Monat":"Oktober","value":37},{"Jahr":2023,"Monat":"November","value":25},{"Jahr":2023,"Monat":"Dezember","value":31},{"Jahr":2024,"Monat":"Januar","value":20},{"Jahr":2024,"Monat":"Februar","value":36},{"Jahr":2024,"Monat":"März","value":26},{"Jahr":2024,"Monat":"April","value":46},{"Jahr":2024,"Monat":"Mai","value":30},{"Jahr":2024,"Monat":"Juni","value":15},{"Jahr":2024,"Monat":"Juli","value":0},{"Jahr":2024,"Monat":"August","value":0},{"Jahr":2024,"Monat":"September","value":0},{"Jahr":2024,"Monat":"Oktober","value":0},{"Jahr":2024,"Monat":"November","value":0},{"Jahr":2024,"Monat":"Dezember","value":0}]
-
Danke für diesen Beitrag zu eCharts!
Seither konnte ich in kürzester Zeit ein aussagekräftiges Dashboard für meinen Diätplan entwickeln, mit Diagrammen, die die Möglichkeiten der in Ninox eingebauten Diagramme bei weitem übersteigen:
-
Das sieht sehr eindrucksvoll aus und behebt die aktuell eingeschränkten Möglichkeiten des Grafikmoduls. Könnten Sie auch eine Musterdatenbank einstellen, dass würde den Forumnutzern sicher helfen (ich schließe mich hier natürlich ein :-))? Frank
-
Kann mir einer helfen? Ich bekomme den Namen von legend nicht in der Bar angezeigt, nur die Werte.
Möchte aber gern Wert und Name angezeigt bekommen.
# # # label: { rotate: 90, align: 'left', verticalAlign: 'middle', position: 'insideBottom', distance: 15, }, # # # legend: { data: ['2022', '2023', '2024', ] }, # # # series: [ { name: '2022', type: 'bar', tooltip: { valueFormatter: function (value) { return value + ' Küchen'; } }, label: { show: true, position: 'inside' }, emphasis: { focus: 'series' }, data: " + item(vArray1, 1).value + " }, # # #
-
Hab mal Uwe seine DB mit meinem anliegen erweitert. Wäre toll, wenn einer Rat weis.
Content aside
-
12
„Gefällt mir“ Klicks
- vor 2 MonatenZuletzt aktiv
- 24Antworten
- 433Ansichten
-
9
Folge bereits