Chart in layout cell

Hello, I have a layout object with cell (a) and cell (b)
I show a grid in cell (a) and I want to show a chart in cell (b) when I click in a menu button.
I followed this example

dhtmlx.com/docs/products/dhtmlxC … group.html

But here there’s not a layout.

  1. how can I structure the layout object ?
  2. when I have to initialize the dhtmlxchart object ?
  3. how can I use event onEditCell to refresh chart ?

I tried but I had problem with scope of barChart and with the container (I want show chart only after click of button)!

Hello
Here is your code based on this sampple:

[code]layout = new dhtmlXLayoutObject(document.body,“2U”);
layout.cells(“a”).hideHeader();
layout.cells(“b”).hideHeader();
mainToolbar = layout.attachToolbar();
mainToolbar.addButton(“chartButton”, 0, “init chart”);

		mygrid = layout.cells("a").attachGrid();
		mygrid.setImagePath('../../../codebase/imgs/');
		mygrid.loadXML("../../common/gridH.xml");

        barChart1 = layout.cells("b").attachChart({
			view:"bar",
			color:"#66ccff",
			gradient:"3d",
			container:"chart_container",
			value:"#data0#",
			label:"#data0#",
			radius:3,
			tooltip:{
				template:"#data0#"
			},
			width:50,
			origin:0,
			yAxis:{
				start:-1000,
				step: 500,
				end:2000
			},
			group:{
				by:"#data2#",
				map:{
					data0:["#data0#","sum"]
				}
			},
			xAxis:{
				template:"#id#"
			},
			border:false
		});

		mainToolbar.attachEvent("onClick", function(id){
			if(id=="chartButton")
			barChart1.parse(mygrid,"dhtmlxgrid");
		})[/code]

Thank you for help.
I forgot to tell one thing:

The initial situation is:

layout cell(a) -> Grid
layout cell(b) -> Form (binded to grid)

Then, after clicking on toolbar button, I want to switch the form to the chart.

Do I have to attach the chart to layout after the click on button ?

You need to use cell views mode:
dhtmlx.com/docs/products/dhtmlxL … views.html
One (i.e. default) will be form, another one - chart. You will switch views with you toolbar button - it will be even more easy than my sample

Thanks it work perfectly !!!

My code

<!DOCTYPE html>
<html>
<head>
	<title>LIMS Istituto Zooprofilattico Sperimentale - Apparecchiature</title>
	<meta charset="utf-8">
	<script src="codebase/dhtmlx.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="codebase/dhtmlx.css">
	<style>
			html, body {
				width: 100%;      /*provides the correct work of a full-screen layout*/ 
				height: 100%;     /*provides the correct work of a full-screen layout*/
				overflow: hidden; /*hides the default body's space*/
				margin: 0px;      /*hides the body's scrolls*/
			}
		
			header{
				height: 10%;
				background: #000055;
				color: #fff;
				overflow: hidden; /*hides the default body's space*/
				/*display: table-cell; 
				vertical-align: middle;*/
				line-height:20px; /*serve per l'allineamento verticale*/
			}
			div#layoutObj{
				height: 85%;
			}
			footer{
				height: 4%;
			}
			
			/* vertically align text */ 
			span { 
				display:inline-block; 
				vertical-align:middle 
			}
			img.piccola{
				height: 50px;
			}
			img.middle {
				vertical-align:middle;
			}
			.destra{
				float: right;
				margin-right: 20px;
			}
			.beige{
				color: #ffebcd; 
			}
			
			/* Grafici - Chart Dhtmlx */
			.dhx_axis_item_x{
				font-size: 11px
			}
			.dhx_axis_item_y{
				font-size: 11px
			}
						
			/*personalizzazione css -> Non documentata*/	
			.dhxform_base {
				position: relative;
				margin: 10px;
				padding: 15px 30px 17px;
				border: 1px solid #cecece;
			}
			
	</style>
		
	</head>
		
		<!-- Script principale -->
		
		<script type="text/javascript">

			var barChart;
			var myGrid;
			var myLayout;	
			var myMenu;
			var myToolbar;
			
			var grid_header 		= "Descrizione bene,Costruttore,Reparto stanza,Ord";
			var grid_column 		= "descrizione_bene,costruttore,reparto_stanza,ord";
			var grid_sorting 		= "str,str,str,int";
			var grid_coltype 		= "ro,ro,ro,ed";
			var grid_colWidths 	= "300,100,200,*";
			var grid_colAlign 	= "left,left,left,right";
			var grid_filter		= "#text_filter,#text_filter,#text_filter";
			
			dhtmlx.image_path = "codebase/imgs/";

		

			function doOnLoad() {
				
				//myLayout = new dhtmlXLayoutObject({parent: "layoutObj", pattern: "3L"});
				//var layout = new dhtmlXLayoutObject("layoutObj","2U");
				//var layout = new dhtmlXLayoutObject(document.body,"2U"); 
				myLayout = new dhtmlXLayoutObject(document.getElementById("layoutObj"),"2U"); 
				myLayout.cells("a").setText("Apparecchiature");       
				myLayout.cells("b").setText("Dettaglio apparecchiatura");
				myLayout.cells("b").setWidth(580);
				//layout.xy.margin_top = 150;//height of menu
					
				//var menu = layout.attachMenu();
				//menu.setIconsPath("icons/");
				//menu.loadStruct("data/menu.xml");
			
				// by the default "def" view used, when layout is loaded
				// this view also loaded, so just init

				myToolbar = myLayout.attachToolbar();
				myToolbar.setIconsPath("icons/");
				myToolbar.loadStruct("data/toolbar.xml");

				
				myGrid = myLayout.cells("a").attachGrid();
				//myGrid.loadXML("../common/grid.xml?etc="+new Date().getTime());
				myGrid.setImagePath('codebase/imgs/');
				myGrid.setSkin("dhx_skyblue")
				myGrid.enableSmartRendering(true);
				myGrid.setHeader(grid_header);
				//sets the columns' ids
				myGrid.setColumnIds(grid_column);
				//sets the initial widths of columns		
				myGrid.setInitWidths(grid_colWidths);
				//sets the alignment of columns	
				myGrid.setColAlign(grid_colAlign);
				//sets the types of columns	
				myGrid.setColTypes(grid_coltype);
				//sets the sorting types of columns				
				myGrid.setColSorting(grid_sorting);  	
				//the method takes the columns' filters as a parameter
				myGrid.attachHeader(grid_filter);
				myGrid.setStyle(
					"", "border:1px solid #5F9EA0;","", "" //background-color:#FFFFA8; color:red;
				);
				//hide the first column
				//mygrid.setColumnHidden(3,true);
				myGrid.init();
				//mygrid.loadXML("gridH.xml",refresh_chart);
				//myGrid.load("data/apparecchiature.php",refresh_chart);
				myGrid.load("data/apparecchiature.php");

				
				contactForm = myLayout.cells("b").attachForm();
				//contactForm.loadStruct("data/form.xml");
				contactForm.loadStruct("data/form.xml", function(){
					//Aggiunge l'immagine al container - form
					//contactForm.getContainer("foto").innerHTML = '<img src="data/foto_apparecchiature/'+ "1384.png"+'">';
				});
				contactForm.bind(myGrid);	//lega il form alla griglia

				
				//Inits dataProcessor
				var dpg = new dataProcessor("data/apparecchiature.php");         
				//associates the dataProcessor instance with the grid
				dpg.init(myGrid);   

				
								
				// Eventi Grid //
				myGrid.attachEvent("onEditCell",function(stage){	//netsam
					if (stage == 2)
						refresh_chart();
						return true;
				});
				myGrid.attachEvent("onRowSelect", function(id){
						//Modifica l'immagine del container - form
						//contactForm.setItemValue("foto", id);
						var foto = "img/foto_apparecchiature/"+id+".png";
						contactForm.getContainer("foto").innerHTML = '<img src="'+foto+'">';
				});
				dpg.attachEvent("onAfterUpdate", function(sid, action, tid, tag){    
					if (action == "inserted"){
						//selects the newly-created row				
						myGrid.selectRowById(tid);
						//set focus to the 1st form's input		
						contactForm.setFocusOnFirstActive();                                  
					}
				});

				
				// Eventi Form //
				contactForm.attachEvent("onButtonClick", function(name, command){
					//sends the values of the updated row to the server
					contactForm.save();     
				});
				
				
				// Eventi Toolbar //
				myToolbar.attachEvent("onclick",function(id){
					// inserire indice e chiave database
					//'newContact' is the id of the button in the toolbar
					if(id=="newContact"){
						//generates an unique id			
						var rowId=myGrid.uid();
						//gets the number of rows in grid				
						var pos = myGrid.getRowsNum();  	
						//contactsGrid.addRow(rowId,["Nuovo contato","",""],pos);  //adds a new row
						//netsam	
						//adds a new row
						myGrid.addRow(rowId,["Nuovo contatto","",""],0);  
						contactForm.setItemFocus('descrizione_bene');
						//netsam		
					};
					if(id=="delContact"){
						var rowId = myGrid.getSelectedRowId();        
						var rowIndex = myGrid.getRowIndex(rowId);        
						if(rowId!=null){            
							myGrid.deleteRow(rowId);                
							if(rowIndex!=(myGrid.getRowsNum()-1)){                    
								myGrid.selectRow(rowIndex+1,true);                
							} else{                    
								myGrid.selectRow(rowIndex-1,true)                
							}        
						}    
					}
					if(id=="statContact"){
						showView("chart");
						//var chart = layout.cells("b").attachChart(chartConfig);
						//chart.load("sales.xml");
						//chart.parse(contactsGrid,"dhtmlxgrid");
						//alert(barChart);
					}
					if(id=="formContact"){
						showView("def");
						
					}
				
				});

			} //fine onLoad
			
			
			
			
			function showView(view) {
			
				var firstShow = myLayout.cells("b").showView(view);
				
				// view became visible first time, loading content
				if (firstShow) {
				
					if (view == "chart") {

						// Inits Chart config //
						var chartConfig ={
							view: "bar",
							color:"#66ccff",
							gradient:"3d",
							//container:"chart_container",
							//container:layout.cells("b"),
							value:"#data3#",	//Valori relativi al Reparto
							//label:"#data3#",
							tooltip:{
								template:"#id#" //categoria raggruppata
							},
							group:{
								by:"#data2#", //Reparto
								map:{
									data3:["#data3#","sum"]
								}
							},
							//xAxis:{
							//	template:"#id#"
							//}

						}
						
						barChart = myLayout.cells("b").attachChart(chartConfig);
						barChart.parse(myGrid,"dhtmlxgrid");
						//barChart.setImagePath("../../../codebase/imgs/dhxtree_skyblue/");
						//barChart.loadXML("../common/tree.xml?etc="+new Date().getTime());
						
					}
					
					if (view == "form") {
						//myLayout.cells("b").attachURL("../../../dhtmlxWindows/samples/common/test_page_1.html", true);
						contactForm = myLayout.cells("b").attachForm();
						//contactForm.loadStruct("data/form.xml");
						contactForm.loadStruct("data/form.xml", function(){
							//Aggiunge l'immagine al container - form
							//contactForm.getContainer("foto").innerHTML = '<img src="data/foto_apparecchiature/'+ "1384.png"+'">';
						});
						contactForm.bind(myGrid);	//lega il form alla griglia
					}

				}
			}

				
			//---------------
			// Funzioni varie
			//---------------
			function doLink(name, value) {
				if (name == "product") return "<div class='simple_bold'>"+value+"</div>";
				if (name == "libretto") return "<div class='simple_link'><a href='"+"libretti/"+value+".pdf"+"'target='blank'>"+value+"</a></div>";
				//if (name == "pgs") return "<div class='simple_link'><a href='http://"+value+"'target='blank'>"+value+"</a></div>";
				//if (name == "pos") return "<div class='simple_link'><a href='http://"+value+"'target='blank'>"+value+"</a></div>";				
			};

			function refresh_chart(){
				barChart.clearAll();
				barChart.parse(myGrid,"dhtmlxgrid");
			};


		</script>

	</head>


	
	<body onload="doOnLoad();">
			
		<header>
		<hgroup>
			 <img class="middle piccola" src="img/logo.gif" alt="Logo Istituto Zooprofilattico Sicilia">
			 <span><h2>Istituto Zooprofilattico Sperimentale della Sicilia "A. Mirri"</h2></span>
			 <span class="destra"><h3>Laboratory Information Management System</h3></span>
			 <span class="destra beige"><h2>LIMS</h2></span>
		</hgroup>
		</header>

		<div id="layoutObj">
		</div>
		<!--		
		<footer>
			<small>©2014 Realizzato da Ignazio Sammarco, Maurizio Orlando, Giuseppe Lo Bue, Daniele Montemaggiore, Sergio Caramanno. </small>
		</footer>
		-->

	</body>
	
</html>

You are welcome!