Embedded eCharts into Ninox
I have tried to embed eCharts into Ninox but have yet to succeed.
For example, I put the following code inside a function field, but nothing:
var _style := "* {
margin: 0;
padding: 0;
}
#chart-container {
position: relative;
height: 100vh;
overflow: hidden;
}";
var _code := http("GET", "https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js");
var _localScript := "var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {}; var option; option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}; if (option && typeof option === 'object') {
myChart.setOption(option);
} window.addEventListener('resize', myChart.resize);";
var _html := ---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Line Chart - Apache ECharts Demo</title>
<style>{ _style }</style>
</head>
<body>
<div id="chart-container"></div>
<script>{ _code } { _localScript }</script>
</body>
</html>
Is this due to the restrictions that Ninox places on Javascript?
in a previous post, you mention eCharts. How do you manage to make it work?
15 replies
-
Hey Sotirios,
Here is a working example that you can adapt to your app.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 := { grid: { top: "10%", bottom: "10%" }, xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: { type: "value" }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: "line" }] }; html(renderEChart("_cid_" + random(), text(chartOptions)))
Hints :
- Make sure you wait a few milliseconds before starting the render process (until ninox finishes rendering the views). by trial and error, 100 ms seems tenough.
- Set a unique id for each graph on your dashboard ( we got plenty of these graphs in each view)
- Ideally, load the echarts library from your own database through a shared link. your browser will cache the library upon refresh and for security reasons it's always better.
- Isolate the options object outside the rendering function so that you can use it later on with the dynamic print engine. It's the same format.Enjoy !
-
thank you, your code example works nice and your hints are very helpful!
-
Hello everyone,
with your help I have made a small template with two graphs taking data from a table.
One pie type chart and one bar chart.I hope it will be useful
Nikos
-
https://youtu.be/s-QrmkhfLpM?feature=shared
Some example
Content aside
- Status Answered
-
1
Likes
- 2 mths agoLast active
- 15Replies
- 241Views
-
5
Following