jQWidgets Forums

This topic contains 7 replies, has 2 voices, and was last updated by RCW 11 years, 6 months ago.

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

Author

Event output with change of data Posts

October 21, 2013 at 11:49 am Event output with change of data #31107

RCW

Participant

I have a chart that loads a different data file via a button group. I also have an event that outputs the data on mouseover or click.

The event outputs the all the data in the series not just the item clicked or mouseovered using:

var edataItem = dataAdapter.records[e.elementIndex];
                      var datamax =  edataItem.max;
                      var datamin = edataItem.min;
                      var datamonth = edataItem.month;

to get to the other items in the data series.

However there is a problem: when I change the data source (a json text file) the new data updates on the graph and the tooltip and using e.elementValue but the data accessed using the dataAdapter.records[e.elementIndex] method continues to use the previous data and not the new data file that is uploaded.

I’ve included a sample code below using the Geneva weather graph as an example – I added a data file for Zurich by copying the Geneva file and changing some of the data values.

It seems the dataAdapter in the event function is keeping hold of the previous data for some reason even though in debug I can see it has changed the source. I’ve looked at using dataAdapter.dataBind() but can’t get that to work. Am I using the wrong approach to update the dataAdapter for the event function ?

Thanks

RCW

Sample Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title id='Description'>DATA ADAPTER CHANGE</title>
    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery/jquery-1.10.2.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/jqxchart.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttongroup.js"></script>
    <style type="text/css">
    body {margin:50px; font-family:verdana}
    #countrySet{float:left;}
    .output{float:left;font-size:11px;margin-left:50px;}
    </style>
    <script type="text/javascript">
         $(document).ready(function () {
            var ctyTitle = "Geneva";
            var groups = $('#jqxChart').jqxChart('seriesGroups');
            $("#countrySet").jqxButtonGroup({ mode: 'radio',enableHover: true });
            $("#countrySet").jqxButtonGroup('setSelection', 0);
            $("#countrySet").on('buttonclick', function(event) {
                var clickedButton = event.args.button;
                var country = clickedButton[0].id
                $("#ctyTitle").text("Clicked: " + country);
                if (country == "geneva") {
                    url = 'data/geneva.txt';
                    ctyTitle = "GENEVA";
                    update(url);
                }
                else if (country == "zurich") {
                    url = 'data/zurich.txt';
                    ctyTitle = "ZURICH";
                    update(url);
                }
                });
               
                function update(url) {
                    source.url = url;
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    $('.countryVal').text(ctyTitle);
                    $('#jqxChart').jqxChart({ source: dataAdapter});
                    $('#jqxChart').jqxChart('refresh');
                };   
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'month' },
                    { name: 'min' },
                    { name: 'max' },
                ],
                url: 'data/geneva.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            // prepare jqxChart settings
            var settings = {
                title: "Weather in Geneva, Switzerland",
                description: "Climatological Information about Geneva",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            mouseover: EventHandler,
                            click: EventHandler,
                            //useGradient: false,
                            valueAxis:
                            {
                                unitInterval: 5,
                                displayValueAxis: true,
                                description: 'Temperature [C]',
                                //descriptionClass: 'css-class-name',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'max', displayText: 'Max Temperature'},
                                    { dataField: 'min', displayText: 'Min Temperature'}
                                ]
                        }
                    ]
            };   
            function EventHandler(e) {  
                      var edataItem = dataAdapter.records[e.elementIndex];
                      var datamax =  edataItem.max;
                      var datamin = edataItem.min;
                      var datamonth = edataItem.month;
                      
                      var dataF = e.serie.dataField;
                      var dval = e.elementValue;
                      //var eventData = '<div><b>Last Event: </b>' 
                      //+ e.event + '<b>, DataField: </b>'
                      //+ e.serie.dataField + '<b>, Value: </b>' 
                      //+ e.elementValue + "</div>";               
                      //$('#eventText').html(eventData); 
                      $('#data').text(dataF); 
                      $('#dval').text(dval); 
                      $('#dmin').text(datamin); 
                      $('#dmax').text(datamax); 
                      $('#dmth').text(datamonth); 
                        
                   };
                  
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body>
    <div id='jqxChart' style="width:680px; height:400px"> </div>
    <br />
    SELECT COUNTRY:
    <br />
    <div id="countrySet">
            <button id="geneva">GENEVA</button>
            <button id="zurich">ZURICH</button>     
   
    </div>
    
    <!--  <div id='eventText' style="width:600px; height: 30px"/> -->
   
    <div class="output">
      NORMAL DATA:
      <div id='data'></div>
      <div id='dval'></div>
      OFFSET DATA:
      <div id='dmin'></div>
      <div id='dmax'></div>
      & MONTH:
      <div id='dmth'></div>
    </div>
      
</body>
</html>

October 21, 2013 at 11:59 am Event output with change of data #31110

Peter Stoev

Keymaster

Hi rcwebdev,

You initialize a local dataAdapter variable to update your data source and another variable to display the event details.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 21, 2013 at 1:15 pm Event output with change of data #31115

RCW

Participant

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

October 21, 2013 at 1:19 pm Event output with change of data #31116

Peter Stoev

Keymaster

Hi rcwebdev,

Your “update” function creates a new instance of jqxDataAdater with the same name(dataAdapter) as the dataAdapter’s name used in the EventHandler function i.e you have same variable name for different instances of jqxDataAdapter used in different contexts.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 21, 2013 at 1:47 pm Event output with change of data #31119

RCW

Participant

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

October 21, 2013 at 7:28 pm Event output with change of data #31128

RCW

Participant

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 ?

October 22, 2013 at 4:06 am Event output with change of data #31148

Peter Stoev

Keymaster

Hi rcwebdev,

As I already wrote in the previous posts, in your code you use 2 different instances of jqxDataAdapter and that is why you get different results from them. The “function update” creates a new jqxDataAdapter instance and that is not the same instance that you use in the event handler. I suggest you to take a look at some tutorials about variable scope in JavaScript before proceeding with that code or just use one global dataAdapter variable in your code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 22, 2013 at 10:42 am Event output with change of data #31178

RCW

Participant

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

Author

Posts

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

You must be logged in to reply to this topic.