diff --git a/datalets/areachart-datalet/areachart-datalet.html b/datalets/areachart-datalet/areachart-datalet.html
new file mode 100644
index 0000000..4c9b6a1
--- /dev/null
+++ b/datalets/areachart-datalet/areachart-datalet.html
@@ -0,0 +1,179 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
+
+<!--
+
+`areachart-datalet` is an areachart datalet based on highcharts project <http://www.highcharts.com/>
+
+Example:
+
+    <areachart-datalet
+            data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+            fields='["field1","field2"]'>
+    </areachart-datalet>
+
+@element areachart-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module id="areachart-datalet">
+    <template>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}"></highcharts-datalet>
+    </template>
+    <script>
+
+        var AreachartBehavior = {
+
+            /**
+             * Bluid Highchart object
+             *
+             * @method transformData
+             */
+            presentData: function(){
+                $(this._component.$.charts.$.container).highcharts({
+                    chart: {
+                        type: 'area',
+                        zoomType: 'xy'
+                    },
+                    title: {
+                        text: this._component.title
+                    },
+                    xAxis: {
+                        categories: this.properties.categories.value,//this._component.categories,
+                        title: {
+                            text: this._component.xAxisLabel
+                        }
+                    },
+                    yAxis: {
+                        min: 0,
+                        title: {
+                            text: this._component.yAxisLabel,
+                            align: 'high'
+                        },
+                        labels: {
+                            overflow: 'justify'
+                        }
+                    },
+                    tooltip: {
+                        valueSuffix: ' ' + this._component.suffix
+                    },
+                    plotOptions: {
+                        area: {
+
+                        }
+                    },
+                    legend: {
+                        layout: 'vertical',
+                        align: 'right',
+                        verticalAlign: 'top',
+                        x: -40,
+                        y: 100,
+                        floating: true,
+                        borderWidth: 1,
+                        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
+                        shadow: true
+                    },
+                    credits: {
+                        enabled: false
+                    },
+                    series: this.properties.series.value//this._component.series
+                });
+            }
+        };
+
+
+        AreachartDatalet = Polymer({
+            is: 'areachart-datalet',
+
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the title of the chart
+                 *
+                 * @attribute title
+                 * @type Strig
+                 * @default ''
+                 */
+                title: {
+                    type: String,
+                    value: "Heading"
+                },
+                /**
+                 * It's the values suffix
+                 *
+                 * @attribute suffix
+                 * @type Strig
+                 * @default 'units'
+                 */
+                suffix : {
+                    type : String,
+                    value : "units"
+                }
+            },
+
+            /**
+             * 'ready' callback extend the AreachartComponentBehavior with HighchartsComponentBehavior and ColumnchartBehavior
+             * and run the Datalet workcycle.
+             *
+             * @method ready
+             */
+            ready: function(){
+                this.behavior = $.extend(true, {}, HighchartsComponentBehavior, AreachartBehavior);
+                this.async(function(){this.behavior.init(this)},1000);
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/areachart-datalet/areachart-datalet.png b/datalets/areachart-datalet/areachart-datalet.png
new file mode 100644
index 0000000..43807d8
--- /dev/null
+++ b/datalets/areachart-datalet/areachart-datalet.png
diff --git a/datalets/areachart-datalet/demo/index.html b/datalets/areachart-datalet/demo/index.html
new file mode 100644
index 0000000..3ba396c
--- /dev/null
+++ b/datalets/areachart-datalet/demo/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+
+    <script>
+    </script>
+
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+<link rel="import" href="../areachart-datalet.html" />
+
+<areachart-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=73e02092-85a1-434e-85fe-0c9a43aa9a52&amp;limit=10000"
+                       fields='["result,records,Lat","result,records,Lng"]'></areachart-datalet>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/areachart-datalet/docs.html b/datalets/areachart-datalet/docs.html
new file mode 100644
index 0000000..4e08aab
--- /dev/null
+++ b/datalets/areachart-datalet/docs.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="import"  href="../../bower_components/iron-component-page/iron-component-page.html">
+    <meta charset="UTF-8">
+</head>
+<body>
+
+<iron-component-page src="areachart-datalet.html"></iron-component-page>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/bubble3d-datalet/bubble3d-datalet.html b/datalets/bubble3d-datalet/bubble3d-datalet.html
new file mode 100644
index 0000000..86abae4
--- /dev/null
+++ b/datalets/bubble3d-datalet/bubble3d-datalet.html
@@ -0,0 +1,263 @@
+<!--
+@license
+    The MIT License (MIT)
+
+    Copyright (c) 2015 Dipartimento di Informatica - Universit� di Salerno - Italy
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in
+    all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+    THE SOFTWARE.
+-->
+
+<!--
+* Developed by :
+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
+*
+-->
+
+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
+<script src="http://code.highcharts.com/highcharts-more.js"></script>
+
+<!--
+`bubble3d-datalet` is a 3D bubbles datalet based on highcharts project <http://www.highcharts.com/>
+
+Examples:
+
+    An example to create a 3d Bubble chart with multiple series specified (fields4)
+
+    <bubble3d-datalet
+        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+        fields='["field1","field2","field3","field4"]'>
+    </bubble3d-datalet>
+
+    An example to create a 3d Bubble chart  with x and y values,  and a size value (field3)
+
+     <bubble3d-datalet
+        data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
+        fields='["field1","field2","field3"]'>
+    </bubble3d-datalet>
+
+@element bubble3d-datalet
+@status v0.1
+@demo demo/index.html
+@group datalets
+-->
+
+<dom-module name="bubble3d-datalet">
+    <template>
+        <highcharts-datalet id="charts" data-url="{{dataUrl}}"  fields="{{fields}}" data="{{data}}"></highcharts-datalet>
+    </template>
+    <script>
+
+        var Bubble3dBehavior = {
+            /**
+             * Build Highchart object
+             *
+             * @method presentData
+             */
+            presentData: function() {
+                var categoryName = [];
+                var color = {};
+                var bubble3DSeriesData = {};
+                var b3dserie = [];
+
+                Bubble3DArr = [];
+                var dataTmp = [];
+                //Example 1: No Series name is specified in the query
+                if(this.data.length == 3){
+                    for (var i = 0; i < this.data[0].data.length; i++) {
+                            Bubble3DArr = [this.data[0].data[i], parseFloat(this.data[1].data[i]), parseFloat(this.data[2].data[i])];
+                            dataTmp.push(Bubble3DArr)
+                        }
+                    color = {
+                        fillColor: {
+                            radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
+                            stops: [
+                                [0, 'rgba(255,255,255,0.5)']
+                            ]
+                        }
+                    }
+                    //add data to the series
+                    bubble3DSeriesData = {
+                        name: "Series",
+                        data: dataTmp,
+                        marker: color
+                    }
+                    b3dserie.push(bubble3DSeriesData);
+                }
+                //Example 2: A multi-series 3d bubble charts
+                else{
+                    var categoryNameDuplicateValue = [];
+                    for (i = 0; i < this.data[0].data.length; i++) {
+                            categoryNameDuplicateValue.push(this.data[3].data[i]);
+                    }
+                    categoryName = categoryNameDuplicateValue.filter(function (itm, i, categoryNameDuplicateValue) {
+                        return i == categoryNameDuplicateValue.indexOf(itm);
+                    });
+                    for (var index = 0; index < categoryName.length; index++) {
+                        for (var i = 0; i < this.data[0].data.length; i++) {
+                            if (this.data[3].data[i] == categoryName[index]) {
+                                Bubble3DArr = [this.data[0].data[i], this.data[1].data[i], parseFloat(this.data[2].data[i])];
+                                dataTmp.push(Bubble3DArr);
+                                //A different color for each series
+                                color = {
+                                    fillColor: {
+                                        radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
+                                        stops: [
+                                            [0, 'rgba(255,255,255,0.5)'],
+                                            [1, Highcharts.Color(Highcharts.getOptions().colors[index]).setOpacity(0.5).get('rgba')]
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                        //add data to the series
+                        bubble3DSeriesData = {
+                            name: "Series: " + categoryName[index],
+                            data: dataTmp,
+                            marker: color
+                        }
+
+                        b3dserie.push(bubble3DSeriesData);
+                        dataTmp = [];
+                    }
+                }
+                $(this._component.$.charts.$.container).highcharts({
+                    chart: {
+                        type: 'bubble',
+                        plotBorderWidth: 1,
+                        zoomType: 'xy'
+                    },
+
+                    legend: {
+                        enabled: true
+                    },
+
+                    title: {
+                        text: "" + this._component.title
+                    },
+                    xAxis: {
+                        categories: this.properties.categories.value,
+                        title: {
+                            text: this._component.xAxisLabel
+                        }
+                    },
+
+                    yAxis: {
+                        categories: this.properties.categories.value,
+                        title: {
+                            text: this._component.yAxisLabel
+                        }
+                    },
+                    title: {
+                        text: this._component.title
+                    },
+                    subtitle: {
+                        text: this._component.title
+                    },
+                    //A custom tooltip
+                    tooltip: {
+                        shared: true,
+                        useHTML: true,
+                        headerFormat:
+                        '<table ><tr><td style="color: {series.color}">{series.name}</td></tr>' +
+                        '<tr><td  <b> {point.key}</b> , <b>{point.y}</b></tr>',
+                        pointFormat:
+                        '<td style="text-align: right"><b>{point.z}</b></td></tr>',
+                        footerFormat: '</table>',
+                        followPointer: true
+                    },
+                    plotOptions: {
+                        series: {
+                            dataLabels: {
+                                enabled: false,         //enable for label for each bubble
+                                format: '{point.z}'
+                            }
+                        }
+                    },
+                    //hide link HighChart
+                    credits: {
+                        enabled: false
+                    },
+                   series: b3dserie
+                });
+            }
+        };
+        /**
+         * Element registration
+         */
+        Bubble3dDatalet = Polymer({
+            is: 'bubble3d-datalet',
+            properties: {
+                /**
+                 * It's the label for X axis
+                 *
+                 * @attribute xAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                xAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the label for Y axis
+                 *
+                 * @attribute yAxisLabel
+                 * @type String
+                 * @default ''
+                 */
+                yAxisLabel: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the title of the chart
+                 *
+                 * @attribute title
+                 * @type Strig
+                 * @default ''
+                 */
+                title: {
+                    type: String,
+                    value: ""
+                },
+                /**
+                 * It's the component behavior
+                 *
+                 * @attribute behavior
+                 * @type Object
+                 * @default {}
+                 */
+                behavior : {
+                    type : Object,
+                    value : {}
+                }
+            },
+            /**
+             * 'ready' callback extend the Bubble3dBehavior with HighchartsComponentBehavior and Bubble3dBehavior
+             * and run the Datalet workcycle.
+             *
+             * @method ready
+             */
+            ready: function(){
+                this.behavior = $.extend(true, {}, HighchartsComponentBehavior, Bubble3dBehavior);
+                this.async(function(){this.behavior.init(this)},1);
+            }
+        });
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/datalets/bubble3d-datalet/bubble3d-datalet.png b/datalets/bubble3d-datalet/bubble3d-datalet.png
new file mode 100644
index 0000000..80e0feb
--- /dev/null
+++ b/datalets/bubble3d-datalet/bubble3d-datalet.png
diff --git a/datalets/bubble3d-datalet/bubble3d-datalet.xml b/datalets/bubble3d-datalet/bubble3d-datalet.xml
new file mode 100644
index 0000000..e7ea07e
--- /dev/null
+++ b/datalets/bubble3d-datalet/bubble3d-datalet.xml
@@ -0,0 +1,65 @@
+<component>
+    <name>bubble3d-datalet</name>
+    <attributes>
+        <attribute>
+            <name>data-url</name>
+        </attribute>
+        <attribute>
+            <name>fields</name>
+        </attribute>
+    </attributes>
+    <idm>
+        <inputs>
+            <input>
+                <name>Categories</name>
+                <description>The chart categories. Its values will be put in the horizontal axis. You need one value for each series.</description>
+                <scale>nominal</scale>
+                <role>domain</role>
+                <selection>11</selection>
+            </input>
+            <input>
+                <name>Y values</name>
+                <description>The chart plots y values. Its values will be put in the vertical axis.</description>
+                <scale>nominal</scale>
+                <role>domain</role>
+                <selection>11</selection>
+            </input>
+            <input>
+                <name>Z values</name>
+                <description>The chart plots z value. Its values represent the size of the bubble.</description>
+                <scale>nominal</scale>
+                <role>domain</role>
+                <selection>11</selection>
+            </input>
+            <input>
+                <name>Series</name>
+                <description>The chart series. Its values visualize multi- series bubbles chart.</description>
+                <scale>nominal</scale>
+                <role>domain</role>
+                <selection>11</selection>
+            </input>
+            <layouts>
+                <input>
+                    <name>title</name>
+                    <description>The label for the title of the chart</description>
+                </input>
+                <input>
+                    <name>x-axis-label</name>
+                    <description>The label for the X axis</description>
+                </input>
+                <input>
+                    <name>y-axis-label</name>
+                    <description>The label for the Y axis</description>
+                </input>
+                <input>
+                    <name>suffix</name>
+                    <description>The values suffix(eg units, dollars, euro, ...)</description>
+                </input>
+                <input>
+                    <name>comment</name>
+                    <description>The values suffix(eg units, dollars, euro, ...)</description>
+                </input>
+            </layouts>
+        </inputs>
+    </idm>
+</component>
\ No newline at end of file
diff --git a/datalets/bubble3d-datalet/demo/index.html b/datalets/bubble3d-datalet/demo/index.html
new file mode 100644
index 0000000..408c8ab
--- /dev/null
+++ b/datalets/bubble3d-datalet/demo/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+
+    <script>
+    </script>
+
+</head>
+<body>
+
+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+<link rel="import" href="../bubble3d-datalet.html" />
+<bubble3d-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a"
+                  fields='["result,records,risorsa","result,records,capitolo","result,records,movimento", "result,records,categoria"]'></bubble3d-datalet>
+
+</body>
+</html>
diff --git a/datalets/bubble3d-datalet/docs.html b/datalets/bubble3d-datalet/docs.html
new file mode 100644
index 0000000..1e9f91f
--- /dev/null
+++ b/datalets/bubble3d-datalet/docs.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="import"  href="../../bower_components/iron-component-page/iron-component-page.html">
+    <meta charset="UTF-8">
+</head>
+<body>
+
+<iron-component-page src="bubble3d-datalet.html"></iron-component-page>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.xml b/datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.xml
new file mode 100644
index 0000000..0371cf5
--- /dev/null
+++ b/datalets/donutpie3dchart-datalet/donutpie3dchart-datalet.xml
@@ -0,0 +1,35 @@
+<component>
+<name>donutpie3dchart-datalet</name>
+<attributes>
+<attribute>
+    <name>data-url</name>
+</attribute>
+<attribute>
+    <name>fields</name>
+</attribute>
+</attributes>
+<idm>
+<inputs>
+    <input>
+        <name>Series</name>
+        <description>The chart series. Its values will be put on slice of  each series.</description>
+        <scale>nominal</scale>
+        <role>domain</role>
+        <selection>11</selection>
+    </input>
+    <input>
+        <name>Size </name>
+        <description>The size for each series to create a concentric rings</description>
+        <scale>nominal</scale>
+        <role>domain</role>
+        <selection>11</selection>
+    </input>
+    <layouts>
+        <input>
+            <name>title</name>
+            <description>The label for the title of the chart</description>
+        </input>
+    </layouts>
+</inputs>
+</idm>
+</component>
\ No newline at end of file