JSFiddle

  • Highcharts Doughnut

    author(s): Torstein Hønsi

    
    var colors = Highcharts.getOptions().colors,
        categories = ['Low', 'Medium', 'High', 'Critical'],
        data = [{
            y: 56.33,
            drilldown: {
                name: 'Threat Level Low',
                categories ...
  • Highcharts Demo

    author(s): Torstein Hønsi

    Highcharts.chart('container', {
        chart: {
            type: 'line',
            width: 500,
            height: 300
        },
        title: {
            text: 'Width is set to 300px'
        },
    
        xAxis: {
            categories: ['Jan ...
  • Highcharts Bar graph example

    jQuery 3.1.1, HTML, CSS, JavaScript

    $(function() {
      Highcharts.chart('container', {
        chart: {
          type: 'column'
        },
        title: {
          text: null
        },
        credits: {
                    enabled: false
                },
        xAxis: {
          categories: [
            'Oct',
            'Nov',
            'Dec',
            'Jan',
            'Feb ...
  • Multi Bar Chart

    jQuery 3.1.1, HTML, CSS, JavaScript

    $(function() {
      Highcharts.chart('container', {
        chart: {
          type: 'column',
          height: 250
        },
        title: null,
        xAxis: {
          categories: [
            'Oct',
            'Nov',
            'Dec',
            'Jan',
            'Feb',
            'Mar',
            'Apr ...
  • Classification Level Pie Chart

    jQuery 3.1.1, HTML, CSS, JavaScript

    $(function () {
    
        $(document).ready(function () {
    
            // Build the chart
            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title ...
  • UIKIT Responsive menu

    jQuery 2.1.3, HTML, CSS, JavaScript

    <div class="uk-accordion" data-uk-accordion="{showfirst: false}">
    
        <nav class="uk-navbar">
            <a href="#" class="uk-navbar-toggle uk-accordion-title"></a>
        </nav>
        
        <div class="uk-navbar uk-accordion-content">
            <ul class="uk-nav">
                <li><a href="#">Item</a></li>
                <li><a href="#">Another item</a></li>
            </ul>
        </div>
        
    </div>
    <div>content</div>
  • Sliding Open/Close/Show/Hide Left Sidebar

    Open/Close/Show/Hide Left Sidebar, can be used for nav menu, filters, content

    // Menu Toggle Script //
    
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
      $(this).toggleClass("active");
      if ($(this).text() == "Close Left ...
  • Multiple Right-Side Slide Out Panels

    No-Library (pure JS), HTML, CSS, JavaScript

    // Side Menu Slide Outs
    
    $('#settings').on('click', function() {
      $('#slider-settings').toggleClass('slide-open1 slide-shut1');
      $(this).parent().toggleClass('active');
      if ($('#slider-legend').hasClass('slide-open2 ...
  • Sliding Right-Side Panel

    jQuery 1.9.1, HTML, CSS, JavaScript

    /**** Put in js file called menu.js ***/
    (function(window) {
    
      'use strict';
    
      /**
       * Extend Object helper function.
       */
      function extend(a, b) {
        for ...
  • Bottom Sliding Panels - Tabbed

    jQuery 1.8.3, HTML, CSS, JavaScript

        //Other Pane toggles
        $("a.button").click(function(e) {
          idClick = $(this).attr("id");
          var newSelector = $("#pane" + idClick);
          varthis = $(this);
    
          if ($(this ...