Earned value curve on eCharts

These graphics should be Ninox's native ones

UweG

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

https://youtu.be/AMBgf2i2PQI

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:

Hab mal Uwe seine DB mit meinem anliegen erweitert. Wäre toll, wenn einer Rat weis.