Incorporating external jquery library I am trying to use with Javascript in Drupal 8. I took an example from official drupal website, which I got it from https://www.drupal.org/project/examples and modified the code of js_example to incorporate sDashboard library.

The js_example.libraries.yml includes:

# A simple script using jquery ui accordion.
js_example.accordion:
  js:
    js/js_example_accordion.js: {}
  # Build up our dependencies for this page as a library. Our accordion script
  # needs jquery.ui.accordion. You can find the core scripts under core/assets/.
  dependencies:
    - core/jquery.ui.accordion
    - core/jquery

js_example.sdashboard:
  js:
    js/jquery-sDashboard.js : {}
  css:
    component:
      css/sDashboard.css: {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.datatables


The example module includes a Controller which I modified as:

public function getJsAccordionImplementation() {
    $title = t('Click sections to expand or collapse:');
    // Build using our theme. This gives us content, which is not a good
    // practice, but which allows us to demonstrate adding JavaScript here.
    $build['myelement'] = array(
      '#theme' =&gt; 'js_example_accordion',
      '#title' =&gt; $title,
    );
    // Add our script. It is tiny, but this demonstrates how to add it. We pass
    // our module name followed by the internal library name declared in
    // libraries yml file.
    $build['myelement']['#attached']['library'][] = 'js_example/js_example.accordion';
    $build['myelement']['#attached']['library'][] = 'js_example/js_example.sdashboard';
    // Return the renderable array.
    return $build;
  }


and there is an accordion.html.twig where I added the code for displaying the sdashboard widget. It is given as:

&lt;div class="demo"&gt;
&lt;h2&gt;{{  title }}&lt;/h2&gt;
&lt;div id="accordion"&gt;
  .... accordion here ...
&lt;/div&gt;
&lt;ul id="myDashboard"&gt;&lt;/ul&gt;
&lt;script type="text/javascript" &gt;
  var tdata = [],i;

  for(i=0;i&lt;4*Math.PI;i++){
  tdata.push([i,Math.sin(i)]);
  }

  var widgetDefinitions = [
  {   widgetTitle:"Plot Example",
      widgetId : "first" ,
      widgetType : "chart" , 
      widgetContent : {
      data : [tdata],
      options : {points:{show:true}}
      }

  }
  ]
  $("#myDashboard").sDashboard({
  dashboardData : widgetDefinitions
  });
&lt;/script&gt;

&lt;/div&gt;


Now when I am trying to run the example, I get the error:

ReferenceError: $ is not defined 
$("#myDashboard").sDashboard({
accordion (line 299, col 3)
ReferenceError: Flotr is not defined
factory($, Flotr);


Isn't this the usual way of using any external library in drupal. How do I use other libraries that I may need like sDashboard, etc?
If you are trying to add a js library from an external cdn in drupal 8 then, in your theme/module mycustom.libraries.yml file add do like this:

NOTE: Make sure you indent each spaces with two spacebar press button and not a tab press.

NOTE: version is optional here. You may not need add in.

mycustom.flexslider:
  version: 2.6.3
  css:
    theme:
      //cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css: {type: external}
  js:
    //cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css: {type: external}
  dependencies:
    - core/jquery


If you are hosting it within your module or theme then:

NOTE: Here I placed flexslider within my theme or module vendor directory. So it would be inside mycustom/vendor/flexslider

mycustom.flexslider:
  version: 2.6.3
  css:
    theme:
      vendor/flexslider/flexslider.css: {}
  js:
    vendor/flexslider/jquery.flexslider-min.js: {}
  dependencies:
    - core/jquery


If you are just trying to host your custom js or css file then:

mycustom.myscript:
  js:
    js/script.js: {}


If its dependent on other library like core jquery or custom library then:

mycustom.myscript:
  js:
    js/script.js: {}
  dependencies:
   - core/jquery
   - mycustom.myscript2


Then like in example module If I had to add flexslider library:

public function getFlexSliderImplementation() {

    $build['myelement'] = array(
      '#theme' =&gt; 'js_flexslider',
    );
    // Add our script. It is tiny, but this demonstrates how to add it. We pass
    // our module name followed by the internal library name declared in
    // libraries yml file.
    $build['myelement']['#attached']['library'][] = 'mycustom/mycustom.flexslider';
    // Return the renderable array.
    return $build;
  }


Update:
Download and extract Flotr2 to your module or theme vendor directory. Modify libraries.yml file to include flotr2

js_example.flotr2:
 js:
   vendor/flotr2/flotr2.min.js : {}

js_example.sdashboard:
  css:
    component:
      vendor/sDashboard/sDashboard.css: {}
  js:
    vendor/sDashboard/jquery-sDashboard.js : {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.datatables
    - js_example/js_example.flotr2