Trouble with NofileHTML extension

I try to use the NoFileHtml extension, which is one of my favorites, but i have a problem with the following code:

!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>SunburstChart</title>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
  <script>
  const data = [
{
id: '0',
name: 'Total' 
},
{
id: '1',
parent: '0',
name: 'America',
color: '#f15c80'
},
{
id: '2',
parent: '0',
name: 'Asia',
color: '#7cb5ec'
},
{
id: '3',
parent: '0',
name: 'Europe',
color: '#90ed7d'
},
{
parent: '1',
name: 'US',
value: 151,
color: '#ff8fb3'
},
{
parent: '1',
name: 'CA',
color: '#ff7ea2',
value: 8
},
{
parent: '1',
name: 'BR',
color: '#ff6d91',
value: 1
},
{
parent: '2',
name: 'RU',
color: '#afe8ff',
value: 49
},
{
parent: '2',
name: 'JP',
color: '#9ed7ff',
value: 9
},
{
parent: '2',
name: 'OTH',
color: '#8dc6fd',
value: 3
},
{
parent: '3',
name: 'IT',
color: '#c3ffb0',
value: 5
},
{
parent: '3',
name: 'FR',
color: '#b6ffa3',
value: 4
},
{
parent: '3',
name: 'UK',
color: '#a9ff96',
value: 3
},
{
parent: '3',
name: 'OTH',
color: '#9cf989',
value: 6
},
{parent: '4',
name: 'OTH',
color: '#ffd68f',
value: 2
}
];
Highcharts.chart('container', {
title: {
text: 'Visitors to the International Space Station by Country'
},
subtitle: {
text: 'Source: <a href=\'https://www.nasa.gov/feature/visitors-to-the-station-by-country/\'>NASA</a>'
},
accessibility: {
typeDescription:
'Πατήστε στο διάγραμμα για να δείτε πληροφορίες',
point: {
valueSuffix: ' visitors'
}
},
series: [
{
type: 'sunburst',
name: 'Συνολικά',
data: data,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}',
color: '#000000',
style: {
textOutline: false
}
},
levels: [
{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
}
}
},
{
level: 2,
colorByPoint: true
}
]
}
],
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b>: <b>{point.value}</b>'
}
});
  
  
  </script>

</body>
</html>

It is strange that this code is ok when I use the webviewer element with an associated html file. My problem is that I want the script data to change from the application and I only know how to do it using the extension that I mentioned about. But it doesnt work !

I see this when trying to load your html (from a file) into my computer browser (inspecting)

OK, got it working, needed the sunburst module adding:
<script src="https://code.highcharts.com/modules/sunburst.js"></script>

Your issue is here:
'Source: <a href=\'https://www.nasa.gov/feature/visitors-to-the-station-by-country/\'>NASA</a>'

Change the escape characters to double quotes and then it works

'Source: <a href="https://www.nasa.gov/feature/visitors-to-the-station-by-country">NASA</a>'

Thanks for your reply. It is obvious that the script was wrong but even after I fixed this mistake and changed the escape characters to double quotes, the chart cant be rendered, with the noFileHtml extension. The one thing that I cant understand, is that webviewer works all right with the same html code !!

Worked OK for me....
Here is my aia project:
sunburstNoFile.aia (7.9 KB)

Provide your aia project where it does not work?

1 Like

It also works with the File component.

yyryyyytyt

Yours is fine. I didnt find the problem but I copied your code and its OK. Thank you very much.

Thanx for your answer @Juan_Antonio, I wondered if I could save text sa an html file. This idea solves problems !!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.