Chart with grid – Filtering

[sathiyaseelan8Participant]

i unable to filter the rows in grid. it using JSON data type. Need help.

 <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
			var source =
            {
                datatype: "json",
                datafields: [
					{ name: 'Year' },
					{ name: 'Titles' },
					{ name: 'Copies' }
                ],
                root: "data",
				url: 'sql/cataloguing-01.php'

            };
        
            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: "Collection Development",
                description: "(By Year)",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                xAxis:
                {
                    dataField: 'Year',
					gridLines: { visible: true }
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                visible: true,
                                unitInterval: 1000,
                                title: { text: 'Unit(s)'}
                            },
						series: [
                        	{ dataField: 'Titles' , displayText: 'Titles' },
							{ dataField: 'Copies' , displayText: 'Copies' }
							
                            ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
           
		     var adapter = new $.jqx.dataAdapter({
                datafields: [
					{ name: "Year" },
					{ name: "Titles" },
					{ name: "Copies" }
                ],
                localdata: dataAdapter,
                datatype: 'json',
				url: 'sql/cataloguing-01.php'
            });
            $("#jqxGrid").jqxGrid({
                width: 848,
                height: 232,
                filterable: true,
                showfilterrow: true,
                source: dataAdapter,
                columns:
                [
                  	{ text: "Year",width: '20%', dataField: 'Year', filteritems: ["2015","2014","2013","2012","2011","2010","2009","2008","2007","2006","2005","2004","2003","2002"], filtertype: "checkedlist" },
					{ text: "Titles",width: '40%', dataField: 'Titles' },
					{ text: "Copies",width: '40%', dataField: 'Copies' }
                ]
            });
            $("#jqxGrid").on('filter', function () {
				
                var rows = $("#jqxGrid").jqxGrid('getrows');
				alert(rows);
                var chart = $('#jqxChart').jqxChart('getInstance');
                chart.source = rows;
                chart.update();
            });
        });
    </script>

[DimitarParticipant]

Hello sathiyaseelan8,

Please specify if there are any errors thrown in your browser’s console when trying to filter the grid. If not, please share some of your JSON data so that we can test your example and determine why the issue occurs.

Best Regards,
Dimitar

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

[Author]

Posts