12

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

null
    • Rafael_Sanchis
    • vor 6 Monaten
    • Gemeldet - anzeigen

    Earned value curve on eCharts

    • Rafael_Sanchis
    • vor 6 Monaten
    • Gemeldet - anzeigen

    These graphics should be Ninox's native ones

    • Rafael_Sanchis
    • vor 5 Monaten
    • 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.

    • Rafael_Sanchis
    • vor 5 Monaten
    • 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 5 Monaten
    • Gemeldet - anzeigen
    • Rafael_Sanchis
    • vor 5 Monaten
    • 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.

      • Gotje_Ing
      • vor 5 Monaten
      • 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 5 Monaten
      • 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 5 Monaten
      • 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 5 Monaten
      • 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 5 Monaten
      • 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 5 Monaten
      • 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 5 Monaten
      • 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. 

      • Gotje_Ing
      • vor 5 Monaten
      • 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 5 Monaten
      • Gemeldet - anzeigen

       

      ohhh 😮😖 Sorry you are right.  Thanks a lot. Appreciate your time. 

    • Michi.1
    • vor 5 Monaten
    • 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}]

    • Hille
    • vor 3 Monaten
    • Gemeldet - anzeigen

    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:

    • Pro BoutiquenFonds GmbH
    • Eichelfr
    • vor 3 Monaten
    • Gemeldet - anzeigen

    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

      • Hille
      • vor 3 Monaten
      • Gemeldet - anzeigen

       Mache ich gerne. Wenn man sich die Formeln für die Diagramme ansieht, dann sieht man auch die Lernkurve, die ich von den ersten Versuchen genommen habe.

    • Michi.1
    • vor 2 Monaten
    • Gemeldet - anzeigen

    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 +
    "
        },
    #
    #
    #
    

      • Michi.1
      • vor 2 Monaten
      • Gemeldet - anzeigen

      fehlt nur noch die selbe Schriftgröße????

      label:  {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
      formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      },
      
        legend: {
          data: ['2022', '2023', '2024',  ]
        },
      
        series: [
          {
            name: '2022',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' Küchen';
              }
            },
         label: {
              show: true,
              position: 'insideBottom'
      },
            emphasis: {
              focus: 'series'
            },
            data: " +
      item(vArray1, 1).value +
      "
      

      • Rafael_Sanchis
      • vor 2 Monaten
      • Gemeldet - anzeigen
      • Michi.1
      • vor 2 Monaten
      • Gemeldet - anzeigen

      ich kann hier nur die Größe von den Werten, nicht von dem Namen bestimmen.

      formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      

      sieht dann so aus:  (value |name) 

      value = fontSize | name = bleibt unberührt von fontSize ????

    • Michi.1
    • vor 2 Monaten
    • Gemeldet - anzeigen

    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