jQuery Chart

Set the showBorderLine property of the jqxChart. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>
<div id='eventText'></div>

JavaScript

var sampleData = [{
    Country: 'China',
    Population: 1347350000,
    Percent: 19.18
}, {
    Country: 'India',
    Population: 1210193422,
    Percent: 17.22
}, {
    Country: 'USA',
    Cities: [
    		{ CityName: '', PeoplePart: 20 },
        { CityName: '', PeoplePart: 50 },
    		{ CityName: '', PeoplePart: 30 }
    ],
    Population: 313912000,
    Percent: 4.47
}, {
    Country: 'Indonesia',
    Cities: [
    		{ CityName: '', PeoplePart: 20 },
        { CityName: '', PeoplePart: 50 },
    		{ CityName: '', PeoplePart: 30 }
    ],
    Population: 237641326,
    Percent: 3.38
}, {
    Country: 'Brazil',
    Cities: [
    		{ CityName: 'Brasilia', PeoplePart: 20 },
        { CityName: 'Sao Paulo', PeoplePart: 50 },
    		{ CityName: 'Rio De Janiero', PeoplePart: 30 }
    ],
    Population: 192376496,
    Percent: 2.74
}];
// prepare jqxChart settings
var source = {
		datatype: 'json',
    datafields: [
    		{ name: 'Country' },
        { name: 'Population' },
        { name: 'Percent' }
    ],
    localdata: sampleData
    //url: ''
};
var dataAdapter = new $.jqx.dataAdapter(source);
var settings = {
    showBorderLine: false,
    title: "Population",
    description: "in percentage",
    showLegend: true,
    enableAnimations: true,
    source: sampleData,
    showBorderLine: true,
    colorScheme: 'scheme07',
    seriesGroups: [{
        type: 'pie',
        useGradient: false,
        //valueAxis: {
        //    flip: false,
        //    //unitInterval: 100000000,
        //    //maxValue: 1500000000,
        //    //displayValueAxis: true,
        //    //description: '',
        //    //formatFunction: function (value) {
        //    //    return parseInt(value / 1000000);
        //    //}
        //},
        //mouseover: myEventHandler,
        //mouseout: myEventHandler,
        click: myEventHandler,
        series: [{
            dataField: 'Percent',
            displayText: 'Country',
            labelRadius: 140,
           ...