Bug: show() don't work if layout contains a chart

Hello. I just discovered what happens with my code. The show() method don’t work if the object contains a chart. It works when the wiew doesn’t have any chart.
Test code (just a chart):

</head>
<body>
	<script type="text/javascript" charset="utf-8">
	var loginform = {
			id: 'loginform',
            view:"form", elements:[
            { view:"text", label:"Login", name:"login", labelWidth:90 },
            { view:"text", type:"password", label:"Password", name:"password", labelWidth:90 },
            {
                type:"clean",
                cols:[
                    { view:"button", type:"form", label:"Login", click:"login();" },
                    { view:"button", type:"round", label:"Register" }
                ]
            }
        ]
    };

	var loginform1 = {
			id: 'loginform1',
            view:"form", elements:[
            { view:"text", label:"AAAA", name:"login", labelWidth:90 },
            { view:"text", type:"BBBBBBBBB", label:"Password", name:"password", labelWidth:90 },
            {
                type:"clean",
                cols:[
                    { view:"button", type:"form", label:"SSSSSS", click:"login();" },
                    { view:"button", type:"round", label:"WWWWWWW" }
                ]
            }
        ]
    };
	var mainform = { id: 'mainform',  view: 'chart', type: 'bar', value: '#sales#', label: '#year#', padding: 20, barWidth: 50, radius: 7, alpha: 1, gradient: 'light', border: true, pieHeight: 5,
												xAxis: { title: '', template: ' ', lines: false},
												yAxis: { title: '', lines: false, template: ' '}, id: 'chart_3', datatype: 'json', url: './data/sample_chart.json'
											}

	function login(){
		//dhx.notice({ delay:750, message:"Verificando ..."});
		//dhx.alert('Ingreso correcto');
		//alert($$('mainform').layout.id);
		//dhx.alert($$("loginform").getNode()); 
		$$("mainform").show();
	};

	var app= {cells:[loginform,loginform1,mainform]};
	dhx.ready(function(){
	    dhx.ui.fullScreen();
	    dhx.ui(app);
	    
	});
	
		
	</script>
</body>

test code (view contains a chart,doesn’t work either)

</head>
<body>
	<script type="text/javascript" charset="utf-8">
	var loginform = {
			id: 'loginform',
            view:"form", elements:[
            { view:"text", label:"Login", name:"login", labelWidth:90 },
            { view:"text", type:"password", label:"Password", name:"password", labelWidth:90 },
            {
                type:"clean",
                cols:[
                    { view:"button", type:"form", label:"Login", click:"login();" },
                    { view:"button", type:"round", label:"Register" }
                ]
            }
        ]
    };

	var mainform = { id: 'mainform', view: 'layout',
			rows: [
				{ view: 'layout', type: 'wide', id: 'Principal',
					cols: [
						{ view: 'accordion', id: 'Secciones',
							rows: [
								{ header: 'Clientes', headerAlt: 'Clientes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_5'},
															{ label: 'Cobranza', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_6'},
															{ label: 'Pedidos', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_7'}
														], id: 'control_tabbar_3'
													}
												], id: 'toolbar_clientes'
											},
											{ view: 'grid', datatype: 'json', url: './data/sample_grid.json',
												fields: [
													{ width: 100, label: 'Cliente', template: '#Nombre#', type: 'custom', align: 'left',
														sort: { by: '#Cliente#', dir: 'asc', as: 'string'}, id: 'fldCliente', select: false
													},
													{ width: 300, label: 'Direccion', template: '#Direccion#', type: 'custom', align: 'left',
														sort: { by: '#Direccion#', dir: 'asc', as: 'string'}, id: 'fldDireccion', select: false
													}
												], select: true, header: true, scroll: true, id: 'grd_cllientes'
											}
										], id: 'layout_Cliemtes'
									}, id: 'scClientes'
								},
								{ header: 'Mapas', headerAlt: 'Mapas',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_8'},
															{ label: 'Todos', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_9'},
															{ label: 'Faltantes', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_10'}
														], id: 'control_tabbar_Mapas'
													}
												], id: 'toolbar_Mapas'
											},
											{ view: 'googlemap', zoom: 14,
												center: { x: '-12.03', y: '-77.05'}, mapType: 'ROADMAP', id: 'Mapa'
											}
										], id: 'layout_Mapas'
									}, id: 'scMapas'
								},
								{ header: 'Reportes', headerAlt: 'Reportes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ 
												view: 'combo',
												label: '', 
												value: 'value', 
												id: 'control_combo_3', 
												datatype: 'json', 
												url: './data/sample_list.json', 
												select: 1
											},
											{ view: 'chart', type: 'bar', value: '#sales#', label: '#year#', padding: 20, barWidth: 50, radius: 7, alpha: 1, gradient: 'light', border: true, pieHeight: 5,
												xAxis: { title: '', template: ' ', lines: false},
												yAxis: { title: '', lines: false, template: ' '}, id: 'chart_3', datatype: 'json', url: './data/sample_chart.json'
											},
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Tab1', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_11'},
															{ label: 'tab2', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_12'},
															{ label: 'Tab3', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_13'}
														], id: 'control_tabbar_5'
													}
												], id: 'toolbar_Reportes'
											}
										], id: 'layout_9'
									}, id: 'scReportes'
								}
							]
						}
					]
				}
			]
		};
	
	function login(){
		//dhx.notice({ delay:750, message:"Verificando ..."});
		//dhx.alert('Ingreso correcto');
		//alert($$('mainform').layout.id);
		//$$("loginform").hide();
		$$("maimform").show();
	};
	var app = { 
	    cells:[
			loginform,
	       	mainform
	    ]
	};

	dhx.ready(function(){
	    dhx.ui.fullScreen();
	    dhx.ui(app);
	    
	});
	
		
	</script>
</body>

json origin for grid

sample_grid.json

[
{ “id”:“1”, “Nombre”:“Bodega Surco Viejo”, “Direccion”:“Av. Ayacucho 101-Surco”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“2”, “Nombre”:“Multiservicio San Jacinto”, “Direccion”:“Calle San Roque 403”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“3”, “Nombre”:“Alvaro Temoche”, “Direccion”:“Av. Salaverry 728”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“4”, “Nombre”:“Inversiones San Pablo”, “Direccion”:“Av. Aviacion 4721- San Borja”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“5”, “Nombre”:“Grifo Multiventas”, “Direccion”:“Los Alamos 772-San Isidro”, “X”:"-77.25",“Y”:"-12.16"}
]

Hi,

we have tested multiview with a chart - Chart view is shown as well as other views. Could you attach the complete demo?
docs.dhtmlx.com/doku.php?id=othe … leted_demo

Hello. This code is complete, it works whenever mainform doesn´t contain a chart as in the example. If you replace the chart with any other control (list, grid, etc) it works:

There is not a view with id “mainform”. The Chart view has id ‘chart_3’:

var mainform = {
id: ‘mainform’,
view: ‘chart’,

id: ‘chart_3’,

}

Therefore, either remove id: ‘chart_3’, from Chart definition or use $$(“chart_3”).show() to show Chart view.

I’m an idiot. You are right, thanks

Ok, there is a complete example, because the last one I sent was wrong. In the first script, mainform works well alone, with the cart inside and everything shows OK, look at the app variable, it only have mainform:

</head>
<body>
	<script type="text/javascript" charset="utf-8">
	var loginform = {
			id: 'loginform',
            view:"form", elements:[
            { view:"text", label:"Login", name:"login", labelWidth:90 },
            { view:"text", type:"password", label:"Password", name:"password", labelWidth:90 },
            {
                type:"clean",
                cols:[
                    { view:"button", type:"form", label:"Login", click:"login();" },
                    { view:"button", type:"round", label:"Register" }
                ]
            }
        ]
    };

	var mainform = { id: 'mainform', view: 'layout', heigth: 340, width: 220,
			rows: [
				{ view: 'layout', type: 'wide', id: 'Principal',
					cols: [
						{ view: 'accordion', id: 'Secciones',
							rows: [
								{ header: 'Clientes', headerAlt: 'Clientes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_5'},
															{ label: 'Cobranza', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_6'},
															{ label: 'Pedidos', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_7'}
														], id: 'control_tabbar_3'
													}
												], id: 'toolbar_clientes'
											},
											{ view: 'grid', datatype: 'json', url: './data/sample_grid.json',
												fields: [
													{ width: 100, label: 'Cliente', template: '#Nombre#', type: 'custom', align: 'left',
														sort: { by: '#Cliente#', dir: 'asc', as: 'string'}, id: 'fldCliente', select: false
													},
													{ width: 300, label: 'Direccion', template: '#Direccion#', type: 'custom', align: 'left',
														sort: { by: '#Direccion#', dir: 'asc', as: 'string'}, id: 'fldDireccion', select: false
													}
												], select: true, header: true, scroll: true, id: 'grd_cllientes'
											}
										], id: 'layout_Cliemtes'
									}, id: 'scClientes'
								},
								{ header: 'Mapas', headerAlt: 'Mapas',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_8'},
															{ label: 'Todos', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_9'},
															{ label: 'Faltantes', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_10'}
														], id: 'control_tabbar_Mapas'
													}
												], id: 'toolbar_Mapas'
											},
											{ view: 'googlemap', zoom: 14,
												center: { x: '-12.03', y: '-77.05'}, mapType: 'ROADMAP', id: 'Mapa'
											}
										], id: 'layout_Mapas'
									}, id: 'scMapas'
								},
								{ header: 'Reportes', headerAlt: 'Reportes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ 
												view: 'combo',
												label: '', 
												value: 'value', 
												id: 'control_combo_3', 
												datatype: 'json', 
												url: './data/sample_list.json', 
												select: 1
											},
											{ view: 'chart', type: 'bar', 
												value: '#sales#', label: '#year#', 
												padding: 20, barWidth: 50, radius: 7, 
												alpha: 1, gradient: 'light', 
												border: true, pieHeight: 5,
												xAxis: { title: '', template: ' ', 
														lines: false},
												yAxis: { title: '', lines: false, 
													template: ' '}, 
												id: 'chart_3', 
												datatype: 'json', 
												url: './data/sample_chart.json'
											},
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Tab1', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_11'},
															{ label: 'tab2', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_12'},
															{ label: 'Tab3', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_13'}
														], id: 'control_tabbar_5'
													}
												], id: 'toolbar_Reportes'
											}
										], id: 'layout_9'
									}, id: 'scReportes'
								}
							]
						}
					]
				}
			]
		};
	
	function login(){
		dhx.notice({ delay:750, message:"Verificando ..."});
		dhx.alert('Ingreso correcto');
	//	$$("loginform").hide();
		$$("mainform").show();
	};
	var app = { 
	    cells:[
	//		loginform,
	       	mainform
	    ]
	};

	dhx.ready(function(){
	    dhx.ui.fullScreen();
	    dhx.ui(app);
	});
	
		
	</script>
</body>

In this second example, loginform calls mainform (the very same mainform as before) and it doesn’t work, console says in touchui.js:402Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9

</head>
<body>
	<script type="text/javascript" charset="utf-8">
	var loginform = {
			id: 'loginform',
            view:"form", elements:[
            { view:"text", label:"Login", name:"login", labelWidth:90 },
            { view:"text", type:"password", label:"Password", name:"password", labelWidth:90 },
            {
                type:"clean",
                cols:[
                    { view:"button", type:"form", label:"Login", click:"login();" },
                    { view:"button", type:"round", label:"Register" }
                ]
            }
        ]
    };

	var mainform = { id: 'mainform', view: 'layout', heigth: 340, width: 220,
			rows: [
				{ view: 'layout', type: 'wide', id: 'Principal',
					cols: [
						{ view: 'accordion', id: 'Secciones',
							rows: [
								{ header: 'Clientes', headerAlt: 'Clientes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_5'},
															{ label: 'Cobranza', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_6'},
															{ label: 'Pedidos', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_7'}
														], id: 'control_tabbar_3'
													}
												], id: 'toolbar_clientes'
											},
											{ view: 'grid', datatype: 'json', url: './data/sample_grid.json',
												fields: [
													{ width: 100, label: 'Cliente', template: '#Nombre#', type: 'custom', align: 'left',
														sort: { by: '#Cliente#', dir: 'asc', as: 'string'}, id: 'fldCliente', select: false
													},
													{ width: 300, label: 'Direccion', template: '#Direccion#', type: 'custom', align: 'left',
														sort: { by: '#Direccion#', dir: 'asc', as: 'string'}, id: 'fldDireccion', select: false
													}
												], select: true, header: true, scroll: true, id: 'grd_cllientes'
											}
										], id: 'layout_Cliemtes'
									}, id: 'scClientes'
								},
								{ header: 'Mapas', headerAlt: 'Mapas',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_8'},
															{ label: 'Todos', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_9'},
															{ label: 'Faltantes', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_10'}
														], id: 'control_tabbar_Mapas'
													}
												], id: 'toolbar_Mapas'
											},
											{ view: 'googlemap', zoom: 14,
												center: { x: '-12.03', y: '-77.05'}, mapType: 'ROADMAP', id: 'Mapa'
											}
										], id: 'layout_Mapas'
									}, id: 'scMapas'
								},
								{ header: 'Reportes', headerAlt: 'Reportes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ 
												view: 'combo',
												label: '', 
												value: 'value', 
												id: 'control_combo_3', 
												datatype: 'json', 
												url: './data/sample_list.json', 
												select: 1
											},
											{ view: 'chart', type: 'bar', 
												value: '#sales#', label: '#year#', 
												padding: 20, barWidth: 50, radius: 7, 
												alpha: 1, gradient: 'light', 
												border: true, pieHeight: 5,
												xAxis: { title: '', template: ' ', 
														lines: false},
												yAxis: { title: '', lines: false, 
													template: ' '}, 
												id: 'chart_3', 
												datatype: 'json', 
												url: './data/sample_chart.json'
											},
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Tab1', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_11'},
															{ label: 'tab2', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_12'},
															{ label: 'Tab3', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_13'}
														], id: 'control_tabbar_5'
													}
												], id: 'toolbar_Reportes'
											}
										], id: 'layout_9'
									}, id: 'scReportes'
								}
							]
						}
					]
				}
			]
		};
	
	function login(){
		dhx.notice({ delay:750, message:"Verificando ..."});
		dhx.alert('Ingreso correcto');
	//	$$("loginform").hide();
		$$("mainform").show();
	};
	var app = { 
	    cells:[
			loginform,
	       	mainform
	    ]
	};

	dhx.ready(function(){
	    dhx.ui.fullScreen();
	    dhx.ui(app);
	});
	
		
	</script>
</body>

And in this thir example, commenting the chart, everything goes well:

</head>
<body>
	<script type="text/javascript" charset="utf-8">
	var loginform = {
			id: 'loginform',
            view:"form", elements:[
            { view:"text", label:"Login", name:"login", labelWidth:90 },
            { view:"text", type:"password", label:"Password", name:"password", labelWidth:90 },
            {
                type:"clean",
                cols:[
                    { view:"button", type:"form", label:"Login", click:"login();" },
                    { view:"button", type:"round", label:"Register" }
                ]
            }
        ]
    };

	var mainform = { id: 'mainform', view: 'layout', heigth: 340, width: 220,
			rows: [
				{ view: 'layout', type: 'wide', id: 'Principal',
					cols: [
						{ view: 'accordion', id: 'Secciones',
							rows: [
								{ header: 'Clientes', headerAlt: 'Clientes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_5'},
															{ label: 'Cobranza', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_6'},
															{ label: 'Pedidos', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_7'}
														], id: 'control_tabbar_3'
													}
												], id: 'toolbar_clientes'
											},
											{ view: 'grid', datatype: 'json', url: './data/sample_grid.json',
												fields: [
													{ width: 100, label: 'Cliente', template: '#Nombre#', type: 'custom', align: 'left',
														sort: { by: '#Cliente#', dir: 'asc', as: 'string'}, id: 'fldCliente', select: false
													},
													{ width: 300, label: 'Direccion', template: '#Direccion#', type: 'custom', align: 'left',
														sort: { by: '#Direccion#', dir: 'asc', as: 'string'}, id: 'fldDireccion', select: false
													}
												], select: true, header: true, scroll: true, id: 'grd_cllientes'
											}
										], id: 'layout_Cliemtes'
									}, id: 'scClientes'
								},
								{ header: 'Mapas', headerAlt: 'Mapas',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Ruta', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_8'},
															{ label: 'Todos', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_9'},
															{ label: 'Faltantes', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_10'}
														], id: 'control_tabbar_Mapas'
													}
												], id: 'toolbar_Mapas'
											},
											{ view: 'googlemap', zoom: 14,
												center: { x: '-12.03', y: '-77.05'}, mapType: 'ROADMAP', id: 'Mapa'
											}
										], id: 'layout_Mapas'
									}, id: 'scMapas'
								},
								{ header: 'Reportes', headerAlt: 'Reportes',
									body: { view: 'layout', type: 'wide',
										rows: [
											{ 
												view: 'combo',
												label: '', 
												value: 'value', 
												id: 'control_combo_3', 
												datatype: 'json', 
												url: './data/sample_list.json', 
												select: 1
											},
							/*				{ view: 'chart', type: 'bar', 
												value: '#sales#', label: '#year#', 
												padding: 20, barWidth: 50, radius: 7, 
												alpha: 1, gradient: 'light', 
												border: true, pieHeight: 5,
												xAxis: { title: '', template: ' ', 
														lines: false},
												yAxis: { title: '', lines: false, 
													template: ' '}, 
												id: 'chart_3', 
												datatype: 'json', 
												url: './data/sample_chart.json'
											},*/
											{ view: 'toolbar', type: 'MainBar',
												elements: [
													{ view: 'tabbar', selected: '1',
														options: [
															{ label: 'Tab1', src: './data/sample_tab_games.png', srcSelected: './data/sample_tab_games.png', key: '1', id: 'control_tabbar_tab_11'},
															{ label: 'tab2', src: './data/sample_tab_video.png', srcSelected: './data/sample_tab_video.png', key: '2', id: 'control_tabbar_tab_12'},
															{ label: 'Tab3', src: './data/sample_tab_music.png', srcSelected: './data/sample_tab_music.png', key: '3', id: 'control_tabbar_tab_13'}
														], id: 'control_tabbar_5'
													}
												], id: 'toolbar_Reportes'
											}
										], id: 'layout_9'
									}, id: 'scReportes'
								}
							]
						}
					]
				}
			]
		};
	
	function login(){
		dhx.notice({ delay:750, message:"Verificando ..."});
		dhx.alert('Ingreso correcto');
	//	$$("loginform").hide();
		$$("mainform").show();
	};
	var app = { 
	    cells:[
			loginform,
	       	mainform
	    ]
	};

	dhx.ready(function(){
	    dhx.ui.fullScreen();
	    dhx.ui(app);
	});
	
		
	</script>
</body>

Please use this ./data/sample_grid.json to try the above examples

[
{ “id”:“1”, “Nombre”:“Bodega Surco Viejo”, “Direccion”:“Av. Ayacucho 101-Surco”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“2”, “Nombre”:“Multiservicio San Jacinto”, “Direccion”:“Calle San Roque 403”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“3”, “Nombre”:“Alvaro Temoche”, “Direccion”:“Av. Salaverry 728”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“4”, “Nombre”:“Inversiones San Pablo”, “Direccion”:“Av. Aviacion 4721- San Borja”, “X”:"-77.25",“Y”:"-12.16"},
{ “id”:“5”, “Nombre”:“Grifo Multiventas”, “Direccion”:“Los Alamos 772-San Isidro”, “X”:"-77.25",“Y”:"-12.16"}
]

Update: The problem argument is the values attribute of the chart, if we comment this line it works:
// value: ‘#sales#’,

But of course it renders correctly if we show the whole layout without the .show() method.

I double checked the json data originand its ok. As the examples show, the javascript renders the form with the chart if the .show method is not involved.

Complete demo
www.rar (285 KB)

After tracing the error down the stack, I can tell that the _content_width and _content_height properties of the chart view are undefined when included into accordion. This is causing the calculations for the bars in my chart to cause errors. My question now is: are there problems with including charts in an accordion, if they are not visible and have no dimensions to determine their configuration? Or am I just doing it wrong? Any help would be appreciated…

Error lines
Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 touchui_debug.js:12504
dhx.protoUI._setBarGradient touchui_debug.js:12504
dhx.chart.bar._drawBarGradient touchui_debug.js:10840
dhx.chart.bar.pvt_render_bar touchui_debug.js:10775
dhx.protoUI.render touchui_debug.js:11982 dhx.protoUI._render_activation touchui_debug.js:8728
dhx.protoUI._show touchui_debug.js:8806
dhx.protoUI.show touchui_debug.js:4381

Hello,

I have attached the fixed touchui.js. Please try it.
touchui.zip (53.6 KB)

Perfect! Thank you Alexandra