[RCWParticipant]

Slider code here:

http://www.jqwidgets.com/community/topic/zoom-in-scrolling-bubble-chart-or-bar-chart/

[RCWParticipant]

Hi wcogd,

Thank you for the compliments – the chart is really a tribute to the power, flexibility and ease of use of jQWidgets, although I am pleased with the slider and the Y-Axis auto formatting too.

Each chart is a complete change of data and the settings within a single chart instance. The “tabs” are in fact buttons that switch all the settings from spline to stacked column chart without ever re-renderring the div – just a chart ‘refresh’.

The slider I simply hacked up from the demo. It just changes the min/max values in the categoryAxis. Once the call for data is made, a data set is per country, the X-Axis is changed in the chart settings again, so as before all done client side and with a chart ‘refresh’.

Feel free to ask any questions, I’m sure I posted the slider code to the forum somewhere so I’ll have a look for it.

RCW

[RCWParticipant]

Hi Peter

That’s interesting. Yes it worked fine in a spline chart. I think I have my own work around from previous versions so I’ll have to try that if I decide to use version 3.2.1

You can view the graph here:

http://www.ons.gov.uk/ons/interactive/ppu-2012-v2/index.html

You’ll see if you click on a series symbol in the spline chart the data is output to the right from the click event !

RCW

[RCWParticipant]

Hi Dimitar,

Thought that was the case.

Could you put that on a wish list please as it’s really helpful to have a scale value at both ends of the graph.

After all the full length of the data series in line/spline graph is relevant so having a reference at both ends makes reading the data so much easier !

Thanks

RCW

[RCWParticipant]

Yes now see my mistake – I did create a global variable when I first had the problem but I’ve just realised I was using var every time I referenced the new instance having already initialised it globally so was just going round in circles.

Sorry Peter must be a Monday morning thing for me !

Thanks for your help

RCW

[RCWParticipant]

Peter I think we might be talking about different things here.

There is no problem changing the data source in the dataAdapter to get the new data into the dataFields.

And there is no doubt that var edataItem = dataAdapter.records[e.elementIndex]; works to get to an associated data item from the data held in the dataAdapter when the graph initially loads.

But change the data source for the dataAdapter and the records in the dataAdapter.records definitely do not change. I have tested and traced the sample code above and it absolutely does not alter the array held in dataAdapter.records, it sticks firmly to the array intially loaded.

Unless there is another way to clear the dataAdapter.records from memory (or the cache) then the sample I posted above won’t ever work for the Event function when you change data source, regardless of being able to access the dataAdapter with a new data source.

Don’t know if this is a bug or intentional, or if there is another way to refresh the dataAdapter.records array to the new data source ?

[RCWParticipant]

Sorry Peter, I’m still not too clear on your answer and I can’t get any options to work in the above sample code. I understand what my Update function is doing but still not sure on your first statement. The code below never updates the dataAdaptor within the Event function even though the Update function does:

var edataItem = dataAdapter.records[e.elementIndex];

From your answer I’m not clear whether to put this in my Event function:

 source.url = url;                    
var dataAdapter = new $.jqx.dataAdapter(source);                                  
$('#jqxChart').jqxChart({ source: dataAdapter});                    
$('#jqxChart').jqxChart('refresh');

How do I get the Events function dataAdapter to update in the same way as the Update function does. Sorry for not grasping what you’re saying and going on but nothing I have tried seems to be working.

RCW

[RCWParticipant]

Thanks for the quick response Peter.

If I understand your answer correctly I repeat the update function within the event function, however I’m having problems getting the new data source into the event dataAdapter variable. Also I wasn’t sure whether you meant local dataAdapter as in localdata:.

Would you mind posting the code within the event function to get the new data source.

Many thanks

RCW

[RCWParticipant]

Hi Peter,

I was aware of the API for the series in a line chart for width, color and opacity but I was mainly referring to the symbols:

It would be good to control a symbol formatting independently, so if I chose to use the circle symbol for example I could:

change it’s size: diameter/radius
select a fill: solid, opacity, gradient
control the border: color, thickness

This would give the line charts a better look.

[RCWParticipant]

Hi Dimitar,

This still gives me back the text from the data file rather than from the variable”years” on my categoryAxis

Do I need type: and baseUnit: set a particular way or is there something else I need to be doing ?

Thanks

RCW

[RCWParticipant]

I’ve worked it out:

assuming your data is in variable “data”

var dataItem =  data[e.elementIndex];
                           e.seriesGroup.series[0].dataField + ':  ' + dataItem.min + ' - '
                        + e.seriesGroup.series[1].dataField + ':  ' + dataItem.max + ' - '
                        + e.seriesGroup.series[2].dataField + ':  ' + dataItem.avg

[RCWParticipant]

Actually I have created a zoom method using a range slider to change the CategoryAxis and limit the years selected on a time series of data, I stripped down the range slider demo to do this:

Variables for categoryAxis minValue/maxValue:

var XminVal = 2012; // default
var XmaxVal = 2037; // default

Setup:

// setup the slider
    var theme = getDemoTheme();
    var yearsSlider = $('#yearsSlider'),
    resetButton = $('#resetButton');
    yearsSlider.jqxSlider({ theme: theme, height: 30, min: 2012, max: 2037, step: 5, ticksFrequency: 5, values: [2012, 2037], rangeSlider: true, mode: 'fixed', width: 240 });
    resetButton.jqxButton({ theme: theme, width: 100 });
    // initialise Slider
    selectYear.init(yearsSlider, resetButton);

Slider:

var selectYear = (function ($) {
                    // wait for the slider to move
                    var addEventListeners = function () {
                        $('.jqx-slider').on('change', function (event) {
                            handleSlide('years', event.args.value);
                            var XminVal;
                            var XmaxVal;
                            catAxis(event.args.value.rangeStart, event.args.value.rangeEnd);
                        });
                                                
                        // call reset slider
                        $('#resetButton').on('click', function () {
                            resetSlider();
                        });
                        // change the X-Axis
                         $('#cataxisButton').on('click', function () {
                            catAxis(XminVal, XmaxVal);
                         });
                    };
                    
                    // change the CATEGORY AXIS STUFF
                    var catAxis = function (XminVal,XmaxVal){
                    var categoryAxis = $('#jqxChart').jqxChart('categoryAxis');
                    // alert('Min value: ' + XminVal + ' - Max value: ' + XmaxVal);
                    categoryAxis.minValue = XminVal;
                    categoryAxis.maxValue = XmaxVal;
                    categoryAxis.unitInterval = 1;
                    $('#jqxChart').jqxChart('refresh');
                    };
                    // the reset function
                    var resetSlider = function () {
                        this.yearsSlider.jqxSlider('setValue', [this.yearsSlider.jqxSlider('min'), this.yearsSlider.jqxSlider('max')]);
                        var categoryAxis = $('#jqxChart').jqxChart('categoryAxis');
                        categoryAxis.minValue = 2012;
                        categoryAxis.maxValue = 2037;
                        categoryAxis.unitInterval = 1;
                        $('#jqxChart').jqxChart('refresh');
                    };
                    // change label & value on slider
                    var handleSlide = function (option, value) {
                        setLabelValue('yearsSlider', option, value);
                    };
                   // set the labels & value on slider
                    var setLabelValue = function (yearsSlider, option, value) {   
                        var XmaxVal = document.getElementById('yearsMax').innerHTML = value.rangeEnd;
                        var XminVal = document.getElementById('yearsMin').innerHTML = value.rangeStart;
                            if(XminVal == XmaxVal) {
                            alert("Can't have the same start and end years");
                            resetSlider();
                            }
                    };
                    // Set variables
                    var initSliders = function (yearsSlider, resetButton) {
                        this.yearsSlider = yearsSlider;
                        this.resetButton = resetButton;
                    };
                    // Set initial load from variables
                    return {
                        init: function (yearsSlider,  resetButton) {
                                initSliders(yearsSlider, resetButton);
                                addEventListeners();
                                setLabelValue(yearsSlider, 'years', yearsSlider.jqxSlider('value'));
                        }
                    };

Markup for Slider:

<div id="jqx-widget">
     <div id="main-container" class="main-container jqx-rc-all">
            <div id="options" class="options jqx-rc-all">
                <div id="options-container" class="options-container">
                    <div class="label">YEARS</div>
                    <div class="options-value">
                        <div id="yearsMin"></div>
                        <div id="yearsTo">To</div>        
                        <div id="yearsMax"></div>
                    </div>
                    <br />
                   <div id='yearsSlider'></div>
                    <input type="button" value="Reset" id="resetButton" class="resetButton" />
                </div>
            </div>
            <div style="clear: both;">
            </div>
        </div>
        </div>

Also able to amend valueAxis using similar principal and by getting minimum & maximum values from data.

[RCWParticipant]

Thanks Dimitar, appreciate you providing this code !

RCW

[RCWParticipant]

Many Thanks Dimitar.

Also found that if I have a variable to hold the series as above I can use this to remove them :

series.splice(0,3);

Oddly using a push() method to load a series:

myseries.push({dataField:'Running', displayText: 'Running'}); 

Causes two data series for ‘Running’ to load ?

RCW

[RCWParticipant]

OK thanks for letting me know Peter, just wanted to clarify it’s not my issue. Is there a workaround I can do as a temporary fix ?

Should also mention I have another small issue with the toolTip that maybe related – I’ll post a new topic separately later.

Any timeframe on the next version update ?

Regards

RCW

[Author]

Posts