jQuery UI Widgets › Forums › Chart › Update Bands
Tagged: chart, javascript chart, jquery chart, jqwidgets chart
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 6 years, 2 months ago.
-
AuthorUpdate Bands Posts
-
Hello,
I am trying to update the bands on a chart based on the position a range selector and it does not seem to be working ($chartmin and $chartmax). I have worked with the chart “update” method several times with no issues updating the values, however, I am not sure if it updates the setting which is where the bands are defined. Is it possible to update the band values through the update method? Code below
<script type=’text/javascript’>
$(document).ready(function () {
/* input data */
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Time’ },
{ name: ‘4/1/2018’ },
{ name: ‘4/2/2018’ },
{ name: ‘4/3/2018’ },
{ name: ‘4/4/2018’ },
],
url: ‘data/Data2.csv’,
};/* data adapter settings */
var dataAdapter = new $.jqx.dataAdapter(
source,
{
async: false,
autoBind: true,
loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); }
});// create jqxRangeSelector.
$(“#rangeSelector”).jqxRangeSelector(
{
width: 750,
height: 100,
min: 0,
max: 100,
range: { from: 10, to: 30 },
majorTicksInterval: 10,
minorTicksInterval: 1
});
// create Set Range and Get Range buttons.
$(“#setSelection”).jqxButton();
$(“#getSelection”).jqxButton();$(“#setSelection”).click(function () {
// Set Range.
$(“#rangeSelector”).jqxRangeSelector(“setRange”, 10, 30);
});
$(“#getSelection”).click(function () {
// Get Range.
var range = $(“#rangeSelector”).jqxRangeSelector(“getRange”);
alert(“The selected range is from ” + range.from + ” to ” + range.to + ‘. chartmin = ‘ + $chartmin + ‘ and chartmax = ‘ + $chartmax);
});var range = $(‘#rangeSelector’).jqxRangeSelector(‘getRange’);
$chartmin = range.from;
$chartmax = range.to;$(‘#rangeSelector’).on(‘change’, function () {
var range = $(‘#rangeSelector’).jqxRangeSelector(‘getRange’);
$chartmin = range.from;
$chartmax = range.to;
$(‘#chartContainer’).jqxChart(“update”);
});/* chart settings */
var chartSettings = {
source: dataAdapter,
title: “Energy Demand (kW)”,
description: “Day-by-Day Energy Demand”,
padding: {
left: 5,
top: 5,
right: 5,
bottom: 5
},
titlePadding: {
left: 5,
top: 5,
right: 5,
bottom: 5
},
enableAnimations: false,
xAxis: {
dataField: ‘Time’,
valuesOnTicks: true,
minValue: 1,
maxValue: 96,
unitInterval: 4,
bands:
[
//{ minValue: 33, maxValue: 65, color: ‘#00FF00’, opacity: 0.15 },
//{ minValue: 65, maxValue: 85, color: ‘#0000FF’, opacity: 0.20 },
{ minValue: $chartmin, maxValue: $chartmax, color: ‘#FF0000’, opacity: 0.5}
]
},
valueAxis: {
minValue: 0,
valuesOnTicks: true
},
seriesGroups: [
{
type: “line”,
series: [
{
dataField: “4/1/2018”
},
{
dataField: “4/2/2018”
},
{
dataField: “4/3/2018”
},
{
dataField: “4/4/2018”
}
],}
]}
/* create chart in the container element */
$(‘#chartContainer’).jqxChart(chartSettings);
});</script>
Hello alexpettigrew1,
Please, take a look at this example.
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.