Embedded eCharts into Ninox

M. Daaboul 

Hi I would like some help, I have this curve in Ninox, horrible, the yellow curve represents the financial curve of the project (Total Earned Plan) the blue curve represents the (Total Earned Value) at the Cut-Off Date in this example 12/Apr/2024 and the Green curve represents the accumulated cost also as of the Cutoff Date.  These last two curves should not be seen beyond April 12, 2024. Is there any option to have an example like the previous one for 3 curves?  I would appreciate your help.

Rafael Hey Raphael, the example in this thread is an eCharts example. You could achieve this i guess. Look at https://echarts.apache.org/examples/en/index.html , you got an emulator on the left which allows you to test your data. From what you're saying, i'd go for this example https://echarts.apache.org/examples/en/editor.html?c=area-stack and get it integrated into your code using the above code. Wish echarts becomes more native in ninox as it's the same library used by the dynamic rendering engine.

M. Daaboul Thanks I will try 

M. Daaboul 

Hi again. 

1. Legend don't display three data: data: ["Planned Value", "Earned Value", "Cumulative Cost"]

2. The values green and yellow do not correspond to the values entered.

some idea

function loadeCharts() do
    "<script src='https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'></script>"
end;
function renderEChart(chartId : text,options : text) do
    loadeCharts() + "<div id='" + chartId +
    "' class='echart-graph' style='width: 100%;height:100%;'></div>
    <script type='text/javascript'>
      setTimeout(function(){
        echarts.registerTheme('customed', {});
        var myChart = echarts.init(document.getElementById('" +
    chartId +
    "'),'customed');
        myChart.setOption(" +
    options +
    ");
      },100);
    </script>"
end;
let chartOptions := {
        title: {
            text: "Financial Progress Curve Data|Date 30/April/2024"
        },
        tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["Planned Value", "Earned Value", "Cumulative Cost"]
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"]
        },
        yAxis: {
            type: "value"
        },
        series: [{
                name: "Total Planed Value",
                type: "line",
                stack: "Total",
                data: [0, 120000, 212000, 390000, 520000, 680000, 860000, 921000, 950000]
            }, {
                name: "Total Earned Value",
                type: "line",
                stack: "Total",
                data: [0, 90000, 115670]
            }, {
                name: "Cumulative Cost",
                type: "line",
                stack: "Total",
                data: [0, 110000, 123200]
            }]
    };
html(renderEChart("_cid_" + random(), text(chartOptions)))

Rafael Hi Rafael, the names you're using in the legend should be exactly the same ones in the series name field. so

legend: {
            data: ["Total Planed Value", "Total Earned Value", "Cumulative Cost"]
        },

M. Daaboul Thanks again Daaboul, now works great. Appreciate your post

Nick another hint > try to load the echarts library only once in the view in a separate fx. also try to find a way to put all the charts in one big fx that will handle responsiveness. something like purejs worked for us. enjoy.

Sotirios Zormpas 

Hi Sotirios some time the first graph don't display when open the table need  click on the key and display the graph, then always display the graph although change the tables

Rafael probably you're loading the library twice, and one of the two calls got blocked by CDN during loading. try to load the library in a separate fx, once. we haven't faced this particular issue in a much dense 20 charts dashboard.