jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
380 lines (334 loc) • 16.5 kB
HTML
<html lang="en">
<head>
<title id='Description'>Chart Custom Element ColumnsSpacingSeries</title>
<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" />
<meta name="description" content="This is an example of Custom element Chart line series. The data is loaded in the chart from a csv file using JavaScript. The type of the seriesGroups setting is set to line. Setting the valuesOnTicks option enables the data to be shown for each date. You can also see how to set the xAxis labels under 45 degrees angle. In order to change the color scheme you have to set the colorScheme setting. The animation is enabled with the enableAnimations option" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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>
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 }
];
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]);
JQXElements.settings['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
};
JQXElements.settings['EnableSeriesGroupButton1'] =
{
hasThreeStates: false,
checked: true
};
JQXElements.settings['EnableSeriesGroupButton2'] =
{
hasThreeStates: false,
checked: false
};
JQXElements.settings['StackedSeriesButton1'] =
{
hasThreeStates: false,
checked: false
};
JQXElements.settings['StackedSeriesButton2'] =
{
hasThreeStates: false,
checked: false
};
JQXElements.settings['SliderColumnsGapPercentGroup1'] =
{
min: 0,
max: 99,
ticksFrequency: 5,
value: 25,
step: 1,
mode: 'fixed'
};
JQXElements.settings['SliderColumnsGapPercentGroup2'] =
{
min: 0,
max: 99,
ticksFrequency: 5,
value: 25,
step: 1,
mode: 'fixed'
};
JQXElements.settings['SliderSeriesGapGroup1'] =
{
min: 0,
max: 100,
ticksFrequency: 5,
value: 10,
step: 1,
mode: 'fixed'
};
JQXElements.settings['SliderSeriesGapGroup2'] =
{
min: 0,
max: 100,
ticksFrequency: 5,
value: 10,
step: 1,
mode: 'fixed'
};
JQXElements.settings['SliderMinWidthGroup1'] =
{
min: 0,
max: 50,
ticksFrequency: 5,
value: 0,
step: 1,
mode: 'fixed'
};
JQXElements.settings['SliderMinWidthGroup2'] =
{
min: 0,
max: 50,
ticksFrequency: 5,
value: 0,
step: 1,
mode: 'fixed'
};
JQXElements.settings['SliderMaxWidthGroup1'] =
{
min: 1,
max: 120,
ticksFrequency: 20,
value: 40,
step: 1,
mode: 'fixed'
};
JQXElements.settings['SliderMaxWidthGroup2'] =
{
min: 1,
max: 120,
ticksFrequency: 20,
value: 40,
step: 1,
mode: 'fixed'
};
window.onload = function () {
var myChart = document.querySelector('jqx-chart');
var myCheckBoxes = document.querySelectorAll('jqx-check-box');
var mySliders = document.querySelectorAll('jqx-slider');
var chartInstance = myChart.getInstance();
var updateSeriesGroupsStacking = function () {
if (myCheckBoxes[0].val()) {
if (myCheckBoxes[2].val()) {
chartInstance.seriesGroups[0].type = 'stackedcolumn';
}
else {
chartInstance.seriesGroups[0].type = 'column';
}
}
if (myCheckBoxes[1].val()) {
if (myCheckBoxes[3].val()) {
chartInstance.seriesGroups[chartInstance.seriesGroups.length - 1].type = 'stackedcolumn';
}
else {
chartInstance.seriesGroups[chartInstance.seriesGroups.length - 1].type = 'column';
}
}
chartInstance.refresh();
};
var updateSeriesGroupsVisibility = function () {
chartInstance.seriesGroups = [];
console.log('updateSeriesGroupsVisibility!');
if (myCheckBoxes[0].val()) {
console.log('update 0!');
chartInstance.seriesGroups[0] =
{
type: 'column',
columnsGapPercent: 25,
seriesGapPercent: 10,
columnsMaxWidth: 40,
columnsMinWidth: 1,
series: [
{ dataField: 'Serie1', displayText: 'Serie1' },
{ dataField: 'Serie2', displayText: 'Serie2' },
{ dataField: 'Serie3', displayText: 'Serie3' }
]
};
}
if (myCheckBoxes[1].val()) {
console.log('update 1!');
var index = chartInstance.seriesGroups.length > 0 ? 1 : 0;
chartInstance.seriesGroups[index] =
{
type: 'column',
greyScale: true,
columnsGapPercent: 25,
seriesGapPercent: 10,
columnsMaxWidth: 40,
columnsMinWidth: 1,
series: [
{ dataField: 'Serie4', displayText: 'Serie4' },
{ dataField: 'Serie5', displayText: 'Serie5' },
{ dataField: 'Serie6', displayText: 'Serie6' }
]
};
}
updateSeriesGroupsStacking();
};
myCheckBoxes[0].addEventListener('change', function () { updateSeriesGroupsVisibility(); console.log('Visibility 0'); });
myCheckBoxes[1].addEventListener('change', function () { updateSeriesGroupsVisibility(); console.log('Visibility 1'); });
myCheckBoxes[2].addEventListener('change', function () { updateSeriesGroupsStacking(); console.log('Stacking 0'); });
myCheckBoxes[3].addEventListener('change', function () { updateSeriesGroupsStacking(); console.log('Stacking 0'); });
var sliderEventHandler = function (event, series, propName) {
var seriesGroups = chartInstance.seriesGroups;
if (seriesGroups.length !== 0) {
if (seriesGroups.length < 2) {
var serieDataField = seriesGroups[0].series[0].dataField;
var serie = serieDataField == 'Serie1' ? 0 : 1;
if (series !== serie) return;
seriesGroups[0][propName] = event.args.value;
} else {
seriesGroups[series][propName] = event.args.value;
}
chartInstance.refresh();
}
};
mySliders[0].addEventListener('change', function (event) { sliderEventHandler(event, 0, 'columnsGapPercent') });
mySliders[1].addEventListener('change', function (event) { sliderEventHandler(event, 1, 'columnsGapPercent') });
mySliders[2].addEventListener('change', function (event) { sliderEventHandler(event, 0, 'seriesGapPercent') });
mySliders[3].addEventListener('change', function (event) { sliderEventHandler(event, 1, 'seriesGapPercent') });
mySliders[4].addEventListener('change', function (event) { sliderEventHandler(event, 0, 'columnsMinWidth') });
mySliders[5].addEventListener('change', function (event) { sliderEventHandler(event, 1, 'columnsMinWidth') });
mySliders[6].addEventListener('change', function (event) { sliderEventHandler(event, 0, 'columnsMaxWidth') });
mySliders[7].addEventListener('change', function (event) { sliderEventHandler(event, 1, 'columnsMaxWidth') });
};
</script>
</head>
<body>
<jqx-chart settings="chartSettings" style="width:850px; height:500px"></jqx-chart>
<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>
<jqx-check-box settings="EnableSeriesGroupButton1">Visible</jqx-check-box>
</td>
<td>
<jqx-check-box settings="EnableSeriesGroupButton2">Visible</jqx-check-box>
</td>
</tr>
<tr>
<td>
<jqx-check-box settings="StackedSeriesButton1">Stacked</jqx-check-box>
</td>
<td>
<jqx-check-box settings="StackedSeriesButton2">Stacked</jqx-check-box>
</td>
</tr>
<tr>
<td>Space between columns / padding:<jqx-slider settings="SliderColumnsGapPercentGroup1"></jqx-slider></td>
<td>Space between columns / padding:<jqx-slider settings="SliderColumnsGapPercentGroup2"></jqx-slider></td>
</tr>
<tr>
<td>Space between series:<jqx-slider settings="SliderSeriesGapGroup1"></jqx-slider></td>
<td>Space between series:<jqx-slider settings="SliderSeriesGapGroup2"></jqx-slider></td>
</tr>
<tr>
<td>Minimum column width:<jqx-slider settings="SliderMinWidthGroup1"></jqx-slider></td>
<td>Minimum column width:<jqx-slider settings="SliderMinWidthGroup2"></jqx-slider></td>
</tr>
<tr>
<td>Maximum column width:<jqx-slider settings="SliderMaxWidthGroup1"></jqx-slider></td>
<td>Maximum column width:<jqx-slider settings="SliderMaxWidthGroup2"></jqx-slider></td>
</tr>
</table>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Custom element 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>
</body>
</html>