FusionCharts - Gallery Example - Drag Line Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.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>

CSS

body {
     font-family:"Arial", "Verdana", "sans";
     font-size:80%;
}
body > div {
    /*only one in this sample */
    width: 600px;
}
table {
    margin: 25px auto;
    border-collapse: collapse;
    border: 1px solid;
    border-bottom: 2px solid;
}
th {
    background-color: #fece2f;
    color: #ffffff;
}
th, td {
    border: 1px solid #000;
    padding: 10px 5px;
    min-width: 70px;
    text-align: center;
}
tr:nth-child(1) > td:nth-child(1) {
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}
tr:nth-child(2) > td {
    color: #0075c2;
}
tr:nth-child(3) > td {
    color: #1aaf5d;
}
.row-header {
    background-color: #1aaf5d;
    color: #fff !important;
}
tr:nth-child(2) > td:nth-child(1) {
    background-color: #0075c2;
}
#tableCont {
    width: 100%;
}

JavaScript

FusionCharts.ready(function () {
    var salesPrediction = new FusionCharts({
        type: 'dragline',
        renderAt: 'chart-container',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
	"chart" : {
		"showborder" : 0,
		"legendshadow" : 1,
		"outcnvbasefont" : "Verdana",
		"canvasborderthickness" : 1,
		"palette" : 1,
		"showexportdatamenuitem" : 1,
		"bgalpha" : 0,
		"basefontcolor" : "000000",
		"borderthickness" : 1,
		"legendborderthickness" : 1,
		"basefont" : "Verdana",
		"outcnvbasefontsize" : 10,
		"outcnvbasefontcolor" : "000000",
		"bgratio" : "100,100",
		"basefontsize" : 10,
		"xaxisname" : "Dates",
		"allowAxisChange" : 0,
		"yaxisname" : "Rate",
		"labeldisplay" : "ROTATE",
		"anchorradius" : 0,
		"yaxismaxvalue" : 100,
		"showrestorebtn" : 0,
		"donotsnap" : 1,
		"numdivlines" : 20,
		"restorebtnwidth" : 85,
		"yaxisminvalue" : -10,
		"showshadow" : 0,
		"showformbtn" : 0,
		"decimals" : 0,
		"showvalues" : 1,
		"canvaspadding" : 20
       
       
	},
	"categories" : [{
			"category" : [{
					"name" : "2015-07-01"
				}, {
					"name" : "2015-07-02"
				}, {
					"name" : "2015-07-03"
				}, {
					"name" : "2015-07-04"
				}, {
					"name" : "2015-07-05"
				}, {
					"name" : "2015-07-06"
				}, {
					"name" : "2015-07-07"
				}, {
					"name" : "2015-07-08"
				}
			]
		}
	],
	"dataset" : [{
			"allowdrag" : 0,
			"id" : "TR",
			"dashed" : 0,
			"color" : "0049DF",
			"seriesName" : "Curve 1",
			"showplotborder" : 0,
			"allownegativedrag" : 0,
			"showvalues" : 1,
         "valuePosition":"BELOW",
			"data" : [{
					"value" : 13,
					"anchorborderthickness" : 0,
					"id" : "35527919",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 13,
					"anchorborderthickness" : 0,
					"id" : "35579915",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 17,
					"anchorborderthickness" : 0,
					"id" :...