Sparkline Chart

Introduction

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

How to Setup

HTML Structure

<div id="sparkline_3"></div>

Dependency

JS

<!-- Sparkline JavaScript -->
<script src="vendors/jquery.sparkline/dist/jquery.sparkline.min.js"></script>
<script src="dist/js/sparkline-data.js"></script>

Initialize Echarts JS

Line Chart

if( $('#sparkline_1').length > 0 ){
	$("#sparkline_1").sparkline([2,4,4,6,8,5,6,4,8,6,6,2 ], {
		type: 'line',
		width: '100%',
		height: '50',
		resize: true,
		lineWidth: '1',
		lineColor: '#00acf0',
		fillColor: '#edf9fe',
		spotColor:'00acf0',
		spotRadius:'2',
		minSpotColor: '#00acf0',
		maxSpotColor: '#00acf0',
		highlightLineColor: 'rgba(0, 0, 0, 0)',
		highlightSpotColor: '#00acf0'
	});
}

Bar Charts

if( $('#sparkline_1').length > 0 ){
	$("#sparkline_1").sparkline([0,2,8,6,8,5,6,4,8,6,6,2 ], {
		type: 'bar',
		width: '100%',
		height: '50',
		barWidth: '5',
		resize: true,
		barSpacing: '5',
		barColor: '#00acf0',
		highlightSpotColor: '#00acf0'
	});
}

Pie Charts

if( $('#sparkline_1').length > 0 ){
	$("#sparkline_1").sparkline([20,4,4], {
		type: 'pie',
		width: '50',
		height: '50',
		resize: true,
		sliceColors: ['#00acf0', '#22af47', '#ffbf36']
	});
}