jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
276 lines (248 loc) • 13.5 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Columns padding and spacing example</title>
<meta name="description" content="This is an example of Javascript Chart padding and spacing of columns series." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare chart data as an array
var sampleData = [
{ Position: 0, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 30, Serie5: 10, Serie6: 5 },
{ Position: 1, Serie1: 25, Serie2: 25, Serie3: 5, Serie4: 20, Serie5: 20, Serie6: 10 },
{ Position: 3, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 10, Serie5: 20, Serie6: 15 },
{ Position: 6, Serie1: 35, Serie2: 25, Serie3: 45, Serie4: 5, Serie5: 30, Serie6: 20 },
{ Position: 7, Serie1: 5, Serie2: 20, Serie3: 25, Serie4: 20, Serie5: 40, Serie6: 15 },
{ Position: 9, Serie1: 30, Serie2: 10, Serie3: 30, Serie4: 10, Serie5: 5, Serie6: 20 },
{ Position: 10, Serie1: 60, Serie2: 45, Serie3: 10, Serie4: 20, Serie5: 10, Serie6: 15 }
];
// prepare jqxChart settings
var seriesGroups =
[
{
type: 'column',
columnsGapPercent: 25,
seriesGapPercent: 10,
columnsMaxWidth: 40,
columnsMinWidth: 1,
skipOverlappingPoints: false, // change to true if you want to prevent adjacent columns overlap
series: [
{ dataField: 'Serie1', displayText: 'Serie1' },
{ dataField: 'Serie2', displayText: 'Serie2' },
{ dataField: 'Serie3', displayText: 'Serie3' }
]
},
{
type: 'column',
greyScale: true,
columnsGapPercent: 25,
seriesGapPercent: 10,
columnsMaxWidth: 40,
columnsMinWidth: 1,
skipOverlappingPoints: false, // change to true if you want to prevent adjacent columns overlap
series: [
{ dataField: 'Serie4', displayText: 'Serie4' },
{ dataField: 'Serie5', displayText: 'Serie5' },
{ dataField: 'Serie6', displayText: 'Serie6' }
]
}
];
var currentSeriesGroups = [];
currentSeriesGroups.push(seriesGroups[0]);
var chartSettings = {
title: "Columns spacing and padding",
description: "Example with two series groups and three series in each group",
enableAnimations: false,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
columnSeriesOverlap: true, // change to true if you want the columns in the two series groups to overlap
xAxis:
{
dataField: 'Position',
tickMarks: {
visible: true,
interval: 1,
color: '#BCBCBC'
},
gridLines: {
visible: true,
interval: 1,
color: '#BCBCBC'
},
flip: false,
valuesOnTicks: false
},
valueAxis:
{
unitInterval: 10,
title: {text: 'Value'},
tickMarks: {color: '#BCBCBC'},
gridLines: {color: '#BCBCBC'},
labels: {
horizontalAlignment: 'right'
},
},
colorScheme: 'scheme04',
seriesGroups: currentSeriesGroups
};
// setup the chart
$('#chartContainer').jqxChart(chartSettings);
var chartInstance = $('#chartContainer').jqxChart('getInstance');
// enable series groups
$("#btnEnableSeriesGroup1").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: true});
$("#btnEnableSeriesGroup1").on('change', function (event) {
updateSeriesGroupsVisibility();
});
$("#btnEnableSeriesGroup2").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
$("#btnEnableSeriesGroup2").on('change', function (event) {
updateSeriesGroupsVisibility();
});
function updateSeriesGroupsVisibility()
{
chartInstance.seriesGroups = [];
if ($("#btnEnableSeriesGroup1").jqxCheckBox('checked'))
chartInstance.seriesGroups.push(seriesGroups[0]);
if ($("#btnEnableSeriesGroup2").jqxCheckBox('checked'))
chartInstance.seriesGroups.push(seriesGroups[1]);
updateSeriesGroupsStacking();
}
// stack series groups
$("#btnStackedSeriesGroup1").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
$("#btnStackedSeriesGroup1").on('change', function (event) {
updateSeriesGroupsStacking();
});
$("#btnStackedSeriesGroup2").jqxCheckBox({ width: 120, height: 25, hasThreeStates: false, checked: false});
$("#btnStackedSeriesGroup2").on('change', function (event) {
updateSeriesGroupsStacking();
});
function updateSeriesGroupsStacking()
{
if ($("#btnEnableSeriesGroup1").jqxCheckBox('checked'))
{
if ($("#btnStackedSeriesGroup1").jqxCheckBox('checked'))
chartInstance.seriesGroups[0].type = 'stackedcolumn';
else
chartInstance.seriesGroups[0].type = 'column';
}
if ($("#btnEnableSeriesGroup2").jqxCheckBox('checked'))
{
if ($("#btnStackedSeriesGroup2").jqxCheckBox('checked'))
chartInstance.seriesGroups[chartInstance.seriesGroups.length - 1].type = 'stackedcolumn';
else
chartInstance.seriesGroups[chartInstance.seriesGroups.length - 1].type = 'column';
}
chartInstance.refresh();
}
// columns spacing
$('#sliderColumnsGapPercentGroup1').jqxSlider({ min: 0, max: 99, ticksFrequency: 5, value: 25, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[0].columnsGapPercent = event.args.value;
chartInstance.refresh();
});
$('#sliderColumnsGapPercentGroup2').jqxSlider({ min: 0, max: 99, ticksFrequency: 5, value: 25, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[1].columnsGapPercent = event.args.value;
chartInstance.refresh();
});
// series spacing
$('#sliderSeriesGapGroup1').jqxSlider({ min: 0, max: 100, ticksFrequency: 5, value: 10, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[0].seriesGapPercent = event.args.value;
chartInstance.refresh();
});
$('#sliderSeriesGapGroup2').jqxSlider({ min: 0, max: 100, ticksFrequency: 5, value: 10, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[1].seriesGapPercent = event.args.value;
chartInstance.refresh();
});
// min column width
$('#sliderMinWidthGroup1').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[0].columnsMinWidth = event.args.value;
chartInstance.refresh();
});
$('#sliderMinWidthGroup2').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[1].columnsMinWidth = event.args.value;
chartInstance.refresh();
});
// max column width
$('#sliderMaxWidthGroup1').jqxSlider({ min: 1, max: 120, ticksFrequency: 20, value: 40, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[0].columnsMaxWidth = event.args.value;
chartInstance.refresh();
});
$('#sliderMaxWidthGroup2').jqxSlider({ min: 1, max: 120, ticksFrequency: 20, value: 40, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
seriesGroups[1].columnsMaxWidth = event.args.value;
chartInstance.refresh();
});
});
</script>
</head>
<body class='default'>
<div id='chartContainer' style="width:850px; height:500px">
</div>
<table style="padding-left: 30px; padding-top: 10px;">
<tr style="height:50px;">
<td style="width:300px"><b>Series group 1:</b></td>
<td><b>Series group 2:</b></td>
</tr>
<tr>
<td>
<div id="btnEnableSeriesGroup1">Visible</div>
</td>
<td>
<div id="btnEnableSeriesGroup2">Visible</div>
</td>
</tr>
<tr>
<td>
<div id="btnStackedSeriesGroup1">Stacked</div>
</td>
<td>
<div id="btnStackedSeriesGroup2">Stacked</div>
</td>
</tr>
<tr>
<td>Space between columns / padding:<div id="sliderColumnsGapPercentGroup1"></div></td>
<td>Space between columns / padding:<div id="sliderColumnsGapPercentGroup2"></div></td>
</tr>
<tr>
<td>Space between series:<div id="sliderSeriesGapGroup1"></div></td>
<td>Space between series:<div id="sliderSeriesGapGroup2"></div></td>
</tr>
<tr>
<td>Minimum column width:<div id="sliderMinWidthGroup1"></div></td>
<td>Minimum column width:<div id="sliderMinWidthGroup2"></div></td>
</tr>
<tr>
<td>Maximum column width:<div id="sliderMaxWidthGroup1"></div></td>
<td>Maximum column width:<div id="sliderMaxWidthGroup2"></div></td>
</tr>
</table>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Javascript Chart padding and spacing of columns series. In order to prevent adjacent columns overlap you have to set the skipOverlappingPoints setting to true. You can see how to set the columns and the series gap percent. If you want the columns in the two series groups to overlap you have to set the columnSeriesOverlap setting to true. You can also see how to set the columns spacing and the minimum and maximum column width.
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>