Awesome charts

Using Div lines in Line chart

by Ashok Kumaresan

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- 

 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
	var salesComp = new FusionCharts({
		type: 'mscolumn2d',
		renderAt: 'chart-container',
		width: '800',
		height: '450',
		dataFormat: 'json',
		dataSource: {
			"chart": {
				"caption": "iPhone, iPad and iPod Sales",
				"subCaption": "2006 to 2014",
				"yAxisName": "Sales in million units",
				"theme": "fint",
				"showValues": "0",
				"lineThickness": "3",
				"yAxisNameFontSize": "15",
				"legendItemFontSize": "12",
				"showTooltip": "0",
				//Additional anchor hover cosmetics attributes						
				"anchorHoverRadius":"8",
				"anchorRadius":"4",
				"anchorBorderThickness": "2",
				"labelStep": "2"
			},    
			"categories": [
				{
					"category": [
						{
							"label": "Q1-06"									
						}, 
						{
							"label": "Q2-06"
						}, 
						{
							"label": "Q3-06"									
						}, 
						{
							"label": "Q4-06"
						}, 
						{
							"label": "Q1-07"									
						}, 
						{
							"label": "Q2-07"
						}, 
						{
							"label": "Q3-07"								
						}, 
						{
							"label": "Q4-07"
						}, 
						{
							"label": "Q1-08"							
						}, 
						{
							"label": "Q2-08"
						}, 
						{
							"label": "Q3-08"								
						}, 
						{
							"label": "Q4-08"
						}, 
						{
							"label": "Q1-09"									
						}, 
						{
							"label": "Q2-09"
						}, 
						{
							"label": "Q3-09"									
						}, 
						{
							"label": "Q4-09"
						}, 
						{
							"label": "Q1-10"									
						}, 
						{
							"label": "Q2-10"
						}, 
						{
							"label": "Q3-10"									
						}, 
						{
							"label": "Q4-10"
						}, 
						{
							"label": "Q1-11"									
						}, 
						{
							"label": "Q2-11"
						}, 
						{
							"label": "Q3-11"									
						}, 
						{
							"label": "Q4-11"
						}, 
						{
							"label": "Q1-12"									
						}, 
						{
							"label": "Q2-12"
						}, 
						{
							"label": "Q3-12"									
						}, 
						{
							"label":...