Material Admin Extended Dark

## jQuery Sparkline

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

Official website and detailed documentation at: http://omnipotent.net/jquery.sparkline/

Live preview: `/other-charts.html`

In order to use this component, make sure to include it's javascript asset file.

    <script src="vendors/jquery.sparkline/jquery.sparkline.min.js"></script>

#### Sparkline Bar Chart

    <div class="chart-sparkline-bar">6,9,5,6,3,7,5,4,6,5,6,4,2,5,8,2,6,9,5,7,2,5,2,8,6,7,6,5,3,1,9,3,5,8,2,4</div>

    $('.chart-sparkline-bar').sparkline('html', {
        type: 'bar',
        height: 40,
        barWidth: 3,
        barColor: '#b4bfc3',
        barSpacing: 2
    })

#### Sparkline Line Chart

    <div class="chart-sparkline-line">9,5,6,3,9,7,5,4,6,5,6,4,9</div>

    $('.chart-sparkline-line').sparkline('html', {
        type: 'line',
        width: '100%',
        height: 50,
        lineColor: rgba(255, 255, 255, 0.2)',
        fillColor: 'rgba(0,0,0,0)',
        lineWidth: 1.5,
        maxSpotColor: '#b4bfc3',
        minSpotColor: '#b4bfc3',
        spotColor: '#b4bfc3',
        spotRadius: 4,
        highlightSpotColor: '#b4bfc3',
        highlightLineColor: '#b4bfc3'
    });

#### Sparkline Tristate Chart

    <div class="chart-sparkline-tristate">1,1,0,1,-1,-1,1,-1,0,0,1,1,-1,0,0,0,0,-1,1,1,1,-1,1-1,1,-1,0,0,1,1,-1,-1,1,-1,0,0,1,1</div>

    $('.chart-sparkline-tristate').sparkline('html', {
        type: 'tristate',
        height: 40,
        posBarColor: '#b4bfc3',
        zeroBarColor: '#b4bfc3',
        negBarColor: 'rgba(255,255,255,0.08)',
        barWidth: 3,
        barSpacing: 2
    });

#### Sparkline Discrete Chart

    <div class="chart-sparkline-discrete">4,6,7,7,4,3,2,1,4,4,5,7,1,9,5,3,6,3,1,0,8,4,3,5,1,5,7,4,4,4,1,2,4,7,1,9,5,3,6,3,1,0,8,4,3,5,9,9,9,9,9,4,1,1,1,4,2,4,3,7,6,8,9,6,4,6,4,3,6,3,7,2,3</div>

    $('.chart-sparkline-discrete').sparkline('html', {
        type: 'discrete',
        height: 40,
        lineColor: '#b4bfc3',
        thresholdColor: 'rgba(255,255,255,0.1)',
        thresholdValue: 4
    });

#### Sparkline Bullet Chart

    <div class="chart-sparkline-bullet">10,12,12,9,7</div>

    $('.chart-sparkline-bullet').sparkline('html', {
        type: 'bullet',
        targetColor: '#ef5350',
        performanceColor: '#edeff0',
        rangeColors: ['rgba(255,255,255,0.08)', 'rgba(255,255,255,0.05)', 'rgba(255,255,255,0.02)'],
        width: '100%',
        height: 50
    });

#### Sparkline Pie Chart

    <div class="chart-sparkline-pie">1,1,2</div>
    <div class="chart-sparkline-pie">1,1,1</div>
    <div class="chart-sparkline-pie">1,3,1,1</div>

    $('.chart-sparkline-pie').sparkline('html', {
        type: 'pie',
        height: 50,
        sliceColors: ['#b4bfc3', '#edeff0', 'rgba(177, 188, 192, 0.47)', 'rgba(177, 188, 192, 0.1)']
    });

Source files:

- Plugin
  - CSS: `none`
  - JS: `/vendors/jquery.sparkline/jquery.sparkline.min.js`
- LESS: `/less/inc/chart.less`
- HTML: `/other-charts.html`
- JS(demo): `/demo/js/sparkline-charts.js`