jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
284 lines (236 loc) • 12 kB
HTML
<html lang="en">
<head>
<title id='Description'>Chart Custom Element AxisCustomOffsets</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 offsets in Custom Element Chart" />
<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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
var sampleData =
[
{ a: 0.1535, b: 0.5 },
{ a: 0.48, b: 20.5 },
{ a: 10, b: 60 },
{ a: 100, b: 80 },
{ a: 200, b: 90 },
{ a: 245.11, b: 100.13 },
{ a: 300.13, b: 150.13 },
{ a: 340, b: 200 }
];
JQXElements.settings['chartContainer'] =
{
title: 'Custom labels, grid lines and tick marks offsets',
description: ' ',
padding: { left: 5, top: 5, right: 15, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: sampleData,
enableAnimations: false,
xAxis:
{
dataField: 'a',
logarithmicScale: true,
logarithmicScaleBase: 2,
labels: {
visible: true,
custom: [{ value: 10 }, { value: 20 }]
},
gridLines:
{
visible: true,
custom: [{ value: 10 }, { value: 20 }]
},
tickMarks:
{
visible: true,
custom: [{ value: 10 }, { value: 20 }]
},
flip: false
},
valueAxis: {
logarithmicScale: true,
logarithmicScaleBase: 2,
title: { text: '' },
labels: {
horizontalAlignment: 'right',
custom: [{ value: 10 }, { value: 20 }]
},
gridLines: {
custom: [{ value: 10 }, { value: 20 }]
},
tickMarks: {
custom: [{ value: 10 }, { value: 20 }]
},
flip: false
},
seriesGroups:
[
{
type: 'scatter',
series: [
{ dataField: 'a', displayText: 'A', symbolType: 'diamond', symbolSize: 10 },
{ dataField: 'b', displayText: 'B', symbolType: 'triangle_up', symbolSize: 10 }
]
}
]
};
var visibilityOptions = [true, false, 'custom'];
JQXElements.settings['dropDownLabelsVisibility_xAxis'] =
{
source: visibilityOptions, selectedIndex: 0, dropDownHeight: 80
};
JQXElements.settings['dropDownLabelsVisibility_valueAxis'] =
{
source: visibilityOptions, selectedIndex: 0, dropDownHeight: 80
};
JQXElements.settings['listboxCustomPositions_xAxis'] =
{
source: [10, 20]
};
JQXElements.settings['listboxCustomPositions_valueAxis'] =
{
source: [10, 20]
};
window.onload = function () {
var myChart = document.querySelector('jqx-chart');
var myDropDownList = document.querySelectorAll('jqx-drop-down-list');
var myListBox = document.querySelectorAll('jqx-list-box');
var myInput = document.querySelectorAll('jqx-input');
var myButtons = document.querySelectorAll('jqx-button');
var chartInstance = myChart.getInstance();
var addAxisSettingsHandlers = function (xAxis, valueAxis) {
myDropDownList[0].addEventListener('change', function (event) {
var value = event.args.item.value;
chartInstance.xAxis.labels.visible = value == 'false' ? false : value;
chartInstance.xAxis.gridLines.visible = value == 'false' ? false : value;
chartInstance.xAxis.tickMarks.visible = value == 'false' ? false : value;
chartInstance.refresh();
});
myDropDownList[1].addEventListener('change', function(event) {
var value = event.args.item.value;
chartInstance.valueAxis.labels.visible = value == 'false' ? false : value;
chartInstance.valueAxis.gridLines.visible = value == 'false' ? false : value;
chartInstance.valueAxis.tickMarks.visible = value == 'false' ? false : value;
chartInstance.refresh();
});
myButtons[0].addEventListener('click', function () {
var value = myInput[0].val();
if (!isNaN(parseFloat(value))) {
myListBox[0].addItem(parseFloat(value));
var items = myListBox[0].getItems();
var customOffsets = [];
for (var i = 0; i < items.length; i++)
customOffsets.push({ value: parseFloat(items[i].value) });
chartInstance.xAxis.labels.custom = customOffsets;
chartInstance.xAxis.gridLines.custom = customOffsets;
chartInstance.xAxis.tickMarks.custom = customOffsets;
chartInstance.refresh();
}
});
myButtons[1].addEventListener('click', function () {
var idx = myListBox[0].getSelectedIndex();
if (idx == -1)
return;
myListBox[0].removeAt(idx);
var items = myListBox[0].getItems();
var customOffsets = [];
for (var i = 0; i < items.length; i++) {
customOffsets.push({ value: parseFloat(items[i].value) });
}
myChart.xAxis.labels.custom = customOffsets;
myChart.xAxis.gridLines.custom = customOffsets;
myChart.xAxis.tickMarks.custom = customOffsets;
myChart.refresh();
});
myButtons[2].addEventListener('click', function () {
var value = myInput[1].val();
if (!isNaN(parseFloat(value))) {
myListBox[1].addItem(parseFloat(value));
var items = myListBox[1].getItems();
var customOffsets = [];
for (var i = 0; i < items.length; i++) {
customOffsets.push({ value: parseFloat(items[i].value) });
}
chartInstance.valueAxis.labels.custom = customOffsets;
chartInstance.valueAxis.gridLines.custom = customOffsets;
chartInstance.valueAxis.tickMarks.custom = customOffsets;
chartInstance.refresh();
}
});
myButtons[3].addEventListener('click', function () {
var idx = myListBox[1].getSelectedIndex();
if (idx == -1)
return;
myListBox[1].removeAt(idx);
var items = myListBox[1].getItems();
var customOffsets = [];
for (var i = 0; i < items.length; i++) {
customOffsets.push({ value: parseFloat(items[i].value) });
}
myChart.valueAxis.labels.custom = customOffsets;
myChart.valueAxis.gridLines.custom = customOffsets;
myChart.valueAxis.tickMarks.custom = customOffsets;
myChart.refresh();
});
}
addAxisSettingsHandlers();
}
</script>
</head>
<body>
<jqx-chart settings='chartContainer' style="width: 800px; height: 500px;"></jqx-chart>
<table>
<tr>
<td style="width:300px;"><b>xAxis settings</b></td>
<td style="width:300px;"><b>valueAxis settings</b></td>
</tr>
<tr>
<td>
<p style="font-family: Verdana; font-size: 12px;">Label, tick marks & grid lines visibility:</p>
<jqx-drop-down-list settings="dropDownLabelsVisibility_xAxis"></jqx-drop-down-list>
</td>
<td>
<p style="font-family: Verdana; font-size: 12px;">Label, tick marks & grid lines visibility:</p>
<jqx-drop-down-list settings="dropDownLabelsVisibility_valueAxis"></jqx-drop-down-list>
</td>
</tr>
<tr>
<td>
<p style="font-family: Verdana; font-size: 12px;">Custom positions:</p>
<jqx-input style="width: 50px"></jqx-input>
<jqx-button>Add</jqx-button>
<jqx-button>Remove</jqx-button>
<jqx-list-box style="margin-top:10px" settings="listboxCustomPositions_xAxis"></jqx-list-box>
</td>
<td>
<p style="font-family: Verdana; font-size: 12px;">Custom positions:</p>
<jqx-input style="width: 50px"></jqx-input>
<jqx-button>Add</jqx-button>
<jqx-button>Remove</jqx-button>
<jqx-list-box style="margin-top:10px" settings="listboxCustomPositions_valueAxis"></jqx-list-box>
</td>
</tr>
</table>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Custom element chart demonstrating how to add labels, tick marks and grid lines at custom offsets.
</div>
</body>
</html>