jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
250 lines (229 loc) • 11.8 kB
HTML
<html>
<head>
<title id='Description'>JavaScript Chart Axis settings example</title>
<meta name="description" content="This is an example of JavaScript charts axis settings." />
<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 () {
var data = [
{ year: 2004, price: 0.1437 },
{ year: 2005, price: 0.1470 },
{ year: 2006, price: 0.1510 },
{ year: 2007, price: 0.1605 },
{ year: 2008, price: 0.1647 },
{ year: 2009, price: 0.1736 },
{ year: 2010, price: 0.1766 },
{ year: 2011, price: 0.1902 },
{ year: 2012, price: 0.1978 },
{ year: 2017, price: 0.2113 },
{ year: 2018, price: 0.2178 }
];
var settings = {
title: "Electricity prices in Europe between 2004 and 2018",
description: "Source: Eurostat",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 15, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: data,
xAxis:
{
padding: { top: 0, bottom: 0 },
labels: { angle: 0 },
dataField: 'year',
displayText: 'Year',
valuesOnTicks: false,
gridLines: { color: '#CDCDCD'},
tickMarks: { color: '#CDCDCD'}
},
colorScheme: 'scheme04',
valueAxis:
{
position: 'right',
padding: { left: 0, right: 0 },
title: { text: '<br><br>Price EUR / kWh'},
labels: {
visible: true,
angle: 0,
formatSettings: { decimalPlaces: 4, sufix: ' €' }
},
tickMarks: {
visible: true,
//dashStyle: '2,2',
color: '#CDCDCD',
size: 5
},
gridLines: {
visible: true,
color: '#CDCDCD',
//dashStyle: '2,2'
},
alternatingBackgroundColor: '#EFEFEF',
alternatingBackgroundColor2: '#CECECE',
alternatingBackgroundOpacity: 0.2
},
seriesGroups:
[
{
type: 'stepline',
series: [
{ formatSettings: { decimalPlaces: 4 }, dataField: 'price', displayText: 'Price per kWh', showLabels: true, symbolType: 'circle' }
]
}
]
};
$('#chartContainer').jqxChart(settings);
var chartInstance = $('#chartContainer').jqxChart('getInstance');
chartInstance.enableAnimations = false;
// valueAxis left padding change handler
$('#sliderValueAxisLeftPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
settings.valueAxis.padding.left = event.args.value;
chartInstance.refresh();
});
// valueAxis right padding change handler
$('#sliderValueAxisRightPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
settings.valueAxis.padding.right = event.args.value;
chartInstance.refresh();
});
// valueAxis labels angle change handler
$('#sliderValueAxisAngle').jqxSlider({ min: 0, max: 360, ticksFrequency: 30, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
settings.valueAxis.labels.angle = event.args.value;
chartInstance.refresh();
});
// xAxis top padding change handler
$('#sliderXAxisTopPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
settings.xAxis.padding.top = event.args.value;
chartInstance.refresh();
});
// xAxis bottom padding change handler
$('#sliderXAxisBottomPadding').jqxSlider({ min: 0, max: 50, ticksFrequency: 5, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
settings.xAxis.padding.bottom = event.args.value;
chartInstance.refresh();
});
// xAxis labels angle change handler
$('#sliderXAxisAngle').jqxSlider({ min: 0, max: 360, ticksFrequency: 30, value: 0, step: 1, mode: 'fixed', width: '250px' })
.on('change', function (event) {
settings.xAxis.labels.angle = event.args.value;
chartInstance.refresh();
});
// valueAxis left position selection
$("#btnLeft").jqxRadioButton({ width: 60, height: 25, checked: false, groupName: 'valueAxis'}).
on('change', function (event) {
if (event.args.checked)
{
settings.valueAxis.position = 'left';
chartInstance.refresh();
}
});
// valueAxis right position selection
$("#btnRight").jqxRadioButton({ width: 60, height: 25, checked: true, groupName: 'valueAxis'}).
on('change', function (event) {
if (event.args.checked)
{
settings.valueAxis.position = 'right';
chartInstance.refresh();
}
});
// xAxis top position selection
$("#btnTop").jqxRadioButton({ width: 60, height: 25, checked: false, groupName: 'xAxis'}).
on('change', function (event) {
if (event.args.checked)
{
settings.xAxis.position = 'top';
chartInstance.refresh();
}
});
// xAxis bottom position selection
$("#btnBottom").jqxRadioButton({ width: 60, height: 25, checked: true, groupName: 'xAxis'}).
on('change', function (event) {
if (event.args.checked)
{
settings.xAxis.position = 'bottom';
chartInstance.refresh();
}
});
$("#btnValueAxisFlip").jqxCheckBox({ height: 25, hasThreeStates: false, checked: false});
$("#btnValueAxisFlip").on('change', function (event) {
settings.valueAxis.flip = event.args.checked;
chartInstance.refresh();
});
$("#btnXAxisFlip").jqxCheckBox({ height: 25, hasThreeStates: false, checked: false});
$("#btnXAxisFlip").on('change', function (event) {
settings.xAxis.flip = event.args.checked;
chartInstance.refresh();
});
});
</script>
</head>
<body style="font-family: Verdana; font-size: 13px;">
<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>Value axis properties:</b</td>
<td><b>xAxis properties:</b></td>
</tr>
<tr>
<td>Left padding:<div id="sliderValueAxisLeftPadding"></div></td>
<td>Top padding:<div id="sliderXAxisTopPadding"></div></td>
</tr>
<tr>
<td>Right padding:<div id="sliderValueAxisRightPadding"></div></td>
<td>Bottom padding:<div id="sliderXAxisBottomPadding"></div></td>
</tr>
<tr>
<td>Labels angle:<div id="sliderValueAxisAngle"></div></td>
<td>Labels angle:<div id="sliderXAxisAngle"></div></td>
</tr>
<tr>
<td>Position:
<table><tr>
<td><div style='margin-left: 10px;' id="btnLeft">Left</div></td>
<td><div style='margin-left: 10px;' id="btnRight">Right</div></td>
</tr></table>
</td>
<td>Position:
<table><tr>
<td><div style='margin-left: 10px;' id="btnTop">Top</div></td>
<td><div style='margin-left: 10px;' id="btnBottom">Bottom</div></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<div id="btnValueAxisFlip">Flip valueAxis positions</div>
</td>
<td>
<div id="btnXAxisFlip">Flip xAxis positions</div>
</td>
</tr>
</table>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript charts axis settings. You can see how to change the padding, labels angle, top padding, bottom padding and left and right position of the chart.
</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>