From 20c75c45d8888e44b9b58b8ba67c6b5b2e8e7876 Mon Sep 17 00:00:00 2001
From: "Kunal Chavda (OpenERP)" <kch@tinyerp.com>
Date: Fri, 8 Apr 2011 14:20:05 +0530
Subject: [IMP]Initialy show bar chart with data.

bzr revid: kch@tinyerp.com-20110408085005-hv9jv2wcfopnxrgm
---
 .../samples/01_initialization/01_load_xml.html     |  70 +++++++
 .../samples/01_initialization/02_load_json.html    |  63 +++++++
 .../samples/01_initialization/03_load_csv.html     |  65 +++++++
 .../samples/01_initialization/04_load_jsarray.html |  68 +++++++
 .../samples/01_initialization/05_series.html       | 119 ++++++++++++
 .../dhtmlxGraph/samples/02_color/01_default.html   |  66 +++++++
 .../dhtmlxGraph/samples/02_color/02_custom.html    |  67 +++++++
 .../samples/02_color/03_custom_logic.html          |  77 ++++++++
 .../dhtmlxGraph/samples/02_color/04_gradient.html  |  64 +++++++
 .../lib/dhtmlxGraph/samples/03_group/01_basic.html |  96 ++++++++++
 .../dhtmlxGraph/samples/03_group/02_scales.html    | 126 +++++++++++++
 .../dhtmlxGraph/samples/04_pie_chart/01_init.html  |  67 +++++++
 .../dhtmlxGraph/samples/04_pie_chart/02_text.html  |  52 ++++++
 .../samples/04_pie_chart/03_3d_chart.html          |  48 +++++
 .../samples/04_pie_chart/04_legend.html            |  81 ++++++++
 .../dhtmlxGraph/samples/05_line_chart/01_init.html |  55 ++++++
 .../samples/05_line_chart/02_style.html            | 153 +++++++++++++++
 .../samples/05_line_chart/03_scale.html            | 101 ++++++++++
 .../samples/05_line_chart/04_spline.html           |  57 ++++++
 .../samples/05_line_chart/05_series.html           |  94 ++++++++++
 .../dhtmlxGraph/samples/06_bar_chart/01_init.html  |  74 ++++++++
 .../dhtmlxGraph/samples/06_bar_chart/02_text.html  |  80 ++++++++
 .../samples/06_bar_chart/03_scales.html            |  99 ++++++++++
 .../samples/06_bar_chart/04_styles.html            | 207 +++++++++++++++++++++
 .../samples/06_bar_chart/05_stacked_chart.html     |  87 +++++++++
 .../samples/06_bar_chart/06_series.html            |  81 ++++++++
 .../samples/06_bar_chart/07_horizonal_bars.html    | 120 ++++++++++++
 .../06_bar_chart/08_horizonal_stacked_bars.html    |  75 ++++++++
 .../dhtmlxGraph/samples/07_area_chart/01_init.html |  55 ++++++
 .../samples/07_area_chart/02_scale.html            | 101 ++++++++++
 .../samples/07_area_chart/03_series.html           |  90 +++++++++
 .../samples/07_area_chart/03_stacked_area.html     |  88 +++++++++
 .../lib/dhtmlxGraph/samples/08_dynamic/01_add.html |  83 +++++++++
 .../dhtmlxGraph/samples/08_dynamic/02_events.html  |  96 ++++++++++
 .../dhtmlxGraph/samples/08_dynamic/03_sorting.html |  73 ++++++++
 .../samples/08_dynamic/04_filtering.html           |  81 ++++++++
 .../samples/09_integration/01_dhtmlxgrid.html      |  70 +++++++
 .../09_integration/02_dhtmlxgrid_group.html        |  79 ++++++++
 .../samples/09_integration/03_windows.html         |  77 ++++++++
 .../lib/dhtmlxGraph/samples/common/config.php      |  13 ++
 .../static/lib/dhtmlxGraph/samples/common/data.php |  16 ++
 .../lib/dhtmlxGraph/samples/common/sales.xml       |  46 +++++
 .../static/lib/dhtmlxGraph/samples/common/stat.xml |   1 +
 .../static/lib/dhtmlxGraph/samples/readme.txt      |   7 +
 44 files changed, 3388 insertions(+)
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/01_load_xml.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/02_load_json.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/03_load_csv.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/04_load_jsarray.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/05_series.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/01_default.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/02_custom.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/03_custom_logic.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/04_gradient.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/01_basic.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/02_scales.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/01_init.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/02_text.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/03_3d_chart.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/04_legend.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/01_init.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/02_style.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/03_scale.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/04_spline.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/05_series.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/01_init.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/02_text.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/03_scales.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/04_styles.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/05_stacked_chart.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/06_series.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/07_horizonal_bars.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/08_horizonal_stacked_bars.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/01_init.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/02_scale.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_series.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_stacked_area.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/01_add.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/02_events.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/03_sorting.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/04_filtering.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/01_dhtmlxgrid.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/02_dhtmlxgrid_group.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/03_windows.html
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/common/config.php
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/common/data.php
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/common/sales.xml
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/common/stat.xml
 create mode 100644 addons/base_graph/static/lib/dhtmlxGraph/samples/readme.txt

(limited to 'addons/base_graph/static/lib/dhtmlxGraph/samples')

diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/01_load_xml.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/01_load_xml.html
new file mode 100644
index 00000000000..e720ba8ee3e
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/01_load_xml.html
@@ -0,0 +1,70 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Data Loading: XML</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	
+	<script>
+	var barChart;
+	window.onload=function(){
+		barChart =  new dhtmlXChart({
+			view:"bar",
+			container:document.getElementById("chart_container"),
+	   		value:"#sales#",
+			label:"#year#",
+			padding:{
+				bottom:0,
+				right:0,
+				left:0
+			},
+			width:30,
+			gradient:true,
+			border:false
+		})
+		barChart.load("../common/sales.xml");
+	
+		var barChart2 =  new dhtmlXChart({
+			view:"pie",
+			container:"chart_container2",
+	   		value:"#sales#",
+	    	details:"#year#"
+		});
+		barChart2.load("../common/sales.xml");
+	}
+	function reloada(){
+
+		barChart.destructor();	
+		barChart =  new dhtmlXChart({
+			view:"pie",
+			container:"chart_container",
+	    	value:"#sales#",
+	    	details:"#year#"
+		})
+		barChart.load("../common/sales.xml");
+	}
+
+	</script>
+</head>
+<body>
+	<p>Chart data can be loaded from different sources: xml,json,JS array,csv<br/> This samples demonstrates loading from xml file.</p>
+	<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;float:left;margin-right:20px"></div>
+	<div id="chart_container2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+
+	<input type="button" name="some_name" value="reload" onclick="reloada()">
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/02_load_json.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/02_load_json.html
new file mode 100644
index 00000000000..e2ce20ae764
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/02_load_json.html
@@ -0,0 +1,63 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Data Loading: JSON</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var data = [
+		{ value:"2.9", label:"2000" },
+		{ value:"3.5", label:"2001" },
+		{ value:"3.1", label:"2002" },
+		{ value:"4.2", label:"2003" },
+		{ value:"4.5", label:"2004" },
+		{ value:"9.6", label:"2005" },
+		{ value:"7.4", label:"2006" },
+		{ value:"9.0", label:"2007" },
+		{ value:"7.3", label:"2008" },
+		{ value:"2.8", label:"2009" }
+	];
+	window.onload = function(){
+		var barChart =  new dhtmlXChart({
+			view:"bar",
+			container:"chart_container",
+			label:"#label#",
+			padding:{
+				bottom:0,
+				right:0,
+				left:0
+			},
+			width:30,
+			gradient:true,
+			border:false
+		})
+		barChart.parse(data,"json");
+	
+		var barChart2 =  new dhtmlXChart({
+			view:"pie",
+			container:"chart_container2",
+	 	   details:"#label#"
+		});
+		barChart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;float:left;margin-right:20px"></div>
+	<div id="chart_container2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/03_load_csv.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/03_load_csv.html
new file mode 100644
index 00000000000..64c39cfaef1
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/03_load_csv.html
@@ -0,0 +1,65 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Data Loading: CSV</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var data = "\
+	  2.9, 2000\n\
+      3.5, 2001\n\
+      3.1, 2002\n\
+      4.2, 2003\n\
+      4.5, 2004\n\
+      9.6, 2005\n\
+      7.4, 2006\n\
+      9.0, 2007\n\
+      7.3, 2008\n\
+      2.8, 2009";
+	window.onload = function(){
+		var barChart =  new dhtmlXChart({
+			view:"bar",
+			container:"chart_container",
+	    	value:"#data0#",
+			label:"#data1#",
+			padding:{
+				bottom:0,
+				right:0,
+				left:0
+			},
+			width:30,
+			gradient:true,
+			border:false
+		})
+		barChart.parse(data,"csv");
+	
+		var barChart2 =  new dhtmlXChart({
+			view:"pie",
+			container:"chart_container2",
+	    	value:"#data0#",
+	    	details:"#data1#"
+		});
+		barChart2.parse(data,"csv");
+	}
+	</script>
+</head>
+<body>
+<p>When data are loaded from CSV string, you should use "data" and field index to define field in the template, for example, "#data0#","#data1#",etc.<br/>Charts in this sample represents values in the first column. Therefore, we have set value:"#data0#" in a chart contructor.</p>
+	<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;float:left;margin-right:20px"></div>
+	<div id="chart_container2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/04_load_jsarray.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/04_load_jsarray.html
new file mode 100644
index 00000000000..023cb0a503a
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/04_load_jsarray.html
@@ -0,0 +1,68 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Data Loading: JS array</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+		var data = [
+			[ "2.9", "2000" ],
+			[ "3.5", "2001" ],
+			[ "3.1", "2002" ],
+			[ "4.2", "2003" ],
+			[ "4.5", "2004" ],
+			[ "9.6", "2005" ],
+			[ "7.4", "2006" ],
+			[ "9.0", "2007" ],
+			[ "7.3", "2008" ],
+			[ "2.8", "2009" ]
+		];
+		window.onload = function(){
+			var barChart =  new dhtmlXChart({
+				view:"bar",
+				container:"chart_container",
+	    		value:"#data0#",
+				label:"#data1#",
+				padding:{
+					bottom:0,
+					right:0,
+					left:0
+				},
+				width:30,
+				gradient:true,
+				border:false
+			})
+			barChart.parse(data,"jsarray");
+	
+			var barChart2 =  new dhtmlXChart({
+				view:"pie",
+				container:"chart_container2",
+	   			value:"#data0#",
+	    		details:"#data1#"
+			});
+			barChart2.parse(data,"jsarray");
+		}
+	</script>
+	
+</head>
+<body>
+	<p>When data are loaded from JS array, you should use "data" and field index to define field in the template, for example, "#data0#","#data1#",etc.<br/>Charts in this sample represents values in the first column. Therefore, we have set value:"#data0#" in a chart contructor.</p>
+	<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;float:left;margin-right:20px"></div>
+	<div id="chart_container2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/05_series.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/05_series.html
new file mode 100644
index 00000000000..0600c05741d
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/01_initialization/05_series.html
@@ -0,0 +1,119 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>PieChart: Initiazation</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+</head>
+<body >
+	<h1>BarChart: Scales</h1>
+	
+	<table>
+		<tr>
+			<td>Automatic vertical scale</td>
+			<td>Custom vertical scale</td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:350px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	<script>
+	var data = [
+		{ sales:"3.0",sales1:"3.4",sales2:"1.2",sales3:"6.9", year:"2000" },
+		{ sales:"3.8",sales1:"4.5",sales2:"2.5",sales3:"7.5", year:"2001" },
+		{ sales:"3.4",sales1:"4.7",sales2:"1.9",sales3:"5.5", year:"2002" }
+	];
+	
+	
+	
+	var barChart1 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		width:30,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+			title:"Sales,million"
+		},
+		gradient:true,
+		border:false,
+		color: "#66cc33"
+	})
+	barChart1.addSeries({
+	    value:"#sales1#",
+		color:"#ff9933",
+		label:"#sales1#"
+	});
+	barChart1.addSeries({
+	    value:"#sales2#",
+		color:"#ffff99",
+		label:"#sales2#"
+	});
+	barChart1.parse(data,"json");
+	
+	
+	
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart2",
+		value:"#sales#",
+		gradient:true,
+		border:false,
+		width:30,
+		color: "#66cc33",
+		label:"#sales#",
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Years",
+			template:"#year#"
+		},
+		yAxis:{
+		    start: 0,
+			end: 10,
+			step: 1,
+			title:"Sales, mil"
+		}
+		
+	});
+	barChart2.addSeries({
+	    value:"#sales1#",
+		color:"#ff9933",
+		label:"#sales1#"
+	});
+	barChart2.addSeries({
+	    value:"#sales2#",
+		color:"#ffff99",
+		label:"#sales2#"
+	});
+	barChart2.addSeries({
+	    value:"#sales3#",
+		color:"#ccff99",
+		label:"#sales3#"
+	});
+	
+	barChart2.parse(data,"json");
+
+	</script>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/01_default.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/01_default.html
new file mode 100644
index 00000000000..39b2f5e3865
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/01_default.html
@@ -0,0 +1,66 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Colors: default</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var data = [
+		{ sales:"2.9", year:"2000" },
+		{ sales:"3.5", year:"2001" },
+		{ sales:"3.1", year:"2002" },
+		{ sales:"4.2", year:"2003" },
+		{ sales:"4.5", year:"2004" },
+		{ sales:"9.6", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+window.onload = function(){
+	var barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart_container",
+		value:"#sales#",
+		label:"#year#",
+		padding:{
+			bottom:0,
+			right:0,
+			left:0
+		},
+		width:30
+	})
+	barChart.parse(data,"json");
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"pie",
+		container:"chart_container2",
+		value:"#sales#",
+	    details:"#year#"
+	});
+	barChart2.parse(data,"json");
+}
+	</script>
+</head>
+<body>
+	<p>Chart colors are defined by color property. If it is not set, chart is colored using "rainbow" algorithm.</p>
+	<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;float:left;margin-right:20px"></div>
+	<div id="chart_container2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+	
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/02_custom.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/02_custom.html
new file mode 100644
index 00000000000..8157a8f82b2
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/02_custom.html
@@ -0,0 +1,67 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Colors: custom colors</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var data = [
+		{ sales:"2.9", year:"2000", color:"#0000FF" },
+		{ sales:"3.5", year:"2001", color:"#00FF00"},
+		{ sales:"3.1", year:"2002", color:"#00FFFF"},
+		{ sales:"4.2", year:"2003", color:"#FF0000"},
+		{ sales:"4.5", year:"2004", color:"#FF00FF"},
+		{ sales:"9.6", year:"2005", color:"#FFFF00"},
+		{ sales:"7.4", year:"2006", color:"#880088"},
+		{ sales:"9.0", year:"2007", color:"#008800"},
+		{ sales:"7.3", year:"2008", color:"#880000"},
+		{ sales:"4.8", year:"2009", color:"#000088"}
+	];
+	
+	window.onload = function(){
+	var barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart_container",
+		value:"#sales#",
+		label:"#year#",
+		color:"#color#",
+		padding:{
+			bottom:0,
+			right:0,
+			left:0
+		},
+		width:30
+	})
+	barChart.parse(data,"json");
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"pie",
+		container:"chart_container2",
+		value:"#sales#",
+	    details:"#year#",
+	    color:"#color#"
+	});
+	barChart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<p>Colors can be defined with template. In this sample colors and defined in data by "color" field.</p>
+	<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;float:left;margin-right:20px"></div>
+	<div id="chart_container2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/03_custom_logic.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/03_custom_logic.html
new file mode 100644
index 00000000000..e88c37b3283
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/03_custom_logic.html
@@ -0,0 +1,77 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Colors: custom logic</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var data = [
+		{ sales:"2.9", year:"2000" },
+		{ sales:"3.5", year:"2001" },
+		{ sales:"3.1", year:"2002" },
+		{ sales:"4.2", year:"2003" },
+		{ sales:"4.5", year:"2004" },
+		{ sales:"9.6", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	window.onload = function(){
+	var barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart_container",
+		value:"#sales#",
+		label:"#year#",
+		width:30,
+		padding:{
+			bottom:0,
+			right:0,
+			left:0
+		},
+		gradient:true,
+		border:false,
+		color:function(obj){
+			if (obj.sales > 5) return "#FF0000";
+			else return "#00FF00";
+		}
+	})
+	barChart.parse(data,"json");
+	
+	var index = 1;
+	var barChart2 =  new dhtmlXChart({
+		view:"pie",
+		container:"chart_container2",
+		value:"#sales#",
+		label:"#year#",
+		gradient:true,
+	    color:function(obj,ratio){
+	    	index++;
+			if (index % 2) return "#FF0000";
+			return "#00FF00";
+		}
+	});
+	barChart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<p>Colors can be defined using function. In this sample color of bars depends on sales value, and colors of pie sectors are alternative.</p>
+	<div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;float:left;margin-right:20px""></div>
+	<div id="chart_container2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/04_gradient.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/04_gradient.html
new file mode 100644
index 00000000000..973d9cdc008
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/02_color/04_gradient.html
@@ -0,0 +1,64 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Colors: color gradient</title>
+	
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var data = [
+		{ sales:"2.9", year:"2000" },
+		{ sales:"3.5", year:"2001" },
+		{ sales:"3.1", year:"2002" },
+		{ sales:"4.2", year:"2003" },
+		{ sales:"4.5", year:"2004" },
+		{ sales:"9.6", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	var barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart_container",
+		value:"#sales#",
+		label:"#year#",
+		padding:{
+			bottom:0,
+			right:0,
+			left:0
+		},
+		width:30,
+		gradient:function(gradient){
+			gradient.addColorStop(1.0,"#FF0000");
+			gradient.addColorStop(0.2,"#FFFF00");
+			gradient.addColorStop(0.0,"#00FF22");
+		}
+	})
+	barChart.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<p>The color of Bar Chart can be defined by gradient property. <br/>
+	In this case you should set a function that takes a gradient object as an argument. And using addColorStop you may define colors for chart.</p>
+	<div id="chart_container" style="width:500px;height:300px;border:1px solid #A4BED4;"></div>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/01_basic.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/01_basic.html
new file mode 100644
index 00000000000..401dbdae24f
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/01_basic.html
@@ -0,0 +1,96 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Grouping and Sorting</title>
+	
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var barChart;
+window.onload = function(){
+	barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart_container",
+	    value:"#sales#",
+		color:"#b3e025",
+		gradient:true,
+		border:false,
+		width:70,
+		label:"#id#",
+		sort:{
+			by:"#id#",
+			as:"string",
+			dir:"asc"
+		},
+		group:{
+			by:"#year#",
+			map:{
+				sales:["#sales#","sum"]
+			}
+		},
+		padding:{
+			bottom:0
+		}
+	})
+	barChart.load("../common/stat.xml");
+}
+
+	function  groupA(){
+		barChart.group({
+			by:"#company#",
+			map:{
+				sales:["#sales#","sum"]
+			}
+		});
+		barChart.refresh();
+	}	
+	
+	function  groupB(){
+		barChart.group({
+			by:"#year#",
+			map:{
+				sales:["#sales#","sum"]
+			}
+		});
+	}	
+	
+	function  groupC(){
+		barChart.group({
+			by:"#year#",
+			map:{
+				sales:["#sales#","max"]
+			}
+		});
+	}
+
+	</script>
+</head>
+<body>
+	<p>It's possible to group chart data by a certain property. You may use group method or group property in a chart constructor.</p>
+	<div id="chart_container" style="width:600px;height:300px;border:1px solid #A4BED4;"></div>
+	
+	
+	<br/>
+	<input type="button" name="some_name" value="Group by" onclick="window['group'+document.getElementById('groupby').value]()">
+	<select name="groupby" id="groupby">
+		<option value="A">company</option>
+		<option value="B" SELECTED>year (total sales)</option>
+		<option value="C">year (max sales)</option>
+	</select>
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/02_scales.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/02_scales.html
new file mode 100644
index 00000000000..75746062b29
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/03_group/02_scales.html
@@ -0,0 +1,126 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Scales and grouping</title>
+	
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+	<style>
+		.dhx_chart_title{
+			padding-left:3px
+		}
+	</style>
+	<script>
+	var barChart;
+	window.onload = function(){
+		 barChart =  new dhtmlXChart({
+			view:"bar",
+			container:"chart_container",
+	    	value:"#sales#",
+			color:"#b3e025",
+			gradient:true,
+			border:false,
+			width:70,
+			yAxis:{},
+			xAxis:{
+				template:"#id#",
+				title:"Sales per year (all companies)"
+			},
+			label:"#sales#",
+			sort:{
+				by:"#id#",
+				as:"string",
+				dir:"asc"
+			},
+			group:{
+				by:"#year#",
+				map:{
+					sales:["#sales#","sum"]
+				}
+			}
+		})
+		barChart.load("../common/stat.xml");
+	}
+
+	function  groupA(){
+		barChart.define("xAxis",{
+			template:"#id#",
+			title:"Total sales per companies"
+		});
+		barChart.define("yAxis",{});
+		barChart.group({
+			by:"#company#",
+			map:{
+				sales:["#sales#","sum"]
+			}
+		});
+		barChart.refresh();
+	}	
+	
+	function  groupB(){
+		barChart.define("xAxis",{
+			template:"#id#",
+			title:"Sales per year (all companies)"
+		});
+		barChart.define("yAxis",{});
+		barChart.group({
+			by:"#year#",
+			map:{
+				sales:["#sales#","sum"]
+			}
+		});
+	}	
+	
+	function  groupC(){
+		barChart.define("xAxis",{
+				template:"#id#",
+				title:"Maximum sales per year"
+		});
+		barChart.define("yAxis",{});
+		barChart.group({
+			by:"#year#",
+			map:{
+				sales:["#sales#","max"]
+			}
+		});
+	}
+	
+	function sort(direction){
+		
+		barChart.define("sort",{
+			by:"#sales#",
+			dir:direction,
+			as:"int"
+		});
+		barChart.render();
+	}
+	</script>
+</head>
+<body>
+	<p>To update configuration properties after grouping you need to cal define method with new settings.</p>
+	<div id="chart_container" style="width:600px;height:300px;border:1px solid #A4BED4;"></div>
+	<br/>
+	<input type="button" name="some_name" value="Group by" onclick="window['group'+document.getElementById('groupby').value]()">
+	<select name="groupby" id="groupby">
+		<option value="A">company</option>
+		<option value="B" SELECTED>year (total sales)</option>
+		<option value="C">year (max sales)</option>
+	</select>
+	<br/><br/>
+	<input type="button" name="some_name" value="Sort by sales" onclick="sort(document.getElementById('dir').value)">
+	<select name="dir" id="dir">
+		<option value="asc" selected>asc</option>
+		<option value="desc" >desc</option>
+	</select>
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/01_init.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/01_init.html
new file mode 100644
index 00000000000..63c82ecf42c
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/01_init.html
@@ -0,0 +1,67 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Initialization</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+	    { sales:"6300", company:"Company 1",color:"#d2ed7e" },
+		{ sales:"8700", company:"Company 2",color:"#b3e025" },
+	    { sales:"10500", company:"Company 3",color:"#9ac86d" },
+		{ sales:"7800", company:"Company 4",color:"#e0e56c" }
+	];
+	
+	window.onload = function(){
+	var chart =  new dhtmlXChart({
+		view:"pie",
+		container:"chart1",
+		value:"#sales#",
+		color:"#color#",
+		label:"#company#",
+		pieInnerText:"<b>#sales#</b>",
+		gradient:true
+	});
+	chart.parse(data,"json");
+	
+	
+	var chart2 =  new dhtmlXChart({
+		view:"pie",
+		container:"chart2",
+		value:"#sales#",
+		color:"#color#",
+		label:"#company#",
+		pieInnerText:"<b>#sales#</b>",
+		gradient:true,
+		radius:90,
+		x:280,
+		y:150
+	});
+	chart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body >
+	<table>
+		<tr>
+			<td>Pie chart with Automatic radius and center position</td>
+			<td>Pie chart with Custom radius and center position</td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/02_text.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/02_text.html
new file mode 100644
index 00000000000..7ba118f19e2
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/02_text.html
@@ -0,0 +1,52 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Labels</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"10.7", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+		var pieChart =  new dhtmlXChart({
+			view:"pie",
+			container:"chart",
+			value:"#sales#",
+			pieInnerText:"#sales#",
+			label:"#year#"
+		});
+		pieChart.parse(data,"json");
+	}
+	</script>
+</head>
+<body >
+	<p>There are two properties to define sectors labels:
+	<li>label - defines text outside sectors</li>
+	<li>pieInnerText - set text inside sectors</li>
+	</p>
+	
+	<div id="chart" style="width:450px;height:300px;"></div></td>
+	
+	
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/03_3d_chart.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/03_3d_chart.html
new file mode 100644
index 00000000000..957f7ed7954
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/03_3d_chart.html
@@ -0,0 +1,48 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>3D view</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+	    { sales:"10.5", component:"dhxGrid",color:"#c7e1f3" },
+		{ sales:"8.7", component:"dhxScheduler",color:"#45abf5" },
+	    { sales:"6.3", component:"dhxTree",color:"#3590d0" },
+		{ sales:"5.3", component:"dhxTabbar",color:"#BDDBF9" },
+		{ sales:"4.5", component:"dhxLayout",color:"#d9e5ed" },
+		{ sales:"4.2", component:"dhxMenu",color:"#aed7f4" }
+	];
+	
+	window.onload = function(){
+		var chart =  new dhtmlXChart({
+			view:"pie3D",
+			container:"chart",
+			value:"#sales#",
+			label:function(obj){
+				var sum = chart.sum("#sales#");
+				return obj.component+" ("+Math.round(parseFloat(obj.sales)/sum*100)+"%)";
+			},
+			color:"#color#",
+			radius:110
+		});
+		chart.parse(data,"json");
+	}
+
+	</script>
+</head>
+<body>
+	<div id="chart" style="width:500px;height:300px;border:1px solid #A4BED4;"></div></td>
+	
+	
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/04_legend.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/04_legend.html
new file mode 100644
index 00000000000..2d5c45c0151
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/04_pie_chart/04_legend.html
@@ -0,0 +1,81 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Details Block</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	window.onload = function(){
+	var pieChart =  new dhtmlXChart({
+		view:"pie",
+		container:"chart1",
+		value:"#sales#",
+		pieInnerText:"#sales#",
+		gradient:true,
+		tooltip:{
+			template:"#sales#"
+		},
+		legend:"#year#"
+	});
+	pieChart.parse(data,"json");
+	
+	
+	var pieChart2 =  new dhtmlXChart({
+		view:"pie",
+		container:"chart2",
+		value:"#sales#",
+		pieInnerText:"#sales#",
+		gradient:true,
+		legend:{
+			width: 75,
+			align:"right",
+			valign:"middle",
+			marker:{
+				type:"round",
+				width:15
+			},
+			template:"#year#"
+		}
+	});
+	pieChart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<p>Pie Chart provides property "details" that displayes informationa about all sectors in a separate block.</p>
+	
+	<table>
+		<tr>
+			<td>PieChart with default details block</td>
+			<td>PieChart with custom details block</td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/01_init.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/01_init.html
new file mode 100644
index 00000000000..626a1e216fe
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/01_init.html
@@ -0,0 +1,55 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Initialization</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	var chart =  new dhtmlXChart({
+		view:"line",
+		container:"chart",
+	    value:"#sales#",
+		label:"#year#",
+		tooltip:{
+			template:"#sales#"
+		},
+		item:{
+			borderColor: "#ffffff",
+			color: "#000000"
+		},
+		line:{
+			color:"#ff9900",
+			width:3
+		}
+	})
+	chart.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<div id="chart" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+</body>
+</html>
+
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/02_style.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/02_style.html
new file mode 100644
index 00000000000..39dfe7eb41f
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/02_style.html
@@ -0,0 +1,153 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Style definition</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	window.onload = function(){
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	var chart1 =  new dhtmlXChart({
+		view:"line",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#year#",
+		tooltip:{
+			template:"#sales#"
+		},
+		item:{
+			borderColor: "#ffffff",
+			color: "#000000"
+		},
+		line:{
+			color:"#ff9900",
+			width:3
+		}
+	})
+	chart1.parse(data,"json");
+	
+	var chart2 =  new dhtmlXChart({
+		view:"line",
+		container:"chart2",
+	    value:"#sales#",
+		label:"#year#",
+		tooltip:{
+			template:"#sales#"
+		},
+		item:{
+			borderColor: "#3399ff",
+			color: "#ffffff"
+		},
+		line:{
+			color:"#3399ff",
+			width:3
+		}
+	})
+	chart2.parse(data,"json");
+	
+	var data2 = [
+		{ sales:"1.2", year:"2000" },
+		{ sales:"2.4", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"5.9", year:"2005" },
+		{ sales:"6.5", year:"2006" },
+		{ sales:"6.1", year:"2007" },
+		{ sales:"6.0", year:"2008" },
+		{ sales:"6.2", year:"2009" }
+	];
+	var chart3 =  new dhtmlXChart({
+		view:"line",
+		container:"chart3",
+	    value:"#sales#",
+		item:{
+			radius:0
+		},
+		line:{
+			color:"#b25151",
+			width:3
+		},
+		xAxis:{
+			title:"Years",
+			template:"#year#",
+			lines:true
+		},
+		yAxis:{
+			start: 0,
+			end: 10,
+			step: 1,
+			title:"Sales, mil"
+		},
+		tooltip:{
+			template:"#year#"
+		}
+	})
+	chart3.parse(data2,"json");
+	
+	var chart4 =  new dhtmlXChart({
+		view:"line",
+		container:"chart4",
+	    value:"#sales#",
+		item:{
+			borderColor: "#000000",
+			color: "#ffffff",
+			borderWidth:1,
+			radius:3
+		},
+		line:{
+			color:"#3399ff",
+			width:3
+		},
+		xAxis:{
+			title:"Years",
+			template:"#year#"
+		},
+		yAxis:{
+			start: 0,
+			end: 10,
+			step: 1,
+			title:"Sales, mil",
+			lines:false
+		},
+		tooltip:{
+			template:"#year#"
+		}
+	})
+	chart4.parse(data2,"json");
+	}
+	</script>
+</head>
+<body >
+	<table>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+		<tr>
+			<td><div id="chart3" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart4" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/03_scale.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/03_scale.html
new file mode 100644
index 00000000000..161cbf7ee53
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/03_scale.html
@@ -0,0 +1,101 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Scales</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	var chart1 =  new dhtmlXChart({
+		view:"line",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		tooltip:{
+			template:"#sales#"
+		},
+		item:{
+			borderColor: "#ffffff",
+			color: "#000000"
+		},
+		line:{
+			color:"#ff9900",
+			width:3
+		},
+		yAxis:{},
+		xAxis:{
+			title:"Years",
+			template:"#year#"
+		}
+	})
+	chart1.parse(data,"json");
+	
+	var chart2 =  new dhtmlXChart({
+		view:"line",
+		container:"chart2",
+	    value:"#sales#",
+		tooltip:{
+			template:"#sales#"
+		},
+		item:{
+			borderColor: "#3399ff",
+			color: "#ffffff"
+		},
+		line:{
+			color:"#3399ff",
+			width:3
+		},
+		xAxis:{
+			title:"Years",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			end:10,
+			step:1,
+			title:"Sales, million"
+		},
+		item:{
+			borderColor: "#3399ff",
+			color: "#ffffff"
+		}
+	})
+	chart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body >
+	<table>
+		<tr>
+			<td>Automatic vertical scale</td>
+			<td>Custom vertical scale</td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+</body>
+</html>
+
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/04_spline.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/04_spline.html
new file mode 100644
index 00000000000..4f266ee8983
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/04_spline.html
@@ -0,0 +1,57 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Initialization</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	var chart =  new dhtmlXChart({
+		view:"spline",
+		container:"chart",
+	    value:"#sales#",
+		label:"#year#",
+		tooltip:{
+			template:"#sales#"
+		},
+		item:{
+			borderColor: "#ffffff",
+			color: "#000000"
+		},
+		line:{
+			color:"#ff9900",
+			width:3
+		},
+		padding:{
+			left:15
+		}
+	})
+	chart.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<div id="chart" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/05_series.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/05_series.html
new file mode 100644
index 00000000000..532cd385519
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/05_line_chart/05_series.html
@@ -0,0 +1,94 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Scales</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ "companyA":"-1.9", "companyB":1, year:"2000" },
+		{ "companyA":"-0.8", "companyB":0.8, year:"2001" },
+		{ "companyA":"3.4", "companyB":1.9, year:"2002" },
+		{ "companyA":"4.1", "companyB":2.5, year:"2003" },
+		{ "companyA":"4.3", "companyB":3.1, year:"2004" },
+		{ "companyA":"5.9", "companyB":4.5, year:"2005" },
+		{ "companyA":"6.1", "companyB":5.7, year:"2006" },
+		{ "companyA":"6.5", "companyB":7.2, year:"2007" },
+		{ "companyA":"5.2", "companyB":6.5, year:"2008" },
+		{ "companyA":"4.8", "companyB":6.8, year:"2009" }
+	];
+	
+	window.onload = function(){
+		var chart1 =  new dhtmlXChart({
+			view:"line",
+			container:"chart1",
+	    	value:"#companyA#",
+			item:{
+				borderColor: "#3399ff",
+				color: "#ffffff"
+			},
+			line:{
+				color:"#3399ff",
+				width:3
+			},
+			xAxis:{
+				template:"#year#"
+			},
+			yAxis:{
+				start:-2,
+				step:1,
+				end:8
+			},
+			padding:{
+				left:35,
+				bottom:20
+			},
+			origin:0,
+			legend:{
+				layout:"x",
+				width: 75,
+				align:"center",
+				valign:"bottom",
+				marker:{
+					type:"round",
+					width:15
+				},
+				values:[
+					{text:"company A",color:"#3399ff"},
+					{text:"company B",color:"#66cc00"}
+				]
+			}
+		})
+		
+	
+		chart1.addSeries({
+			value:"#companyB#",
+			item:{
+				borderColor: "#66cc00",
+				color: "#ffffff"
+			},
+			line:{
+				color:"#66cc00",
+				width:3
+			}
+		})
+		chart1.parse(data,"json");
+	}
+	</script>
+</head>
+<body >
+	<table>
+		<tr>
+			<td><div id="chart1" style="width:500px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/01_init.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/01_init.html
new file mode 100644
index 00000000000..e31ae20dd39
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/01_init.html
@@ -0,0 +1,74 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>PieChart: Initiazation</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	var barChart1 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#year#",
+		width:30,
+		gradient:true,
+		border:false
+	})
+	barChart1.parse(data,"json");
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart2",
+		value:"#sales#",
+		label:"#sales#",
+		color:"#66ccff",
+		gradient:"3d",
+		//border:false,
+		width:25,
+		padding:{
+			bottom:0,
+			right:50,
+			left:50
+		}
+	});
+	barChart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body >
+	<h1>BarChart: Initiazation</h1>
+	
+	<table>
+		<tr>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/02_text.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/02_text.html
new file mode 100644
index 00000000000..ee378b194f1
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/02_text.html
@@ -0,0 +1,80 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>PieChart: Initiazation</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+</head>
+<body >
+	<h1>BarChart: Initiazation</h1>
+	
+	<table>
+		<tr>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	
+	var barChart1 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		color:"#66cc33",
+		width:50,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		}
+	})
+	barChart1.parse(data,"json");
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart2",
+		value:"#sales#",
+		label:"#sales#",
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Years",
+			template:"#year#"
+		}
+	});
+	barChart2.parse(data,"json");
+
+	</script>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/03_scales.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/03_scales.html
new file mode 100644
index 00000000000..edc1f6ca45d
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/03_scales.html
@@ -0,0 +1,99 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>PieChart: Initiazation</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+</head>
+<body >
+	<h1>BarChart: Scales</h1>
+	
+	<table>
+		<tr>
+			<td>Custom vertical scale and origin</td>
+			<td>Automatic vertical scale</td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	<script>
+	var data = [
+		{ sales:"-2.0", year:"2000" },
+		{ sales:"-0.4", year:"2001" },
+		{ sales:"1.1", year:"2002" },
+		{ sales:"3.3", year:"2003" },
+		{ sales:"1.2", year:"2004" },
+		{ sales:"1.8", year:"2005" },
+		{ sales:"4.1", year:"2006" },
+		{ sales:"5.5", year:"2007" },
+		{ sales:"3.5", year:"2008" },
+		{ sales:"1.8", year:"2009" }
+	];
+	
+	
+	
+	
+	var barChart1 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		width:30,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			template:"#year#",
+			title:"Year"
+		},
+		
+		yAxis:{
+			start:-3,
+			end:7,
+			step:1,
+			title:"Profit"
+		},		
+		origin:0,
+		gradient:true,
+		border:false
+	})
+	barChart1.parse(data,"json");
+	
+	
+	
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart2",
+		value:"#sales#",
+		gradient:true,
+		border:false,
+		width:30,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			template:"#year#",
+			title:"Year"
+		},
+		yAxis:{
+			title:"Profit"
+		}
+		
+	});
+	barChart2.parse(data,"json");
+
+	</script>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/04_styles.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/04_styles.html
new file mode 100644
index 00000000000..0877a95de16
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/04_styles.html
@@ -0,0 +1,207 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Chart</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+</head>
+<body >
+	<h1>Chart</h1>
+	<table>
+		<tr>
+			<td><div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart3" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+		<tr>
+			
+			
+		</tr>
+		<tr>
+			<td><div id="chart4" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart5" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart6" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	
+	var barChart1 =  new dhtmlXChart({
+		view:"bar",
+		alpha:function(data){
+			return data.sales/10;
+		},
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		color:"#66cc33",
+		width:50,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			end:10,
+			step:1,
+			title:"Sales, million"
+		}
+	})
+	barChart1.parse(data,"json");
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart2",
+		value:"#sales#",
+		label:"#sales#",
+		width:2,
+		border:false,
+
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Years",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			end:10,
+			step:1,
+			title:"Sales,<br/>million"
+		}
+		
+	})
+	barChart2.parse(data,"json");
+
+	
+	var barChart3 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart3",
+	    value:"#sales#",
+		label:"#sales#",
+		width:35,
+		border:false,
+		gradient:true,
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			end:10,
+			step:1,
+			title:"Sales,<br/>million"
+		}
+	});
+	barChart3.parse(data,"json");
+	
+	var barChart4 =  new dhtmlXChart({
+		view:"bar",
+		alpha:function(data){
+			return data.sales/10;
+		},
+		container:"chart4",
+	    value:"#sales#",
+		label:"#sales#",
+		width:50,
+		gradient:function(gradient){
+			gradient.addColorStop(1.0,"#FF0000");
+			gradient.addColorStop(0.3,"#FFFF00");
+			gradient.addColorStop(0.0,"#00FF22");
+		},
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			end:10,
+			step:1,
+			title:"Sales,<br/>million"
+		}
+	})
+	barChart4.parse(data,"json");
+	
+		
+	var barChart5 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart5",
+	    value:"#sales#",
+		label:"#sales#",
+		width:35,
+
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			end:10,
+			step:1,
+			title:"Sales,<br/>million"
+		}
+	})
+	barChart5.parse(data,"json");
+	
+	var barChart6 =  new dhtmlXChart({
+		view:"bar",
+		alpha:function(data){
+			return data.sales/10;
+		},
+		container:"chart6",
+	    value:"#sales#",
+		label:"#sales#",
+		color:"#66cc33",
+		border:false,
+		width:30,
+		radius:0,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			end:10,
+			step:1,
+			title:"Sales,<br/>million"
+		}
+	})
+	barChart6.parse(data,"json");
+	
+	</script>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/05_stacked_chart.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/05_stacked_chart.html
new file mode 100644
index 00000000000..d165d0bd488
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/05_stacked_chart.html
@@ -0,0 +1,87 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>StackedBar Chart</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+</head>
+<body onload="init()">
+	<h1>StackedBar Chart</h1>
+	<div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
+	
+	
+	<script>
+	var data = [
+		{ sales:"3.0",sales1:"3.4",sales2:"1.2",sales3:"6.9", year:"2000" },
+		{ sales:"5.0",sales1:"5.0",sales2:"5.0",sales3:"5.0", year:"2001" },
+		{ sales:"3.4",sales1:"4.7",sales2:"1.9",sales3:"5.5", year:"2002" }
+	];
+	function init(){
+		var barChart1 =  new dhtmlXChart({
+			view:"stackedBar",
+			container:"chart1",
+		    value:"#sales#",
+			label:"#sales#",
+			width:60,
+			tooltip:{
+				template:"#sales#"
+			},
+			xAxis:{
+				title:"Sales per year",
+				template:"#year#"
+			},
+			yAxis:{
+				title:"Sales,million"
+			},
+			gradient:"3d",
+			//border:false,
+			color: "#66cc33",
+			legend:{
+				values:[{text:"department A",color:"#66cc33"},{text:"department B",color:"#ff9933"},{text:"department C",color:"#ffff99"},{text:"department D",color:"#66ffcc"}],
+				valign:"top",
+				align:"right",
+				width:120,
+				layout:"y",
+				marker:{
+					width:15,
+					type:"round"
+				}
+			}
+		})
+		barChart1.addSeries({
+		    value:"#sales1#",
+			color:"#ff9933",
+			label:"#sales1#",
+			tooltip:{
+				template:"#sales1#"
+			}
+		});
+		barChart1.addSeries({
+		    value:"#sales2#",
+			color:"#ffff99",
+			label:"#sales2#",
+			tooltip:{
+				template:"#sales2#"
+			}
+		});
+		barChart1.addSeries({
+		    value:"#sales3#",
+			color:"#66ffcc",
+			label:"#sales3#",
+			tooltip:{
+				template:"#sales3#"
+			}
+		});
+		barChart1.parse(data,"json");	
+	}
+</script>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/06_series.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/06_series.html
new file mode 100644
index 00000000000..3c5fb695692
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/06_series.html
@@ -0,0 +1,81 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Series</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+</head>
+<body >
+	<h1>Series</h1>
+	
+	<div id="chart" style="width:500px;height:300px;border:1px solid #A4BED4;"></div>
+	
+	<script>
+	var data = [
+		{ sales:"4.2",sales1:"3.4",sales2:"1.2", year:"2000" },
+		{ sales:"3.8",sales1:"4.5",sales2:"2.5", year:"2001" },
+		{ sales:"3.4",sales1:"4.7",sales2:"1.9", year:"2002" }
+	];
+	
+	
+	
+	var barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart",
+	    value:"#sales#",
+		label:"#sales#",
+		width:30,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+			start:0,
+			step:1,
+			end:5,
+			title:"Sales,million"
+		},
+		gradient:true,
+		border:false,
+		color: "#66cc33",
+		legend:{
+			values:[{text:"department A",color:"#66cc33"},{text:"department B",color:"#ff9933"},{text:"department C",color:"#ffff99"}],
+			valign:"top",
+			align:"center",
+			width:120,
+			layout:"x",
+			marker:{
+				width:15,
+				type:"round"
+			}
+		}
+	})
+	barChart.addSeries({
+	    value:"#sales1#",
+		color:"#ff9933",
+		label:"#sales1#"
+	});
+	barChart.addSeries({
+	    value:"#sales2#",
+		color:"#ffff99",
+		label:"#sales2#"
+	});
+	barChart.parse(data,"json");
+	
+	
+
+
+	</script>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/07_horizonal_bars.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/07_horizonal_bars.html
new file mode 100644
index 00000000000..6c8046c5855
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/07_horizonal_bars.html
@@ -0,0 +1,120 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Horizontal bar Chart</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+</head>
+<body >
+	<h3>Horizontal bar Chart</h3>
+	
+	<table>
+		
+		<tr>
+			<td><div id="chart1" style="width:450px;height:350px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:450px;height:350px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	
+	var data2 = [
+		{ sales:"3.0",sales1:"3.4",sales2:"1.2",sales3:"6.9", year:"2007" },
+		{ sales:"3.8",sales1:"4.5",sales2:"2.5",sales3:"7.5", year:"2008" },
+		{ sales:"3.4",sales1:"4.7",sales2:"1.9",sales3:"5.5", year:"2009" }
+	];
+	var barChart1 =  new dhtmlXChart({
+		view:"barH",
+		container:"chart1",
+	    value:"#sales#",
+		width:50,
+		label: "#sales#",
+		gradient:"3d",
+		color:"#ffcc00",
+		xAxis:{
+			title:"Sales per year",
+			lines: true
+		},
+		yAxis:{
+			title:"Year",
+			template:"#year#"
+		},
+		padding:{
+			left:75,
+			right:30
+		}
+	})
+	barChart1.parse(data,"json");
+
+
+	
+	var barChart2 =  new dhtmlXChart({
+		view:"barH",
+		container:"chart2",
+	    value:"#sales#",
+		label:"#sales#",
+		width:30,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year"
+		},
+		yAxis:{
+			title:"Year",
+			template:"#year#"
+		},
+		gradient:true,
+		border:false,
+		color: "#66cc33",
+		legend:{
+			values:[{text:"department A",color:"#66cc33"},{text:"department B",color:"#ff9933"},{text:"department C",color:"#ffff99"}],
+			
+			width:120,
+			align:"right",
+			valign:"middle",
+			marker:{
+				width:15,
+				type:"round"
+			}
+		},
+		padding:{
+			left:65
+		}
+	});
+	barChart2.addSeries({
+	    value:"#sales1#",
+		color:"#ff9933",
+		label:"#sales1#"
+	});
+	barChart2.addSeries({
+	    value:"#sales2#",
+		color:"#ffff99",
+		label:"#sales2#"
+	});
+	barChart2.parse(data2,"json");
+	</script>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/08_horizonal_stacked_bars.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/08_horizonal_stacked_bars.html
new file mode 100644
index 00000000000..fe4d8509376
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/06_bar_chart/08_horizonal_stacked_bars.html
@@ -0,0 +1,75 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Horizontal Stacked Bars</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+<script>
+	
+var data = [
+	{ sales:"3.0",sales1:"3.4",sales2:"1.2",sales3:"6.9", year:"2007" },
+	{ sales:"5.0",sales1:"5.0",sales2:"5.0",sales3:"5.0", year:"2008" },
+	{ sales:"3.4",sales1:"4.7",sales2:"1.9",sales3:"5.5", year:"2009" }
+];
+	
+window.onload = function(){
+	barChart =  new dhtmlXChart({
+		view:"stackedBarH",
+		container:"chart",
+	    value:"#sales#",
+		width:50,
+		label: "#sales#",
+		gradient:"3d",
+		color: "#66cc33",
+		xAxis:{
+			title:"Sales per year",
+			lines: false
+		},
+		yAxis:{
+			title:"Year",
+			template:"#year#"
+		},
+		padding:{left:75},
+		legend:{
+			values:[{text:"department A",color:"#66cc33"},{text:"department B",color:"#ff9933"},{text:"department C",color:"#ffff66"},{text:"department D",color:"#66ffcc"}],
+			valign:"top",
+			align:"left",
+			width:120,
+			layout:"x",
+			marker:{
+				width:15,
+				type:"round"
+			}
+		}
+	}) 
+	barChart.addSeries({
+	    value:"#sales1#",
+		color:"#ff9933",
+		label:"#sales1#"
+	});
+	barChart.addSeries({
+	    value:"#sales2#",
+		color:"#ffff66",
+		label:"#sales2#"
+	});
+	barChart.addSeries({
+	    value:"#sales3#",
+		color:"#66ffcc",
+		label:"#sales3#"
+	});
+	barChart.parse(data,"json");
+}
+	</script>
+</head>
+<body>
+	<div id="chart" style="width:480px;height:350px;border:1px solid #A4BED4;"></div></td>
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/01_init.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/01_init.html
new file mode 100644
index 00000000000..5195e7476e1
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/01_init.html
@@ -0,0 +1,55 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Initialization</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"7.6", year:"2005" },
+		{ sales:"7.8", year:"2006" },
+		{ sales:"7.2", year:"2007" },
+		{ sales:"5.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	var chart =  new dhtmlXChart({
+		view:"area",
+		container:"chart",
+	    value:"#sales#",
+		label:"#year#",
+		color:"#00ccff",
+		tooltip:{
+			template:"#sales#"
+		},
+		
+		alpha:0.8,
+		padding:{
+			left:0,
+			right:0,
+			bottom:0
+		}
+	})
+	chart.parse(data,"json");
+	}
+	</script>
+</head>
+<body>
+	<div id="chart" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
+</body>
+</html>
+
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/02_scale.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/02_scale.html
new file mode 100644
index 00000000000..e3d65bd6d55
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/02_scale.html
@@ -0,0 +1,101 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Scales</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<style>
+	.dhx_axis_item_x{
+		font-size: 10px
+	}
+	.dhx_axis_item_y{
+		font-size: 10px
+	}
+	</style>
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"7.6", year:"2005" },
+		{ sales:"7.8", year:"2006" },
+		{ sales:"7.2", year:"2007" },
+		{ sales:"5.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	var chart1 =  new dhtmlXChart({
+		view:"area",
+		container:"chart1",
+	    value:"#sales#",
+		color:"#00ccff",
+		tooltip:{
+			template:"#sales#"
+		},
+		padding:{
+			left:30
+		},
+		yAxis:{
+			start:0,
+			step:1,
+			end:10
+		},
+		xAxis:{
+			lines:true,
+			title:"sales per year",
+			template:"#year#"
+		}
+	})
+	chart1.parse(data,"json");
+	
+	var chart2 =  new dhtmlXChart({
+		view:"area",
+		container:"chart2",
+	    value:"#sales#",
+		tooltip:{
+			template:"#sales#"
+		},
+		color:"#00ccff",
+		xAxis:{
+			title:"sales per year",
+			template:"#year#"
+		},
+		yAxis:{
+		},
+		padding:{
+			left:30
+		},
+		item:{
+			borderColor: "#3399ff",
+			color: "#ffffff"
+		}
+	})
+	chart2.parse(data,"json");
+	}
+	</script>
+</head>
+<body >
+	<table>
+		<tr>
+			<td>Custom vertical scale</td>
+			<td>Automatic vertical scale</td>
+		</tr>
+		<tr>
+			<td><div id="chart1" style="width:470px;height:300px;border:1px solid #A4BED4;"></div></td>
+			<td><div id="chart2" style="width:470px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+</body>
+</html>
+
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_series.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_series.html
new file mode 100644
index 00000000000..c071386c348
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_series.html
@@ -0,0 +1,90 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Scales</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<style>
+	.dhx_axis_item_x{
+		font-size: 10px
+	}
+	.dhx_axis_item_y{
+		font-size: 10px
+	}
+	</style>
+	<script>
+	var data = [
+		{ sales:3.0, sales1:2.8, sales2:3.4, year:"2000" },
+		{ sales:3.8, sales1:2.5, sales2:2.0, year:"2001" },
+		{ sales:3.4, sales1:1.7, sales2:3.1, year:"2002" },
+		{ sales:4.1, sales1:2.7, sales2:3.5, year:"2003" },
+		{ sales:4.3, sales1:3.6, sales2:4.0, year:"2004" },
+		{ sales:7.6, sales1:3.1, sales2:4.9, year:"2005" },
+		{ sales:7.8, sales1:3.9, sales2:5.2, year:"2006" },
+		{ sales:7.2, sales1:3.6, sales2:5.6, year:"2007" },
+		{ sales:5.3, sales1:2.9, sales2:4.1, year:"2008" },
+		{ sales:4.8, sales1:2.1, sales2:3.9, year:"2009" }
+	];
+	
+	window.onload = function(){
+	var chart1 =  new dhtmlXChart({
+		view:"area",
+		container:"chart",
+	    value:"#sales#",
+		color:"#00ccff",
+		alpha:0.6,
+		padding:{
+			left:30
+		},
+		yAxis:{
+			start:0,
+			step:1,
+			end:8
+		},
+		xAxis:{
+			lines:true,
+			title:"sales per year",
+			template:"#year#"
+		},
+		legend:{
+				layout:"x",
+				width: 75,
+				align:"center",
+				valign:"top",
+				marker:{
+					type:"round",
+					width:15
+				},
+				values:[
+					{text:"company A",color:"#00ccff"},
+					{text:"company B",color:"#0000ff"},
+					{text:"company C",color:"#cc33ff"}
+				]
+			}
+	})
+	chart1.addSeries({
+		value:"#sales1#",
+		color:"#0000ff"
+	})
+	chart1.addSeries({
+		value:"#sales2#",
+		color:"#cc33ff"
+	})
+	chart1.parse(data,"json");
+	
+	}
+	</script>
+</head>
+<body >
+	<div id="chart" style="width:470px;height:300px;border:1px solid #A4BED4;"></div></td>
+			
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_stacked_area.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_stacked_area.html
new file mode 100644
index 00000000000..55fccb93e84
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/07_area_chart/03_stacked_area.html
@@ -0,0 +1,88 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Scales</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<style>
+	.dhx_axis_item_x{
+		font-size: 10px
+	}
+	.dhx_axis_item_y{
+		font-size: 10px
+	}
+	</style>
+	<script>
+	var data = [
+		{ sales:3.0, sales1:2.8, sales2:3.9, year:"2000" },
+		{ sales:3.8, sales1:2.5, sales2:2.0, year:"2001" },
+		{ sales:3.4, sales1:1.7, sales2:3.1, year:"2002" },
+		{ sales:4.1, sales1:2.7, sales2:3.5, year:"2003" },
+		{ sales:4.3, sales1:3.6, sales2:4.0, year:"2004" },
+		{ sales:7.6, sales1:3.1, sales2:4.9, year:"2005" },
+		{ sales:7.8, sales1:3.9, sales2:5.2, year:"2006" },
+		{ sales:7.2, sales1:3.6, sales2:5.6, year:"2007" },
+		{ sales:5.3, sales1:2.9, sales2:4.1, year:"2008" },
+		{ sales:4.8, sales1:2.1, sales2:3.9, year:"2009" }
+	];
+	
+	window.onload = function(){
+	var chart1 =  new dhtmlXChart({
+		view:"stackedArea",
+		container:"chart",
+	    value:"#sales#",
+		color:"#00ccff",
+		alpha:0.6,
+		padding:{
+			left:30
+		},
+		yAxis:{
+			
+		},
+		xAxis:{
+			lines:true,
+			title:"sales per year",
+			template:"#year#"
+		},
+		legend:{
+				layout:"x",
+				width: 75,
+				align:"center",
+				valign:"top",
+				marker:{
+					type:"round",
+					width:15
+				},
+				values:[
+					{text:"company A",color:"#00ccff"},
+					{text:"company B",color:"#0000ff"},
+					{text:"company C",color:"#cc33ff"}
+				]
+			}
+	})
+	chart1.addSeries({
+		value:"#sales1#",
+		color:"#0000ff"
+	})
+	chart1.addSeries({
+		value:"#sales2#",
+		color:"#cc33ff"
+	})
+	chart1.parse(data,"json");
+	
+	}
+	</script>
+</head>
+<body >
+	<div id="chart" style="width:470px;height:300px;border:1px solid #A4BED4;"></div></td>
+			
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/01_add.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/01_add.html
new file mode 100644
index 00000000000..7a3b45f8cee
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/01_add.html
@@ -0,0 +1,83 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Adding</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	var barChart1;
+	
+	window.onload = function(){
+	 	barChart1 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		color:"#b3e025",
+		gradient:true,
+		border:false,
+		width:50,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		padding:{
+			top:20,
+			left:0,
+			right:0
+		}
+	});
+	barChart1.parse(data,"json");
+	}
+	
+	var counter = 2010;
+	function add_new () {
+		barChart1.add({
+			year:counter,
+			sales:(Math.random()*5).toFixed(2)
+		});
+		counter++;
+	}
+	function delete_first(){
+		barChart1.remove(barChart1.first());
+	}
+	</script>
+</head>
+<body>
+	<table>
+		<tr>
+			<td><div id="chart1" style="width:750px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	
+	
+	<input type="button" value="add" onclick="add_new()">
+	<input type="button" value="delete" onclick="delete_first()">
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/02_events.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/02_events.html
new file mode 100644
index 00000000000..495d42bf795
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/02_events.html
@@ -0,0 +1,96 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Events</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	var barChart1;
+	window.onload = function(){
+		barChart1 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		color:"#b3e025",
+		gradient:true,
+		border:false,
+		width:50,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		padding:{
+			top:20,
+			left:0,
+			right:0
+		}
+	});
+	barChart1.parse(data,"json");
+	barChart1.attachEvent("onMouseMove", function(id){
+		id = barChart1.get(id).year;
+		log("onMouseMove", id);
+		return true;
+	});
+	barChart1.attachEvent("onMouseOut", function(id){
+		log("onMouseOut", id);
+		return true;
+	});
+	
+	barChart1.attachEvent("onItemClick", function(id){
+		id = barChart1.get(id).year;
+		log("onItemClick", id);
+		return true;
+	});
+	barChart1.attachEvent("onItemDblClick", function(id){
+		id = barChart1.get(id).year;
+		log("onItemDblClick", id);
+		return true;
+	});
+	
+	}
+
+	function log(name, id){
+		var t = document.createElement("DIV");
+		t.innerHTML = name+" for element "+id;
+		
+		var p = document.getElementById("log_div");
+		p.insertBefore(t, p.firstChild);
+	}
+
+	</script>
+</head>
+<body>
+	<table>
+		<tr>
+			<td><div id="chart1" style="width:750px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	<div id="log_div" style="widht:950px; height:300px; font-family:Tahoma;overflow:auto"></div>
+	
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/03_sorting.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/03_sorting.html
new file mode 100644
index 00000000000..cb8b254fe10
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/03_sorting.html
@@ -0,0 +1,73 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Sorting</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	var barChart1;
+	
+	window.onload = function(){
+	barChart1 =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		color:"#b3e025",
+		gradient:true,
+		border:false,
+		width:50,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		padding:{
+			top:20,
+			left:0,
+			right:0
+		}
+	});
+	barChart1.parse(data,"json");
+	}
+
+	</script>
+</head>
+<body >
+	<table>
+		<tr>
+			<td><div id="chart1" style="width:750px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	
+	<input type="button" value="sort by sales, ASC" onclick="barChart1.sort('#sales#','asc');">
+	<input type="button" value="sort by sales, DESC" onclick="barChart1.sort('#sales#','desc');">
+	<input type="button" value="sort by year, ASC" onclick="barChart1.sort('#year#','asc');">
+	<input type="button" value="sort by year, DESC" onclick="barChart1.sort('#year#','desc');">
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/04_filtering.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/04_filtering.html
new file mode 100644
index 00000000000..230aa820800
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/08_dynamic/04_filtering.html
@@ -0,0 +1,81 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Filtering</title>
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+	
+	window.onload = function(){
+	barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart1",
+	    value:"#sales#",
+		label:"#sales#",
+		color:"#b3e025",
+		gradient:true,
+		border:false,
+		width:50,
+		tooltip:{
+			template:"#sales#"
+		},
+		xAxis:{
+			title:"Sales per year",
+			template:"#year#"
+		},
+		padding:{
+			top:30,
+			left:0,
+			right:0
+		}
+	});
+	barChart.parse(data,"json");
+	}
+
+	function filter_year(){
+		barChart.filter(function(obj){
+			return obj.year >2005;
+		})
+	}
+	function filter_sales(){
+		barChart.filter(function(obj){
+			return obj.sales < 8;
+		})
+	}
+	
+	</script>
+</head>
+<body>
+	<table>
+		<tr>
+			<td><div id="chart1" style="width:750px;height:300px;border:1px solid #A4BED4;"></div></td>
+		</tr>
+	</table>
+	
+	
+	
+	<input type="button" value="show all" onclick="barChart.filter();">
+	<input type="button" value="show year > 2005" onclick="filter_year()">
+	<input type="button" value="show sales < 8" onclick="filter_sales()">
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/01_dhtmlxgrid.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/01_dhtmlxgrid.html
new file mode 100644
index 00000000000..698da15d9fd
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/01_dhtmlxgrid.html
@@ -0,0 +1,70 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+	<title>Integration with grid</title>
+	<link rel='STYLESHEET' type='text/css' href='../../../dhtmlxGrid/codebase/dhtmlxgrid.css'>
+	<link rel='STYLESHEET' type='text/css' href='../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css'>
+	<script src='../../../dhtmlxGrid/codebase/dhtmlxcommon.js'></script>
+	<script src='../../../dhtmlxGrid/codebase/dhtmlxgrid.js'></script>
+	<script src='../../../dhtmlxGrid/codebase/dhtmlxgridcell.js'></script>	
+	
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var barChart;
+	window.onload = function(){
+	barChart =  new dhtmlXChart({
+		view:"bar",
+		color:"#66ccff",
+		gradient:"3d",
+		container:"chart_container",
+	    value:"#data0#",
+		label:"#data0#",
+		radius:3,
+		tooltip:{
+			template:"#data0#"
+		},
+		width:30,
+		origin:0,
+		yAxis:{},
+		xAxis:{
+			template:function(){return ""}
+		},
+		border:false
+	});
+	
+	function refresh_chart(){
+		barChart.clearAll();
+		barChart.parse(mygrid,"dhtmlxgrid");
+	};
+	
+	mygrid = new dhtmlXGridObject('gridbox');
+	mygrid.setImagePath('../../../dhtmlxGrid/codebase/imgs/');
+	mygrid.setSkin("dhx_skyblue")
+	mygrid.loadXML("../../../dhtmlxGrid/samples/common/gridH.xml",refresh_chart);
+	mygrid.attachEvent("onEditCell",function(stage){
+		if (stage == 2)
+			refresh_chart();
+		return true;
+	});
+    }
+</script>
+</head>
+
+<body>
+	
+	<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
+	<hr>
+	<div id="chart_container" style="width:500px;height:300px;"></div>
+	
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/02_dhtmlxgrid_group.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/02_dhtmlxgrid_group.html
new file mode 100644
index 00000000000..d911e209922
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/02_dhtmlxgrid_group.html
@@ -0,0 +1,79 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+	<title>Integration with Grid and Grouping</title>
+	<link rel='STYLESHEET' type='text/css' href='../../../dhtmlxGrid/codebase/dhtmlxgrid.css'>
+	<link rel='STYLESHEET' type='text/css' href='../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css'>
+	<script src='../../../dhtmlxGrid/codebase/dhtmlxcommon.js'></script>
+	<script src='../../../dhtmlxGrid/codebase/dhtmlxgrid.js'></script>
+	<script src='../../../dhtmlxGrid/codebase/dhtmlxgridcell.js'></script>	
+	
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	<script>
+	var barChart;
+	window.onload = function(){
+		barChart =  new dhtmlXChart({
+		view:"bar",
+		container:"chart_container",
+	    value:"#sales#",
+		label:"#sales#",
+		sort:{
+			by:"#sales#",
+			as:"int"
+		},
+		group:{
+			by:"#data2#",
+			map:{
+				author:["#data2#"],
+				sales:["#data0#","sum"]
+			}
+		},
+		xAxis:{
+			template:"#author#"
+		},
+		padding:{
+			left:0,
+			right:0
+		},
+		color:"#45abf5",
+		gradient:true,
+		width:50,
+		border:false
+	});
+	
+	function refresh_chart(){
+		barChart.clearAll();
+		barChart.parse(mygrid,"dhtmlxgrid");
+	};
+	
+	mygrid = new dhtmlXGridObject('gridbox');
+	mygrid.setImagePath('../../../dhtmlxGrid/codebase/imgs/');
+	mygrid.setSkin("dhx_skyblue")
+	mygrid.loadXML("../../../dhtmlxGrid/samples/common/gridH.xml",refresh_chart);
+	mygrid.attachEvent("onEditCell",function(stage){
+		if (stage == 2)
+			refresh_chart();
+		return true;
+	});
+    }
+</script>
+</head>
+
+<body>
+	
+	<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
+	<hr>
+	<div id="chart_container" style="width:600px;height:300px;"></div>
+
+</body>
+</html>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/03_windows.html b/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/03_windows.html
new file mode 100644
index 00000000000..822e621d9ca
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/09_integration/03_windows.html
@@ -0,0 +1,77 @@
+<!--conf
+<sample>
+              <product version="2.6" edition="std"/>
+                     <modifications>
+                            <modified date="100609"/>
+                     </modifications>
+               </sample>
+ -->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+	<title>Integration with dhtmlxWindows</title>
+	
+	<link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/dhtmlxwindows.css">
+	<link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
+	
+	<script src="../../../dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
+	<script src="../../../dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
+	<script src="../../../dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
+	
+	<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
+	<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
+	
+</head>
+<style type="text/css" media="screen">
+	html, body{
+		height:100%;
+		padding:0px;
+		margin:0px;
+	}
+</style>
+<body onload="doOnLoad();">
+
+<script>
+	var dhxWins
+	var data = [
+		{ sales:"3.0", year:"2000" },
+		{ sales:"3.8", year:"2001" },
+		{ sales:"3.4", year:"2002" },
+		{ sales:"4.1", year:"2003" },
+		{ sales:"4.3", year:"2004" },
+		{ sales:"9.9", year:"2005" },
+		{ sales:"7.4", year:"2006" },
+		{ sales:"9.0", year:"2007" },
+		{ sales:"7.3", year:"2008" },
+		{ sales:"4.8", year:"2009" }
+	];
+
+	
+	function doOnLoad() {
+		dhxWinsParams = {
+			image_path: "../../../dhtmlxWindows/codebase/imgs/",
+			wins: [ {id: "w1", left: 230, top: 230, width: 420, height: 340}]
+		};
+		dhxWins = new dhtmlXWindows(dhxWinsParams);
+		pieChart2 = dhxWins.window("w1").attachChart({
+			view:"pie",
+			value:"#sales#",
+			pieInnerText:"#sales#",
+			gradient:true,
+			details:{
+				width: 75,
+				align:"right",
+				valign:top,
+				marker:{
+					type:"round",
+					width:15
+				},
+				template:"#year#"
+			}
+		});
+		
+		pieChart2.parse(data,"json");
+	};
+</script>
+</body>
\ No newline at end of file
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/common/config.php b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/config.php
new file mode 100644
index 00000000000..3695ac3905a
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/config.php
@@ -0,0 +1,13 @@
+<?php
+/*
+Copyright DHTMLX LTD. http://www.dhtmlx.com
+This version of Software is free for using in non-commercial applications.
+For commercial use please contact sales@dhtmlx.com to obtain license
+*/
+
+    $mysql_host = "localhost";
+    $mysql_user = "root";
+    $mysql_pasw = "";
+    $mysql_db   = "sampledb";
+
+?>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/common/data.php b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/data.php
new file mode 100644
index 00000000000..ac8f5116a9d
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/data.php
@@ -0,0 +1,16 @@
+<?php
+
+$str = "<data>";
+
+for ($i=1; $i <= 100; $i++) { 
+	$sales = rand(100,1000);
+	$year = rand(1996,2009);
+	$company = "Company ".rand(1,3);
+	$str.="<item id='{$i}' sales='{$sales}' year='{$year}' company='{$company}'></item>";
+}
+
+$str .= "</data>";
+
+file_put_contents("stat.xml",$str);
+
+?>
\ No newline at end of file
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/common/sales.xml b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/sales.xml
new file mode 100644
index 00000000000..03c153cb1e5
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/sales.xml
@@ -0,0 +1,46 @@
+<data>
+	<item id="1">
+		<sales>2.9</sales>
+		<year>2000</year>
+	</item>
+	<item id="2">
+		<sales>3.5</sales>
+		<year>2001</year>
+	</item>
+	<item id="3">
+		<sales>3.1</sales>
+		<year>2002</year>
+	</item>
+	<item id="4">
+		<sales>4.2</sales>
+		<year>2003</year>
+	</item>
+	<item id="5">
+		<sales>4.5</sales>
+		<year>2004</year>
+	</item>
+	<item id="6">
+		<sales>7.4</sales>
+		<year>2005</year>
+	</item>
+	<item id="7">
+		<sales>9.6</sales>
+		<year>2006</year>
+	</item>
+	<item id="8">
+		<sales>9</sales>
+		<year>2007</year>
+	</item>
+	<item id="9">
+		<sales>7.3</sales>
+		<year>2008</year>
+	</item>
+	<item id="10">
+		<sales>5.8</sales>
+		<year>2009</year>
+	</item>
+	<item id="11">
+		<sales>7.7</sales>
+		<year>2010</year>
+	</item>
+</data>
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/common/stat.xml b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/stat.xml
new file mode 100644
index 00000000000..824ff6f6829
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/common/stat.xml
@@ -0,0 +1 @@
+<data><item id='1' sales='262' year='2003' company='Company 3'></item><item id='2' sales='527' year='1998' company='Company 1'></item><item id='3' sales='629' year='2006' company='Company 3'></item><item id='4' sales='403' year='2008' company='Company 2'></item><item id='5' sales='652' year='2005' company='Company 3'></item><item id='6' sales='708' year='2006' company='Company 3'></item><item id='7' sales='377' year='2006' company='Company 2'></item><item id='8' sales='714' year='2004' company='Company 3'></item><item id='9' sales='385' year='2000' company='Company 3'></item><item id='10' sales='113' year='2002' company='Company 3'></item><item id='11' sales='215' year='2004' company='Company 2'></item><item id='12' sales='149' year='2003' company='Company 1'></item><item id='13' sales='391' year='1996' company='Company 3'></item><item id='14' sales='234' year='2006' company='Company 2'></item><item id='15' sales='847' year='2003' company='Company 3'></item><item id='16' sales='878' year='2008' company='Company 1'></item><item id='17' sales='248' year='2004' company='Company 2'></item><item id='18' sales='311' year='2007' company='Company 1'></item><item id='19' sales='724' year='1996' company='Company 1'></item><item id='20' sales='113' year='2003' company='Company 3'></item><item id='21' sales='884' year='2003' company='Company 1'></item><item id='22' sales='936' year='1996' company='Company 2'></item><item id='23' sales='550' year='2001' company='Company 3'></item><item id='24' sales='923' year='2006' company='Company 2'></item><item id='25' sales='977' year='2005' company='Company 1'></item><item id='26' sales='446' year='2002' company='Company 3'></item><item id='27' sales='578' year='1999' company='Company 3'></item><item id='28' sales='521' year='1999' company='Company 2'></item><item id='29' sales='554' year='2002' company='Company 1'></item><item id='30' sales='335' year='2005' company='Company 2'></item><item id='31' sales='612' year='2006' company='Company 3'></item><item id='32' sales='173' year='2000' company='Company 1'></item><item id='33' sales='995' year='2005' company='Company 3'></item><item id='34' sales='743' year='2006' company='Company 2'></item><item id='35' sales='904' year='2003' company='Company 2'></item><item id='36' sales='696' year='2007' company='Company 1'></item><item id='37' sales='526' year='2008' company='Company 2'></item><item id='38' sales='459' year='1997' company='Company 1'></item><item id='39' sales='357' year='2007' company='Company 2'></item><item id='40' sales='655' year='2009' company='Company 2'></item><item id='41' sales='527' year='2009' company='Company 3'></item><item id='42' sales='526' year='2008' company='Company 2'></item><item id='43' sales='125' year='1998' company='Company 2'></item><item id='44' sales='865' year='2003' company='Company 3'></item><item id='45' sales='125' year='2000' company='Company 2'></item><item id='46' sales='633' year='2002' company='Company 2'></item><item id='47' sales='911' year='2006' company='Company 3'></item><item id='48' sales='791' year='2008' company='Company 2'></item><item id='49' sales='700' year='2006' company='Company 3'></item><item id='50' sales='921' year='1996' company='Company 3'></item><item id='51' sales='267' year='2000' company='Company 2'></item><item id='52' sales='350' year='2005' company='Company 1'></item><item id='53' sales='477' year='2006' company='Company 1'></item><item id='54' sales='180' year='1997' company='Company 3'></item><item id='55' sales='699' year='2008' company='Company 3'></item><item id='56' sales='808' year='2000' company='Company 2'></item><item id='57' sales='837' year='1999' company='Company 2'></item><item id='58' sales='352' year='2004' company='Company 2'></item><item id='59' sales='656' year='1999' company='Company 2'></item><item id='60' sales='279' year='2002' company='Company 3'></item><item id='61' sales='907' year='2004' company='Company 3'></item><item id='62' sales='227' year='1997' company='Company 2'></item><item id='63' sales='845' year='2002' company='Company 2'></item><item id='64' sales='931' year='2003' company='Company 3'></item><item id='65' sales='264' year='2006' company='Company 1'></item><item id='66' sales='846' year='2005' company='Company 1'></item><item id='67' sales='616' year='1999' company='Company 2'></item><item id='68' sales='877' year='1998' company='Company 2'></item><item id='69' sales='738' year='1997' company='Company 3'></item><item id='70' sales='999' year='2008' company='Company 2'></item><item id='71' sales='674' year='2006' company='Company 1'></item><item id='72' sales='483' year='2006' company='Company 3'></item><item id='73' sales='105' year='2002' company='Company 1'></item><item id='74' sales='826' year='2005' company='Company 3'></item><item id='75' sales='372' year='2004' company='Company 2'></item><item id='76' sales='566' year='2009' company='Company 2'></item><item id='77' sales='196' year='2001' company='Company 1'></item><item id='78' sales='919' year='2004' company='Company 2'></item><item id='79' sales='412' year='2008' company='Company 1'></item><item id='80' sales='591' year='1999' company='Company 2'></item><item id='81' sales='588' year='2006' company='Company 1'></item><item id='82' sales='517' year='2005' company='Company 1'></item><item id='83' sales='149' year='2002' company='Company 1'></item><item id='84' sales='474' year='1998' company='Company 1'></item><item id='85' sales='408' year='2008' company='Company 2'></item><item id='86' sales='212' year='2003' company='Company 1'></item><item id='87' sales='284' year='1999' company='Company 3'></item><item id='88' sales='580' year='1999' company='Company 2'></item><item id='89' sales='134' year='2005' company='Company 3'></item><item id='90' sales='145' year='1997' company='Company 3'></item><item id='91' sales='172' year='1997' company='Company 2'></item><item id='92' sales='825' year='1997' company='Company 1'></item><item id='93' sales='696' year='2005' company='Company 3'></item><item id='94' sales='907' year='2008' company='Company 1'></item><item id='95' sales='515' year='1996' company='Company 2'></item><item id='96' sales='675' year='1996' company='Company 2'></item><item id='97' sales='771' year='2005' company='Company 3'></item><item id='98' sales='836' year='1996' company='Company 2'></item><item id='99' sales='666' year='2007' company='Company 3'></item><item id='100' sales='944' year='2007' company='Company 1'></item></data>
\ No newline at end of file
diff --git a/addons/base_graph/static/lib/dhtmlxGraph/samples/readme.txt b/addons/base_graph/static/lib/dhtmlxGraph/samples/readme.txt
new file mode 100644
index 00000000000..c1f4b60567c
--- /dev/null
+++ b/addons/base_graph/static/lib/dhtmlxGraph/samples/readme.txt
@@ -0,0 +1,7 @@
+Next samples 
+	08_integration\01_dhtmlxgrid.html 
+	08_integration\02_dhtmlxgrid_group.html
+	08_integration\03_layout.html
+requires external components ( dhtmlxgrid and dhtmlxwindow )
+
+Its recommended to run samples through any kind of webserver.
-- 
cgit v1.2.3