jQWidgets Forums

Tagged: fusion charts, grid, row selection

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

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

Author

Problem with fusion Charts Posts

September 29, 2013 at 7:58 am Problem with fusion Charts #29782

arikbd

Participant

Hello,

We are exploring several technologies to integrate with our solution and have problem when using both jQWidgets (I have problem with the grid control) and Fusion Charts.

When I put both grid control and chart in the the same page I cannot catch row selection event.

Attached is an example of the problem

Thanks,

Arik

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    
    <script type="text/javascript" src="Charts/FusionCharts.js"></script>
    
    <script type="text/javascript" src="js/jquery-1.10.2.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="js/gettheme.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            
            $("#jqxexpander").jqxExpander({ width: '100%', height: 500 });
            
            var theme = getDemoTheme();
            var source2 =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName', type: 'string' },
                    { name: 'name', type: 'string' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode', type: 'string' }
                ],
                sortcolumn: 'countryName',
                sortdirection: 'asc',                
                url: "http://ws.geonames.org/searchJSON"
            };
            var dataAdapter2 = new $.jqx.dataAdapter(source2,
                {
                    formatData: function (data) {
                        $.extend(data, {
                            featureClass: "P",
                            style: "full",
                            maxRows: 50
                        });
                        return data;
                    }
                }
            );
            $("#g2").jqxGrid(
                    {
                    	width: 500, height: 350,
                        source: dataAdapter2,
                        altrows: true,	
                        theme: theme,
                        sortable: true,
                        filterable: true,
                        columns: [
                            { text: 'Country Name', datafield: 'countryName', width: 200 },
                            { text: 'City', datafield: 'name', width: 170 },
                            { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170, filterable: false },
                            { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                        ]
                    });
            $("#g2").jqxGrid('selectionmode', 'singlerow');
			alert('selectring row 2');
			$("#g2").jqxGrid('selectrow', 2);
			alert('register rowselect handler');
			$("#g2").on('rowselect', function (event) {
			   alert('Row: ' + event.args.rowindex);
			});
			alert('register row unselect handler');
			$("#g2").on('rowunselect', function (event) {
		    	alert('Unselect: ' + event.args.rowindex);
			});
            
        });
                
        
        function load() {
            // prepare the data
            
            var theme = getDemoTheme();
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName', type: 'string' },
                    { name: 'name', type: 'string' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode', type: 'string' }
                ],
                sortcolumn: 'countryName',
                sortdirection: 'asc',                
                url: "http://ws.geonames.org/searchJSON"
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        $.extend(data, {
                            featureClass: "P",
                            style: "full",
                            maxRows: 50
                        });
                        return data;
                    }
                }
            );
            
            $("#nodeobjects_grid").jqxGrid(
                    {
                    	width: '100%', height: 300,
                        source: dataAdapter,
                        theme: theme,
                        altrows: true,
                        sortable: true,
                        pageable: true,
                        autoheight: true,
                        columns: [
                            { text: 'Country Name', datafield: 'countryName', width: 200 },
                            { text: 'City', datafield: 'name', width: 170 },
                            { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                            { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                        ]
                    });
            
            $("#nodeobjects_grid").on('rowselect', function (event) {
 			   alert('Row: ' + event.args.rowindex);
 			});            
            
        }
    </script>
</head>
<body class='default'>
    <div>
     <button type="button" onClick="load();">Click Me!</button>
    </div>
    <div id="jqxexpander">
      <div>Header</div>
      <div>
        <table>
        <tr style="height:60px;">
           <td>Content 1</td><td>Content 2</td>
        </tr>
        <tr style="height:60px;">
	        <td colspan="2">
			    <div id='nodeobjects' style="font-size: 13px; font-family: Verdana; float: left;">
			        <div id="nodeobjects_grid"></div>
			    </div>
		    </td>
	    </tr>
	    </table>
	  </div>
    </div>
    <div id="g2div" style="font-size: 13px; font-family: Verdana; float: left;">
       2nd Grid
       <div id="g2"></div>
    </div>
    <div id="AlertsSeverityChartDiv" style="margin-left: 10px; margin-top: 10px;" title=""></div>
        
    <script type="text/javascript">
						
         
      var myChart2 = new FusionCharts( "Bar2D", "AlertsSeverityChart", "180", "140", "0" );
      //myChart2.setXMLUrl("Data2.xml");
      myChart2.setXMLData("<chart caption='' subCaption='' yAxisName='' xAxisName='' " +
      		            "alternateVGridColor='AFD8F8' baseFontColor='114B78' " + 
      	                "toolTipBorderColor='114B78' toolTipBgColor='E7EFF6' plotBorderDashed='0' " +
      	                "plotBorderDashLen='2' plotBorderDashGap='2' useRoundEdges='1' showBorder='0' " +
      	                "showYAxisValues='0' showAxisValues='0' >" +
      	                "<set label='Critical' value='23' color='741BE0'/>" +
      	                "<set label='Error' value='12' color='F73823'/>" +
      	                "<set label='Warning' value='17' color='FAFA5F'/>" +
      	                "<set label='Normal' value='14'  color='66F233'/>" + 
      	                "<set label='N/A' value='12'  color='E5E8E3'/> </chart>");
      myChart2.render("AlertsSeverityChartDiv"); 
                         
  </script>
					
</body>
</html>

September 29, 2013 at 2:20 pm Problem with fusion Charts #29787

Peter Stoev

Keymaster

Hi arikbd,

We cannot help you with the integration with other widgets not implemented by us.

Best Regards,
Peter Stoev

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

September 29, 2013 at 4:15 pm Problem with fusion Charts #29793

arikbd

Participant

Peter,

This is not an integration issue, it is a conflict issue.

Each of the controls works fine when placed alone on a page, but when I put them both I have a problem, it is probably Fusion Charts problem. I posted the question to check if this is a known problem. I also posted this issue at fusion charts.

I get TypeError: Cannot call method ‘call’ of undefined when I try to select a row in the grid, but the error is in Fusion Chart JavaScript.

Thanks,

Arik

September 30, 2013 at 4:35 am Problem with fusion Charts #29798

Peter Stoev

Keymaster

Hi Arik,

If they do have any event triggers of the Body tag you can probably experience something similar. Unfortunately, we have not worked with that product to tell whether that is the case or not.

Best Regards,
Peter Stoev

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

September 30, 2013 at 11:07 am Problem with fusion Charts #29835

arikbd

Participant

Just an update:

This is Fusion Charts problem with integration with jQuery 1.10 they should release a fix in the near future.

Thanks,

Arik

Author

Posts

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

You must be logged in to reply to this topic.