Implementing javascript eCharts into niceGUI #3974
-
QuestionHi, I am trying to use the following example in a dashboard I am creating: https://echarts.apache.org/examples/en/editor.html?c=map-usa-projection I have saved the javascript in js/echarts_choropleth.js and am trying to call it to the site via the following Python code: from nicegui import ui, app
# NiceGUI app setup
@ui.page('/')
def main_page():
# first, tell server how to serve my js files
app.add_static_files('/js' , 'directory')
# in page method, add js file to <head> of created page
ui.add_head_html (f'<script type="text/javascript" src="/js/echarts_choropleth.js"> </script>')
ui.run()I found a similar issue here: #1588 however am unable to copy the methodology as the browser comes up with an uncaught syntax error: Uncaught SyntaxError: import declarations may only appear at top level of a module however I am only importing at the top of the javascript file! Apologies since I am fairly new to using niceGUI - I know this must be possible but it's a problem I've been struggling to solve for a while! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Hi @HarryRogers0, I'm struggling to run your example... Where did you find echarts_choropleth.js? By the way, |
Beta Was this translation helpful? Give feedback.
-
|
Hi, apologies - echarts_choropleth.js is effectively just the code provided by the example linked. Thanks for the heads up regarding calling add_static_files import * as echarts from 'echarts';
var ROOT_PATH = 'https://echarts.apache.org/examples';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
$.when(
$.get(ROOT_PATH + '/data/asset/geo/USA.json'),
$.getScript('https://fastly.jsdelivr.net/npm/d3-array'),
$.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
).done(function (res) {
const usaJson = res[0];
const projection = d3.geoAlbersUsa();
myChart.hideLoading();
echarts.registerMap('USA', usaJson);
option = {
title: {
text: 'USA Population Estimates (2012)',
subtext: 'Data from www.census.gov',
sublink: 'http://www.census.gov/popest/data/datasets.html',
left: 'right'
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
visualMap: {
left: 'right',
min: 500000,
max: 38000000,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
},
text: ['High', 'Low'],
calculable: true
},
toolbox: {
show: true,
//orient: 'vertical',
left: 'left',
top: 'top',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
name: 'USA PopEstimates',
type: 'map',
map: 'USA',
projection: {
project: function (point) {
return projection(point);
},
unproject: function (point) {
return projection.invert(point);
}
},
emphasis: {
label: {
show: true
}
},
data: [
{ name: 'Alabama', value: 4822023 },
{ name: 'Alaska', value: 731449 },
{ name: 'Arizona', value: 6553255 },
{ name: 'Arkansas', value: 2949131 },
{ name: 'California', value: 38041430 },
{ name: 'Colorado', value: 5187582 },
{ name: 'Connecticut', value: 3590347 },
{ name: 'Delaware', value: 917092 },
{ name: 'District of Columbia', value: 632323 },
{ name: 'Florida', value: 19317568 },
{ name: 'Georgia', value: 9919945 },
{ name: 'Hawaii', value: 1392313 },
{ name: 'Idaho', value: 1595728 },
{ name: 'Illinois', value: 12875255 },
{ name: 'Indiana', value: 6537334 },
{ name: 'Iowa', value: 3074186 },
{ name: 'Kansas', value: 2885905 },
{ name: 'Kentucky', value: 4380415 },
{ name: 'Louisiana', value: 4601893 },
{ name: 'Maine', value: 1329192 },
{ name: 'Maryland', value: 5884563 },
{ name: 'Massachusetts', value: 6646144 },
{ name: 'Michigan', value: 9883360 },
{ name: 'Minnesota', value: 5379139 },
{ name: 'Mississippi', value: 2984926 },
{ name: 'Missouri', value: 6021988 },
{ name: 'Montana', value: 1005141 },
{ name: 'Nebraska', value: 1855525 },
{ name: 'Nevada', value: 2758931 },
{ name: 'New Hampshire', value: 1320718 },
{ name: 'New Jersey', value: 8864590 },
{ name: 'New Mexico', value: 2085538 },
{ name: 'New York', value: 19570261 },
{ name: 'North Carolina', value: 9752073 },
{ name: 'North Dakota', value: 699628 },
{ name: 'Ohio', value: 11544225 },
{ name: 'Oklahoma', value: 3814820 },
{ name: 'Oregon', value: 3899353 },
{ name: 'Pennsylvania', value: 12763536 },
{ name: 'Rhode Island', value: 1050292 },
{ name: 'South Carolina', value: 4723723 },
{ name: 'South Dakota', value: 833354 },
{ name: 'Tennessee', value: 6456243 },
{ name: 'Texas', value: 26059203 },
{ name: 'Utah', value: 2855287 },
{ name: 'Vermont', value: 626011 },
{ name: 'Virginia', value: 8185867 },
{ name: 'Washington', value: 6897012 },
{ name: 'West Virginia', value: 1855413 },
{ name: 'Wisconsin', value: 5726398 },
{ name: 'Wyoming', value: 576412 },
{ name: 'Puerto Rico', value: 3667084 }
]
}
]
};
myChart.setOption(option);
});
option && myChart.setOption(option); |
Beta Was this translation helpful? Give feedback.
-
|
Ah ok, I see. But apart from the import statement, I tried to translate it, but there's still some JavaScript error "Cannot read properties of undefined (reading 'regions')": @ui.page('/')
def main():
ui.add_head_html('''
<script src="https://fastly.jsdelivr.net/npm/d3-array"></script>
<script src="https://fastly.jsdelivr.net/npm/d3-geo"></script>
''')
ui.echart({
'title': {
'text': 'USA Population Estimates (2012)',
'subtext': 'Data from www.census.gov',
'sublink': 'http://www.census.gov/popest/data/datasets.html',
'left': 'right',
},
'tooltip': {
'trigger': 'item',
'showDelay': 0,
'transitionDuration': 0.2,
},
'visualMap': {
'left': 'right',
'min': 500000,
'max': 38000000,
'inRange': {
'color': [
'#313695', '#4575b4', '#74add1', '#abd9e9',
'#e0f3f8', '#ffffbf', '#fee090', '#fdae61',
'#f46d43', '#d73027', '#a50026',
],
},
'text': ['High', 'Low'],
'calculable': True,
},
'toolbox': {
'show': True,
'left': 'left',
'top': 'top',
'feature': {
'dataView': {'readOnly': False},
'restore': {},
'saveAsImage': {},
},
},
'series': [{
'name': 'USA PopEstimates',
'type': 'map',
'map': 'USA',
'projection': {
':project': 'function(point) { return projection(point) }',
':unproject': 'function(point) { return projection.invert(point) }',
},
'emphasis': {
'label': {
'show': True
},
},
'data': [
{'name': 'Alabama', 'value': 4822023},
{'name': 'Alaska', 'value': 731449},
{'name': 'Arizona', 'value': 6553255},
{'name': 'Arkansas', 'value': 2949131},
{'name': 'California', 'value': 38041430},
{'name': 'Colorado', 'value': 5187582},
{'name': 'Connecticut', 'value': 3590347},
{'name': 'Delaware', 'value': 917092},
{'name': 'District of Columbia', 'value': 632323},
{'name': 'Florida', 'value': 19317568},
{'name': 'Georgia', 'value': 9919945},
{'name': 'Hawaii', 'value': 1392313},
{'name': 'Idaho', 'value': 1595728},
{'name': 'Illinois', 'value': 12875255},
{'name': 'Indiana', 'value': 6537334},
{'name': 'Iowa', 'value': 3074186},
{'name': 'Kansas', 'value': 2885905},
{'name': 'Kentucky', 'value': 4380415},
{'name': 'Louisiana', 'value': 4601893},
{'name': 'Maine', 'value': 1329192},
{'name': 'Maryland', 'value': 5884563},
{'name': 'Massachusetts', 'value': 6646144},
{'name': 'Michigan', 'value': 9883360},
{'name': 'Minnesota', 'value': 5379139},
{'name': 'Mississippi', 'value': 2984926},
{'name': 'Missouri', 'value': 6021988},
{'name': 'Montana', 'value': 1005141},
{'name': 'Nebraska', 'value': 1855525},
{'name': 'Nevada', 'value': 2758931},
{'name': 'New Hampshire', 'value': 1320718},
{'name': 'New Jersey', 'value': 8864590},
{'name': 'New Mexico', 'value': 2085538},
{'name': 'New York', 'value': 19570261},
{'name': 'North Carolina', 'value': 9752073},
{'name': 'North Dakota', 'value': 699628},
{'name': 'Ohio', 'value': 11544225},
{'name': 'Oklahoma', 'value': 3814820},
{'name': 'Oregon', 'value': 3899353},
{'name': 'Pennsylvania', 'value': 12763536},
{'name': 'Rhode Island', 'value': 1050292},
{'name': 'South Carolina', 'value': 4723723},
{'name': 'South Dakota', 'value': 833354},
{'name': 'Tennessee', 'value': 6456243},
{'name': 'Texas', 'value': 26059203},
{'name': 'Utah', 'value': 2855287},
{'name': 'Vermont', 'value': 626011},
{'name': 'Virginia', 'value': 8185867},
{'name': 'Washington', 'value': 6897012},
{'name': 'West Virginia', 'value': 1855413},
{'name': 'Wisconsin', 'value': 5726398},
{'name': 'Wyoming', 'value': 576412},
{'name': 'Puerto Rico', 'value': 3667084},
],
}],
})
usa_json = requests.get('https://echarts.apache.org/examples/data/asset/geo/USA.json', timeout=5).json()
ui.run_javascript(f'''
const projection = d3.geoAlbersUsa();
echarts.registerMap('USA', {json.dumps(usa_json)});
''') |
Beta Was this translation helpful? Give feedback.
-
|
Solution was reached by first loading the json file in via # load static files
json_path= 'MAP.json'
app.add_static_files('/geojson', os.path.dirname(json_path))then running the following javascript to ensure the json file was loaded before registering the map (this stops JavaScript error "Cannot read properties of undefined (reading 'regions')"). ui.add_body_html('''
<script>
window.addEventListener('DOMContentLoaded', () => {
// Fetch the local JSON file served by NiceGUI
fetch('/MAP.json')
.then((response) => response.json())
.then((mapData) => {
// Register the map with Echarts
echarts.registerMap('MAP_NAME', mapData);
emitEvent('map_loaded');
})
.catch((error) => console.error('Error loading JSON file:', error));
});
</script>
''')Then finally calling This is then called once the script is completed by niceGUI using: echart = ui.echart({'series': []})
ui.on('map_loaded', lambda: (
#echart.options.update(geo={'map': 'MAP_NAME', 'roam': True}),
echart.options.update(options),
echart.update()
))where the variable |
Beta Was this translation helpful? Give feedback.
Solution was reached by first loading the json file in via
then running the following javascript to ensure the json file was loaded before registering the map (this stops JavaScript error "Cannot read properties of undefined (reading 'regions')").