jqx chart using jqx data adapter with paramteres

[atomicParticipant]

Hi guys,
I want to create jqx chart depending on selected values from two jqx drop down lists.
It works with this code. But after I choose different value from one of the drop down lists it takes a lot of time before even GET is send to the server for the data and it says that script is unresponsive jqxChart.js. After some time it will render chart. I am wondering if I am using the correct way. My data have 8760 records and I am ploting line chart.

       var srcYears = ["2010","2012","2014"];
	$("#ddlYears").jqxDropDownList({
      	source: srcYears,
        selectedIndex: 0, 
        theme: 'fresh',
        width: '100px'
        });
        
        var srcTech = ["Solar","Wind","Demand"];
        $("#ddlTech").jqxDropDownList({
      	    source: srcTech,
            selectedIndex: 0, 
            theme: 'fresh',
            width: '100px'
        });
         
        $("#btnChartGenerate").jqxButton({width: '200',theme: 'fresh'});

       $('#btnChartGenerate').on('click', function () {
            var year = $("#ddlYears").jqxDropDownList('getSelectedItem').value; 
            var tech = $("#ddlTech").jqxDropDownList('getSelectedItem').value;
             
            var myURL2 ='phase2/HourlyAnalysis_data.php?e=3&year='+year+'&tech='+tech;
            var srcChart =
            {
                url: myURL2,
                root: 'data',
                datatype: 'json',
                cache: false,
                async: true,
            };   
            var daChart = new $.jqx.dataAdapter(srcChart);         
                    
            var settings = {
             title: "Input data",
             description: "",
             padding: {
                 left: 5,
                 top: 5,
                 right: 5,
                 bottom: 5
             },
             titlePadding: {
                 left: 0,
                 top: 0,
                 right: 0,
                 bottom: 10
             },
             source: daChart,
             enableAnimations: true,
             categoryAxis: {
                 dataField: 'hour',
                 description: '',
                 showGridLines: true,
                 showTickMarks: true
             },
             seriesGroups: [{
                 type: 'line',
                 valueAxis: {
                     description: 'Value',
                     logarithmicScale: true,
                     logarithmicScaleBase: 2,
                     unitInterval: 1,
                     tickMarksInterval: 1,
                     gridLinesInterval: 1,
                     formatSettings: {
                         decimalPlaces: 3
                     },
        
                     horizontalTextAlignment: 'right'
                 },
                 series: [{
                     dataField: 'value',
                     displayText: 'Hour Value'
                 }]
             }]
         }
            $('#jqxChart').jqxChart(settings);
       });       

I am creating everything in on click event of jqx button. Is there some other way??
this is sample of my data if you choose year =2010 and tech = Solar and I have 8760 values for H, I will show only some of them

{"data":[
    {
        "hour": "H1",
        "value": 36075.921875
    },
    {
        "hour": "H2",
        "value": 35573.53125
    },
    {
        "hour": "H3",
        "value": 35406.421875
    },
    {
        "hour": "H4",
        "value": 35267.37890625
    },
    {
        "hour": "H5",
        "value": 35266.16796875
    },
    {
        "hour": "H6",
        "value": 35776.8046875
......

Thanks a lot

[HristoParticipant]

Hello atomic,

You could set url address and after that call dataBind() method from jqxDataAdapter, and after this update() method of the Chart.
Please take a look this example: http://jsfiddle.net/txhi/gam1sypw/ (analogically like localdata in the example)
This demo in ‘Java Integration’ section would be helpful:
http://jspexamples.jqwidgets.com/examples/chart.htm?arctic

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts