Analysis
%20
  • 953
    New York
  • 813
    Los Angeles
  • 369
    Dallas
1,3,5,4,6,8,7,9,7,8,10,16,14,10
// Analysis chart 1-HTML
<div class="card card-body">
	<div class="flexbox">
		<h6 class="text-uppercase">Analysis</h6>
		<h6><i class="ion-android-arrow-dropup text-success fs-18 mr-1"></i> %20</h6>
	</div>
	<ul class="flexbox flex-justified text-center my-40">
		<li class="br-1 border-light">
			<div class="fs-18">953</div>
			<small>New York</small>
		</li>
		<li class="br-1 border-light">
			<div class="fs-18">813</div>
			<small>Los Angeles</small>
		</li>
		<li>
			<div class="fs-18">369</div>
			<small>Dallas</small>
		</li>
	</ul>
	<div data-provide="sparkline" data-width="100%" data-height="80" data-line-color="#4bc0c0" data-fill-color="#4bc0c0" data-min-spot-color="false" data-max-spot-color="false" data-highlight-spot-color="false" data-highlight-line-color="#fff">1,3,5,4,6,8,7,9,7,8,10,16,14,10</div>
</div>
								
// Analysis chart 1-JS
<script>
  // Analysis Chart
  $('#compositeline').sparkline('html', {
	fillColor:      false,
	changeRangeMin: 0,
	chartRangeMax:  10
  });


  $('#compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
	composite:      true,
	fillColor:      false,
	lineColor:      '#f96868',
	changeRangeMin: 0,
	chartRangeMax:  10
  }); 
  
</script>
								
Analysis
%20
  • %76.58
    All Time
  • %35.12
    Last Month
  • %6.66
    Today
2,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8
// Analysis chart 2-HTML
<div class="card card-body">
	<div class="flexbox">
		<h6 class="text-uppercase">Analysis</h6>
		<h6><i class="ion-android-arrow-dropup text-success fs-18 mr-1"></i> %20</h6>
	</div>
	<ul class="flexbox flex-justified text-center my-40">
		<li class="br-1 border-light">
			<div class="fs-18">%76.58</div>
			<small>All Time</small>
		</li>
		<li class="br-1 border-light">
			<div class="fs-18">%35.12</div>
			<small>Last Month</small>
		</li>
		<li>
			<div class="fs-18">%6.66</div>
			<small>Today</small>
		</li>
	</ul>
	<div class="text-center" data-provide="sparkline" data-type="bar" data-height="80" data-bar-color="#ff9f40">2,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8</div>
</div>
								
// Analysis chart 2-JS
<script>
  // Analysis Chart
  $('#compositeline').sparkline('html', {
	fillColor:      false,
	changeRangeMin: 0,
	chartRangeMax:  10
  });


  $('#compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
	composite:      true,
	fillColor:      false,
	lineColor:      '#f96868',
	changeRangeMin: 0,
	chartRangeMax:  10
  }); 
  
</script>
								
6,374

Increase in page views

1,8,6,5,6,8,7,9,7,8,10,16,14,10
// Analysis chart 3-HTML
<div class="card card-info">
	<div class="card-body text-white pb-12">
		<div class="fs-50 fw-100">6,374</div>
		<p class="lead opacity-80">Increase in page views</p>
	</div>
	<div data-provide="sparkline" data-width="100%" data-height="160" data-line-width="2" data-line-color="#fff" data-fill-color="false" data-min-spot-color="#fff" data-max-spot-color="#fff" data-highlight-spot-color="#fff" data-spot-color="#fff" data-spot-radius="3" data-value-spots="{":99": "#fff"}">1,8,6,5,6,8,7,9,7,8,10,16,14,10</div>
</div>
								
// Analysis chart 3-JS
<script>
  // Analysis Chart
  $('#compositeline').sparkline('html', {
	fillColor:      false,
	changeRangeMin: 0,
	chartRangeMax:  10
  });


  $('#compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
	composite:      true,
	fillColor:      false,
	lineColor:      '#f96868',
	changeRangeMin: 0,
	chartRangeMax:  10
  }); 
  
</script>
								
Analysis
%20
  • %76.58
    All Time
  • %35.12
    Last Month
  • %6.66
    Today
2,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8
// Analysis chart 4-HTML
<div class="card card-body">
	<div class="flexbox">
		<h6 class="text-uppercase">Analysis</h6>
		<h6><i class="ion-android-arrow-dropup text-success fs-18 mr-1"></i> %20</h6>
	</div>
	<ul class="flexbox flex-justified text-center my-40">
		<li class="br-1 border-light">
			<div class="fs-18">%76.58</div>
			<small>All Time</small>
		</li>
		<li class="br-1 border-light">
			<div class="fs-18">%35.12</div>
			<small>Last Month</small>
		</li>
		<li>
			<div class="fs-18">%6.66</div>
			<small>Today</small>
		</li>
	</ul>
	<div class="text-center" data-provide="sparkline" data-type="bar" data-height="80" data-bar-color="#00888fc">2,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8</div>
</div>
								
// Analysis chart 4-JS
<script>
  // Analysis Chart
  $('#compositeline').sparkline('html', {
	fillColor:      false,
	changeRangeMin: 0,
	chartRangeMax:  10
  });


  $('#compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
	composite:      true,
	fillColor:      false,
	lineColor:      '#f96868',
	changeRangeMin: 0,
	chartRangeMax:  10
  }); 
  
</script>
								
Available Chart Types
Inline 10,8,9,3,5,8,5
Line graphs 8,4,0,0,0,0,,10,10,10,10,0,0,0,4,6,5,9,10
Bar chart 10,8,9,3,5,8,5
Negative values -3,1,2,0,3,-1
Stacked 0:2,2:4,4:2,4:1
Composite inline 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
Inline with normal range 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10
Composite bar 4,6,7,7,4,3,2,1,4
Bullet charts 10,12,12,9,7 14,12,12,9,7 10,12,14,9,7
// Analysis chart -HTML
<div class="card">
	<table class="table table-striped">
		<tbody>
			<tr class="bt-0">
				<td>Inline</td>
				<td class="text-right">
					<span data-provide="sparkline">10,8,9,3,5,8,5</span>
				</td>
			</tr>
			<tr>
				<td>Line graphs</td>
				<td class="text-right">
					<span data-provide="sparkline">8,4,0,0,0,0,,10,10,10,10,0,0,0,4,6,5,9,10</span>
				</td>
			</tr>
			<tr>
				<td>Bar chart</td>
				<td class="text-right">
					<span data-provide="sparkline" data-type="bar">10,8,9,3,5,8,5</span>
				</td>
			</tr>
			<tr>
				<td>Negative values</td>
				<td class="text-right">
					<span data-provide="sparkline" data-type="bar">-3,1,2,0,3,-1</span>
				</td>
			</tr>
			<tr>
				<td>Stacked</td>
				<td class="text-right">
					<span data-provide="sparkline" data-type="bar">0:2,2:4,4:2,4:1</span>
				</td>
			</tr>
			<tr>
				<td>Composite inline</td>
				<td class="text-right">
					<span id="compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
				</td>
			</tr>
			<tr>
				<td>Inline with normal range</td>
				<td class="text-right">
					<span data-provide="sparkline" data-normal-range-min="-1" data-normal-range-max="8">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
				</td>
			</tr>
			<tr>
				<td>Composite bar</td>
				<td class="text-right">
					<span id="compositebar" data-provide="sparkline" data-type="bar">4,6,7,7,4,3,2,1,4</span>
				</td>
			</tr>
			<tr>
			  <td>Bullet charts</td>
			  <td class="text-right">
				<span class="mr-2" data-provide="sparkline" data-type="bullet">10,12,12,9,7</span>
				<span class="mr-2" data-provide="sparkline" data-type="bullet">14,12,12,9,7</span>
				<span data-provide="sparkline" data-type="bullet">10,12,14,9,7</span>
			  </td>
			</tr>
		</tbody>
	</table>
</div>
								
// Analysis chart -JS
<script>
 //Composite line Chart
  $('#compositeline').sparkline('html', {
	fillColor:      false,
	changeRangeMin: 0,
	chartRangeMax:  10
  });


  $('#compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
	composite:      true,
	fillColor:      false,
	lineColor:      '#f96868',
	changeRangeMin: 0,
	chartRangeMax:  10
  });

 //Drow a line chart above the bar chart to make a composite chart
  $('#compositebar').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
	composite: true,
	fillColor: false,
	lineColor: '#f96868'
  });
  
</script>
								
Discrete 4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5
Discrete with threshold 4,6,7,7,4,3,2,1,4
Customize size and colors 10,8,9,3,5,8,5,7
Tristate charts 1,1,0,1,-1,-1,1,-1,0,0,1,1
Tristate chart using a color map 1,2,0,2,-1,-2,1,-2,0,0,1,1
Box Plot 4,27,34,52,54,59,61,68,78,82,85,87,91,93,100
Pre-computed box plot Loading..
Pie charts 1,1,2 1,5 20,50,80
// Analysis chart -HTML
<table class="table table-striped">
	<tbody>
		<tr class="bt-0">
			<td>Discrete</td>
			<td class="text-right">
				<span data-provide="sparkline" data-type="discrete">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span>
			</td>
		</tr>
		<tr>
			<td>Discrete with threshold</td>
			<td class="text-right">
				<span data-provide="sparkline" data-type="discrete" data-threshold-color="#f96868" data-threshold-value="4">4,6,7,7,4,3,2,1,4</span>
			</td>
		</tr>
		<tr>
			<td>Customize size and colors</td>
			<td class="text-right">
				<span data-provide="sparkline" data-width="200" data-height="64" data-line-color="#9966ff" data-fill-color="#9966ff" data-min-spot-color="false" data-max-spot-color="false" data-spot-color="false" data-spot-radius="4" data-highlight-spot-color="#4bc0c0">10,8,9,3,5,8,5,7</span>
			</td>
		</tr>
		<tr>
			<td>Tristate charts</td>
			<td class="text-right">
				<span data-provide="sparkline" data-type="tristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span>
			</td>
		</tr>
		<tr>
			<td class="w-300px">Tristate chart using a color map</td>
			<td class="text-right">
				<span id="sparktristatecols">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
			</td>
		</tr>
		<tr>
		  <td>Box Plot</td>
		  <td class="text-right">
			<span data-provide="sparkline" data-type="box">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span>
		  </td>
		</tr>
		
		<tr>
		  <td>Pre-computed box plot</td>
		  <td class="text-right">
			<span id="sparkboxplotraw">Loading..</span>
		  </td>
		</tr>
		<tr>
			<td>Pie charts</td>
			<td class="text-right">
				<span class="mr-2" data-provide="sparkline" data-type="pie">1,1,2</span>
				<span class="mr-2" data-provide="sparkline" data-type="pie">1,5</span>
				<span data-provide="sparkline" data-type="pie">20,50,80</span>
			</td>
		</tr>
	</tbody>
</table>

							
// Analysis chart -JS
<script>
 //Tristate color map
  $('#sparktristatecols').sparkline('html', {
	type:     'tristate',
	colorMap: {'-2': '#f2a654', '2': '#48b0f7'}
  });

 //Pre-computed box plot
  $('#sparkboxplotraw').sparkline([ 1, 3, 5, 8, 10, 15, 18 ], {
	type:         'box',
	raw:          true,
	showOutliers: true,
	target:       6
  });
  
</script>