jQuery UI Widgets Forums Chart Update Bands

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Update Bands Posts
  • Update Bands #101487

    alexpettigrew1
    Participant

    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>

    Update Bands #101529

    Hristo
    Participant

    Hello alexpettigrew1,

    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.