Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="graf1" style="width: 400px; height: 250px; float:left"></div>

JavaScript

$(function () {
				var chart;
				$(document).ready(function() {
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'graf1',
							plotBackgroundColor: null,
							plotBorderWidth: null,
							plotShadow: false
						},
						
						title: {
							margin: 40,
							text: 'Podíl všech potřeb'
						},
						tooltip: {
							//pointFormat: '<b>{point.y} Kč [{point.percentage}%]</b>',
							percentageDecimals: 2,
						//	backgroundColor: "rgba(255,255,255,1)",
							formatter: function() {
								return this.point.name+'<br />'+'<b>'+Highcharts.numberFormat(this.y).replace(","," ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2)+'%]</b>';
							}
						},
						plotOptions: {
							pie: {
								allowPointSelect: true,
								cursor: 'pointer',
								dataLabels: {
									enabled: true,
									color: '#000000',
									connectorWidth:2,
									formatter: function() {
										return '<span style="color:'+ this.point.color +'"><b>'+ this.point.name +'</b></span>';
									}
								}
							}
						},
						series: [{
							type: 'pie',
							name: 'Potřeba',
							data:  [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]							 
						}]
					});
				});		
			});