<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxchart.core.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdraw.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdata.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h3
>jQWidgets jqxChart padding property</
h3
>
<
div
class
=
'default'
></
div
>
<
div
id
=
'chartContainer'
style="width:600px;
height: 400px">
</
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var json = [
{ Day:'Monday', A:3, B:1, C: 2, D:1},
{ Day:'Tuesday', A:3, B:1, C: 2, D:1},
{ Day:'Wednesday', A:3, B:1, C: 2, D:1},
{ Day:'Thursday', A:3, B:1, C: 2, D:1},
{ Day:'Friday', A:3, B:1, C: 2, D:1},
{ Day:'Saturday', A:3, B:1, C: 2, D:1},
{ Day:'Sunday', A:3, B:1, C: 2, D:1}
];
var obj = {
title: "Coding Score",
description: "Coding Questions Solved Daily",
source: json,
padding: { left: 50, top: 30,
right: 50, bottom: 30 },
categoryAxis: {
dataField: 'Day',
showGridLines: true
},
seriesGroups: [{
type: 'column',
columnsGapPercent: 30,
seriesGapPercent: 0,
valueAxis: {
minValue: 0,
maxValue: 10,
unitInterval: 10,
description: 'Questions Solved'
},
series: [
{ dataField: 'A', displayText: 'A'},
{ dataField: 'B', displayText: 'B'},
{ dataField: 'C', displayText: 'C'},
{ dataField: 'D', displayText:'D' }
]
}]
};
$('#chartContainer').jqxChart(obj);
});
</
script
>
</
body
>
</
html
>