eCharts in Ninox nutzen

UweG
aktualisiert vor 1 Monat
16Antworten

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.

- Rafael_Sanchis
- vor 2 Monaten
- Gemeldet - anzeigen
Earned value curve on eCharts
- Rafael_Sanchis
- vor 2 Monaten
- Gemeldet - anzeigen
These graphics should be Ninox's native ones
- Rafael_Sanchis
- vor 1 Monat
- Gemeldet - anzeigen
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.

eCharts EVM1.ninox
- Rafael_Sanchis
- vor 1 Monat
- Gemeldet - anzeigen
I have managed to improve some aspects of the code but I have not yet been able to include the title of the legend
- Rafael_Sanchis
- vor 1 Monat
- Gemeldet - anzeigen
https://youtu.be/AMBgf2i2PQI
- Rafael_Sanchis
- vor 1 Monat
- Gemeldet - anzeigen
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.

eCharts 1.ninox
- Gotje_Ing
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  Hey,
  I can't reproduce your issue when I load your eCharts1.ninox database. The chart renders fine. Can you elaborate, where you encounter problems?
  Thanks!
- Gotje_Ing
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  In general, to use the charts, there is a global function that needs to be referencing the echarts.js file that is in the Page 1. The file can be moved to any Picture/File-field but the code needs to be adjusted if the file is moved.
  The code is in the global function in the example, but here it is for reference again:
  
  function eChartQuell() do let vLink := fileUrl(record(Page1,1), "echart.js"); let response := do as server http("GET", vLink) end; --- <script>{ text(response.result) }</script> --- end
  
  Hope that helps with the first steps
- Rafael_Sanchis
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  gracias por tu respuesta te agradezco.
  
  El problema que tengo es que cuando intento incluir este eChart1 en mi base de datos principal, no puedo ver el gráfico.
  
  Aquí perfecto.
  
  en la otra imagen se puede ver la imagen.
  
  I have script in the global function on my main database
- Gotje_Ing
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  I assume you have the echarts.js in a different Table or Page, correct? If yes, you need to alter the global script at this position to reference the file correctly. Can you confirm that you did this?
  
  fileUrl(record(Page1,1), "echart.js");
- Rafael_Sanchis
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  Yes I have the echart.js on other table page1.
  
  And the script is the same.
  
  I'm going to check carefullyband if I can't solve it, could I send you my msin DB?
  
  Thanks
- Gotje_Ing
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  Yes, please send it as private message if you dont want it on the forum due to data protection concerns.
- Rafael_Sanchis
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  Ok, thanks a lot.
  
  I send the DB.
  
  1 - The graph is in the eCharts table in the tab (Tab Work). Is not the first tab is the last tab.
  
  2 - The table Page1 I have the file echart.js
  
  3 - I take the data from Reports EVM kpis table Progress-Cost Report tab KPI's info
  
  4 - On Global function I place
  
  function eChartQuell() do let vLink := fileUrl(record(Page1,1), "echart.js"); let response := do as server http("GET", vLink) end; --- <script>{ text(response.result) }</script> --- end;
  
  (On the echart table on the first tab I use the echarts but place the data manually crazy ) no is the idea.
  
  Oil Well Cluster (Restore).ninox
- Gotje_Ing
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  The error lies in the way you prepare the data. You have formatted numbers. This is not allowed in eCharts:
  series: [
  {
  name: 'Planned Value',
  type: 'line',
  data: [0,00 €,
  
  The € sign breaks the graph. Also the "," breaks the graph too, as "," is also the symbol for splitting the array into separate items. You need to remove this and apply custom formatting with echarts directly (advanced scripting).
  Clean the data during the creation of the array and try again.
  This is true for all series you try to display.
- Rafael_Sanchis
  
  vor 1 Monat
  
  Gemeldet - anzeigen
  ohhh Sorry you are right. Thanks a lot. Appreciate your time.

Michi.1
vor 1 Monat
Gemeldet - anzeigen

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}]

Willkommen in der Ninox-Community

eCharts in Ninox nutzen

16 Antworten

Content aside

Kategorien

Übersicht