'Injecting' third party library doesn't work

Using Javascript from SpiderBasic
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

'Injecting' third party library doesn't work

Post by Peter »

Hello,

can somone explain, why the following code doesn't work?

Code: Select all

Procedure LoadScript(Script.s, *OnLoadFunction)
  ! $.getScript(v_script, p_onloadfunction);
EndProcedure 

Procedure ScriptLoaded(script.s, status.s, jqxhr)
  Debug status // 'success'
  ! var myChart = new Chart(); // Error: Uncaught ReferenceError: Chart is not defined
EndProcedure

LoadScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js", @ScriptLoaded())
I guess this is a require.js - thing, isn't it?

Thanks in advance & Greetings ... Peter

// Edit: I have found it by myself:

Code: Select all

! $("body").append($("<canvas id='myChart' />"));

Procedure DrawChart()
  
  ! var myData = {
  !   labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  !   datasets: [{
  !     label: '# of Votes',
  !     data: [12, 19, 3, 5, 2, 3],
  !     backgroundColor: [
  !       'rgba(255,  99, 132, 0.5)',
  !       'rgba( 54, 162, 235, 0.5)',
  !       'rgba(255, 206,  86, 0.5)',
  !       'rgba( 75, 192, 192, 0.5)',
  !       'rgba(153, 102, 255, 0.5)',
  !       'rgba(255, 159,  64, 0.5)'
  !     ],
  !     borderColor: [
  !       'rgba(255,99,132,1)',
  !       'rgba(54, 162, 235, 1)',
  !       'rgba(255, 206, 86, 1)',
  !       'rgba(75, 192, 192, 1)',
  !       'rgba(153, 102, 255, 1)',
  !       'rgba(255, 159, 64, 1)'
  !     ],
  !     borderWidth: 1
  !   }]
  ! };
  
  ! var myOptions = {
  !   scales: {
  !     yAxes: [{
  !       ticks: {
  !         beginAtZero:true
  !       }
  !     }]
  !   }
  ! };
  
  ! var ctx = document.getElementById("myChart");
  ! var myChart = new Chart(ctx, {
  !   type: 'bar',
  !   data: myData,
  !   options: myOptions
  ! });
  
EndProcedure

! require(["https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"], 
!   function() {
!     f_drawchart();
!   }
! );

If 1=2
  DrawChart()
EndIf