    <ol class="breadcrumb">
        <li><a href="#/">Dashboard</a></li>
        <li>Charts</li>
        <li class="active">Sparklines</li>
    </ol>


<div class="container-fluid">


    <div class="alert alert-info">
        <h3>Sparklines</h3>
        <p>Sparklines are very small, inline charts that can be drawn using data supplied either inline in the HTML, or via javascript. They can, however, be customized to fit even bigger divs.</p>
    </div>

    <div data-widget-group="group1">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Inline</h2>
                        <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
                    </div>
                    <div class="panel-body">
                        <p>Inline line charts <span sparklines values="5,4,7,6,9,5,8,2,6,4,6,7"></span> can be placed anywhere <span sparklines values="6,3,8,1,3,2,4,5,6,3,2"></span></p>

                        <p>Bar charts <span sparklines="{type: 'bar', barColor: '#009688'}" data-data="[5,6,3,9,2,7,5]"></span> with negetives <span sparklines="{type: 'bar', barColor: '#009688'}" data-data="[5,6,-3,9,-2,7,-5]"></span> and stacked <span sparklines="{type: 'bar',  barColor: '#009688'}" values="1:3, 5:3, 2:7,9:1,5:6"></span></p>

                        <p>Composite inline 
                            <sparklines-composite>
                                <span sparklines="{ fillColor: false, lineWidth: 2, lineColor: '#2196f3', changeRangeMin: 0, chartRangeMax: 10 }" data-data="[5,4,7,6,9,5,8,2,6,4,6,7]"></span>
                                <span sparklines="{composite: true, fillColor: false, lineColor: '#ff5722', lineWidth: 2, changeRangeMin: 0, chartRangeMax: 10 }" data-data="[5,6,3,9,2,7,5]"></span>
                            </sparklines-composite>
                        </p>

                        <p>Composite bar 
                            <sparklines-composite>
                                <span sparklines="{type: 'bar', barColor: '#b0bec5'}" data-data="[5,4,7,6,9,5,8,2,6,4,6,7]"></span>
                                <span sparklines="{composite: true, fillColor: false, lineColor: '#03a9f4', lineWidth: 2 }" data-data="[1,33,3,9,2,7,5]"></span>
                            </sparklines-composite>
                        </p>

                        <p>Discrete <span sparklines="{ type: 'discrete', lineColor: '#00bcd4', xwidth: 18 }" values="4,6,7,7,4,3,2,1,4,4 "></span> and with threshhold <span sparklines="{ type: 'discrete', lineColor: '#00bcd4', thresholdColor: 'red', thresholdValue: 4 }" values="4,6,7,7,4,3,2,1,4,4"></span></p>
                        <p>Pie charts <span sparklines="{type: 'pie'}" values="1,4,3"></span></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default" data-widget='{"draggable": "false"}'>
                  <div class="panel-heading">
                        <h2>Stacked</h2>
                        <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
                      </div>
                  <div class="panel-body">
                        <sparklines-composite style="margin:0 auto; max-width: 400px; display: block;" >
                            <span sparklines="{ type: 'bar', barColor: '#eceff1', height: '200px',width: '100%', barWidth: 10, barSpacing: 5, spotRadius: 4}" data-data="[5,4,7,6,9,5,8,2,6,4,6,7,6,4,2,1,4,6,2,5,7,2,3,5,3,7,9]"></span>
                            <span sparklines="{ composite: true, fillColor: false, lineColor: '#03a9f4', lineWidth: 2, height: '200px', width: '100%', spotRadius: 4}" data-data="[4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7,8]"></span>
                        </sparklines-composite>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default" data-widget='{"draggable": "false"}'>
                  <div class="panel-heading">
                    <h2>Pie Chart</h2>
                    <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
                  </div>
                  <div class="panel-body"><span sparklines="{type: 'pie', height: '200px'}" data-data="[5,3,4,1]" style="max-width: 200px; display: block; margin:0 auto;"></span></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Line Charts</h2>
                        <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
                    </div>
                    <div class="panel-body">
                    <sparklines-composite >
                        <span sparklines="{ type: 'line', width: '100%', height: '200px', lineColor: '#b0bec5', fillColor: '#eceff1', highlightSpotColor: '#b0bec5', highlightLineColor: '#b0bec5', spotRadius: 4, chartRangeMin: 0,chartRangeMax: 20}" data-data="[15,14,14,17,16,19,15,18,12,16,14,16,17,14,12,11,15,17,12,11,14,12,10,13,16,13]"></span>
                        <span sparklines="{ type: 'line', width: '100%', height: '200px', lineColor: '#546e7a', fillColor: '#b0bec5', highlightSpotColor: '#546e7a', highlightLineColor: '#546e7a', spotRadius: 4, chartRangeMin: 0,chartRangeMax: 20, composite:true}" data-data="[4,3,0,6,6,8,5,9,3,8,7,8,7,6,6,4,5,6,3,3,4,3,3,5,5,6]"></span>
                    </sparklines-composite>
                </div>
                </div>
            </div>
        </div>
    </div>