Sells

  • Individual
  • Startup
  • Business
// Sells chart -HTML
<h4 class="card-title"><strong>Sells</strong></h4>
<div class="card-body">
	<ul class="list-inline text-center gap-items-4 mb-30">
		<li class="list-inline-item">
			<span class="badge badge-dot mr-1" style="background-color: #9966ff"></span>
			<span>Individual</span>
		</li>
		<li class="list-inline-item">
			<span class="badge badge-dot mr-1" style="background-color: #4bc0c0"></span>
			<span>Startup</span>
		</li>
		<li class="list-inline-item">
			<span class="badge badge-dot mr-1" style="background-color: #ff9f40"></span>
			<span>Business</span>
		</li>
	</ul>
	<div id="morris-sample-1" data-provide="morris"></div>
</div>
								
// Sells chart -JS
<script>
	// Sells chart
	  Morris.Area({
		element: 'morris-sample-1',
		data: [
		  { year: '2010', a: 50,  b: 80,  c: 20 },
		  { year: '2011', a: 130, b: 100, c: 80 },
		  { year: '2012', a: 80,  b: 60,  c: 70 },
		  { year: '2013', a: 70,  b: 200, c: 140 },
		  { year: '2014', a: 180, b: 150, c: 140 },
		  { year: '2015', a: 110, b: 95,  c: 80 },
		  { year: '2016', a: 115, b: 100, c: 80 },
		  { year: '2018', a: 250, b: 150, c: 200 }
		],
		xkey: 'year',
		ykeys: ['a', 'b', 'c'],
		labels: ['Individual', 'Startup', 'Business'],
		pointSize: 3,
		fillOpacity: 0,
		pointStrokeColors: ['#9966ff', '#4bc0c0', '#ff9f40'],
		behaveLikeLine: true,
		gridLineColor: '#ebebeb',
		lineWidth: 1,
		hideHover: 'auto',
		lineColors: ['#9966ff', '#4bc0c0', '#ff9f40'],
		resize: true
	  });
</script>
								

Earnings

  • Advertising
  • Hosting
// Earnings chart -HTML
<h4 class="card-title"><strong>Earnings</strong></h4>
<div class="card-body">
	<ul class="list-inline text-center gap-items-4 mb-30">
		<li class="list-inline-item">
			<span class="badge badge-lg badge-dot mr-1" style="background-color: #b1bccb"></span>
			<span>Advertising</span>
		</li>
		<li class="list-inline-item">
			<span class="badge badge-lg badge-dot mr-1" style="background-color: #01c4cc"></span>
			<span>Hosting</span>
		</li>
	</ul>
	<div id="morris-sample-2" data-provide="morris"></div>
</div>
								
// Earnings chart -JS
<script>
	// Earnings chart
	  Morris.Area({
		element: 'morris-sample-2',
		data: [
		  { year: '2011', a: 0,   b: 0 },
		  { year: '2012', a: 130, b: 100 },
		  { year: '2013', a: 80,  b: 60 },
		  { year: '2014', a: 70,  b: 180 },
		  { year: '2015', a: 180, b: 150 },
		  { year: '2016', a: 105, b: 90 },
		  { year: '2018', a: 250, b: 150 }
		],
		xkey: 'year',
		ykeys: ['a', 'b'],
		labels: ['Advertising', 'Hosting'],
		pointSize: 0,
		fillOpacity: 0.4,
		pointStrokeColors:['#b1bccb', '#01c4cc'],
		behaveLikeLine: true,
		gridLineColor: '#ebebeb',
		lineWidth: 0,
		hideHover: 'auto',
		lineColors: ['#b1bccb', '#01c4cc'],
		resize: true
	  });
</script>
								

Bar chart

// Bar chart -HTML
<h4 class="card-title"><strong>Bar</strong> chart</h4>
<div class="card-body">
	<div id="morris-bar" data-provide="morris"></div>
</div>
								
// Bar chart -JS
<script>
  // Bar chart
  Morris.Bar({
	element: 'morris-bar',
	data: [
	  { y: '2011', a: 100, b: 90, c: 60 },
	  { y: '2012', a: 75,  b: 65, c: 40 },
	  { y: '2013', a: 50,  b: 40, c: 30 },
	  { y: '2014', a: 75,  b: 65, c: 40 },
	  { y: '2015', a: 50,  b: 40, c: 30 },
	  { y: '2016', a: 75,  b: 65, c: 40 },
	  { y: '2018', a: 100, b: 90, c: 40 }
	],
	xkey: 'y',
	ykeys: ['a', 'b', 'c'],
	labels: ['Starter', 'Individual', 'Business'],
	barColors:['#a1dfe5', '#ffb2cd', '#ccb2ff'],
	hideHover: 'auto',
	gridLineColor: '#eef0f2',
	resize: true
  });  
  
</script>
								

Area chart

// Area chart -HTML
<h4 class="card-title"><strong>Area</strong> chart</h4>
<div class="card-body">
	<div id="morris-area" data-provide="morris"></div>
</div>
								
// Area chart -JS
<script>
	// Area chart
	Morris.Area({
	element: 'morris-area',
	data: [
	  { year: '2011', a: 0,  b: 0,  c: 0 },
	  { year: '2012', a: 50, b: 15, c: 5 },
	  { year: '2013', a: 20, b: 50, c: 65 },
	  { year: '2014', a: 60, b: 12, c: 7 },
	  { year: '2015', a: 30, b: 20, c: 120 },
	  { year: '2016', a: 25, b: 80, c: 40 },
	  { year: '2018', a: 10, b: 10, c: 10 }
	],
	lineColors: ['#57c7d4', '#f96197', '#926dde'],
	xkey: 'year',
	ykeys: ['a', 'b', 'c'],
	labels: ['Starter', 'Individual', 'Business'],
	pointSize: 0,
	lineWidth: 0,
	resize:true,
	fillOpacity: 0.8,
	behaveLikeLine: true,
	gridLineColor: '#e0e0e0',
	hideHover: 'auto'
	});

</script>
								

Line chart

// Line chart -HTML
<h4 class="card-title"><strong>Line</strong> chart</h4>
<div class="card-body">
	<div id="morris-line" data-provide="morris"></div>
</div>
								
// Line chart -JS
<script>
  // Line chart
  Morris.Line({
	element: 'morris-line',
	resize: true,
	data: [
	  {y: '2014 Q3', sells: 1367},
	  {y: '2014 Q4', sells: 1988},
	  {y: '2015 Q1', sells: 2018},
	  {y: '2015 Q2', sells: 2778},
	  {y: '2015 Q3', sells: 4912},
	  {y: '2015 Q4', sells: 3767},
	  {y: '2016 Q1', sells: 6810},
	  {y: '2016 Q2', sells: 5670},
	  {y: '2016 Q3', sells: 4820},
	  {y: '2016 Q4', sells: 15073},
	  {y: '2018 Q1', sells: 10687},
	  {y: '2018 Q2', sells: 9432}
	],
	xkey: 'y',
	ykeys: ['sells'],
	labels: ['Sells'],
	gridLineColor: '#eef0f2',
	lineColors: ['#66bedb'],
	lineWidth: 1,
	hideHover: 'auto'
  });  

</script>
								

Donut chart

// Donut chart -HTML
<h4 class="card-title"><strong>Donut</strong> chart</h4>
<div class="card-body">
	<div id="morris-donut" data-provide="morris"></div>
</div>
								
// Donut chart -JS
<script>
  // Bar chart
  Morris.Bar({
	element: 'morris-bar',
	data: [
	  { y: '2011', a: 100, b: 90, c: 60 },
	  { y: '2012', a: 75,  b: 65, c: 40 },
	  { y: '2013', a: 50,  b: 40, c: 30 },
	  { y: '2014', a: 75,  b: 65, c: 40 },
	  { y: '2015', a: 50,  b: 40, c: 30 },
	  { y: '2016', a: 75,  b: 65, c: 40 },
	  { y: '2018', a: 100, b: 90, c: 40 }
	],
	xkey: 'y',
	ykeys: ['a', 'b', 'c'],
	labels: ['Starter', 'Individual', 'Business'],
	barColors:['#a1dfe5', '#ffb2cd', '#ccb2ff'],
	hideHover: 'auto',
	gridLineColor: '#eef0f2',
	resize: true
  });

</script>