Using Javascript Libray with Visualneoweb

#1 · April 28, 2025, 9:56 pm

Quote from jonatan on April 28, 2025, 9:56 pm
I am New and testing visualneoweb .

It must not be The visualneoweb staff task to support with each javascript libraries out there.
but i did not get anything in the forum examples how to work with javascript libraries.

I managed to return javascript variables from javascript libraries to to neoweb platform with syntax $App. myneoweb = javavarible;
and convinced that Applications can be built with Javascript Libraries and With Inbuilt Neoweb Actions.

I am trying learning to draw charts from a chartlibrary with the following instructions::
          Library Author  Instruction 1:
First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness.

<div>
  <canvas id="myChart"></canvas>
</div>
How do i transform
<div>
<canvas id="myChart"></canvas>
</div>
to Neowb Container or Rectangle ?
  Library Author  Instruction 2:
Now that we have a canvas, we can include Chart.js from a CDN.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
here i guess i may load the javascipt in project properties library
does import means to load files in the Library and css ?
   Library Author  Instruction 3:
Finally, we can create a chart. We add a script that acquires the myChart canvas element and instantiates new Chart with desired configuration: bar chart type, labels, 
data points, and options.

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

   and the chart Will be displayed on the canvas
Here i May Substitute The first line
const ctx = document.getElementById('myChart');
to
$App. myneoweb = document.getElementById('myChart');

and Putting The script beteen Beginjs endjs or a subroutine

Please , someone who can show me hints to Get started ,stuck from start applying javascript container to to vnweb?

or Is ther anyone who wants to share source code examples doing this task . Thank You !

I am New and testing visualneoweb .

It must not be The visualneoweb staff task to support with each javascript libraries out there.
but i did not get anything in the forum examples how to work with javascript libraries.

I managed to return javascript variables from javascript libraries to to neoweb platform with syntax $App. myneoweb = javavarible;
and convinced that Applications can be built with Javascript Libraries and With Inbuilt Neoweb Actions.

I am trying learning to draw charts from a chartlibrary with the following instructions::

          Library Author  Instruction 1:
First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness.

<div>
  <canvas id="myChart"></canvas>
</div>

How do i transform
<div>
<canvas id="myChart"></canvas>
</div>
to Neowb Container or Rectangle ?

  Library Author  Instruction 2:
Now that we have a canvas, we can include Chart.js from a CDN.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

here i guess i may load the javascipt in project properties library
does import means to load files in the Library and css ?

   Library Author  Instruction 3:
Finally, we can create a chart. We add a script that acquires the myChart canvas element and instantiates new Chart with desired configuration: bar chart type, labels, 
data points, and options.

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

   and the chart Will be displayed on the canvas

Here i May Substitute The first line
const ctx = document.getElementById('myChart');
to
$App. myneoweb = document.getElementById('myChart');

and Putting The script beteen Beginjs endjs or a subroutine

Please , someone who can show me hints to Get started ,stuck from start applying javascript container to to vnweb?

or Is ther anyone who wants to share source code examples doing this task . Thank You !

#2 · April 29, 2025, 10:31 am

Hi @jonatan and welcome to the forums.

First, note VisualNEO Web already includes a plugin that uses Chartjs.org (neoChart)

How do i transform
<div>
<canvas id="myChart"></canvas>
</div>
to Neowb Container or Rectangle ?

Create a Container, right click and select "Edit html Property...", then write:

<canvas id="myChart"></canvas>

here i guess i may load the javascipt in project properties library
does import means to load files in the Library and css ?

If you want to use a CDN instead of the actual .js file use:
Project > Properties > Advanced > Custom Metadata > Body and paste the code there:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Now, create a button and double click it. Then write:

BeginJS
const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
EndJS

Please check the attached sample app.

Uploaded files:

You need to login to have access to uploads.

javadrajabihakami has reacted to this post.

#3 · May 13, 2025, 11:33 am

Thank You So Much ! For your last Response . It pushed me forward some what .
Many Problems ,to Tackle with, However a Library issues must Not be Burden for Your staff.
and Refrain to Unnecessary Questions.

Meanwhile , while i was trying to print my charts ,faced obstacles .

I am trying to save vector images which are charts from a container object with Fabric Canvas.
I did not make it the pdf print work on Android Smartphones .
Then I tried to save it to json and reload it again to the container .

i tried the following code to save and in return got json code . I dont know if it is empty or Void .

fabInitialize "ContainerA"
fabSaveAsJSON "ContainerA" [myjson]

the returned json

{"version":"5.2.1","objects":[],"background":"rgba(255,255,255,0)","backgroundImage":null,"overlayImage":null}

Then tried to load it with the following And Resulted with Empty Container

fabUnselect "ContainerA"
fabLoadFromJSON "ContainerA" [myjson]

I am doing my marathon race , with my evaluation Period and want to know , If it is possible to save chart files
with android with the way i am trying or any other methods ?

2 , My Second Question . is regarding NeoeventCalendar .

I want to adapt this calendar to a project, if it is possible to add (display) letters or Numbers together with the the day date on the
fly. for example the day 15 on the calender would be 15(A) or 15(25) as illustrated on the image .
with Bracket or different color. this applies to all dates in the month .
and this will not be unchangeable by the user .

Thankful , even if any Experts in the forum share ideas regarding my Questions.

Thanks .

#4 · May 13, 2025, 11:43 am

@jonatan, regarding Fabric plugin please check this online sample:

https://visualneo.com/tutorials/fabric/

You can find the source code in your own computer under:
\Documents\VisualNeoWeb\Sample Apps\FabricCanvas

I don't understand very well your second question, sorry!

#5 · May 13, 2025, 11:51 am

2 , My Second Question . is regarding NeoeventCalendar .

I want to adapt this calendar to a project, if it is possible to add (display) letters or Numbers together with the the day date on the
fly. for example the day 15 on the calender would be 15(A) or 15(25) as illustrated on the image .
with Bracket or different color. this applies to all dates in the month .
and this will not be unchangeable by the user .

Uploaded files:

You need to login to have access to uploads.

#6 · May 13, 2025, 11:59 am

I Explored FabricCanvas . I can not save Chart vector images from Container .

Appreciated if you show example to svae chart image to json .

I n the example you refered one should load image to the container and save it to json or reload which works .

what I am trying to do is dispalying charts In the container and save it to json data and Reload it .

#7 · May 13, 2025, 12:32 pm

@jonatan Fabric can save and load Fabric graphics but not charts generated with a different plugin.
As far as I know neoEventCalendar can't do what you want. Sorry.

Using Javascript Libray with Visualneoweb - Forum

Using Javascript Libray with Visualneoweb