SGH / COMPONENTS

Browse Code »

Commit bd478cd0f15f576ce50de3a98e28d49302131498

Authored by pina 2015-12-15 15:24:38 +0100

1 parent 59100bec

Ancutel datalets

Inline Side-by-side

Showing 12 changed files with 823 additions and 0 deletions

datalets/bubblechart-datalet/bubblechart-datalet.html 0 → 100644

View file @bd478cd

	1	+<!--
	2	+@license
	3	+ The MIT License (MIT)
	4	+
	5	+ Copyright (c) 2015 Dipartimento di Informatica - UniversitÃ di Salerno - Italy
	6	+
	7	+ Permission is hereby granted, free of charge, to any person obtaining a copy
	8	+ of this software and associated documentation files (the "Software"), to deal
	9	+ in the Software without restriction, including without limitation the rights
	10	+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	11	+ copies of the Software, and to permit persons to whom the Software is
	12	+ furnished to do so, subject to the following conditions:
	13	+
	14	+ The above copyright notice and this permission notice shall be included in
	15	+ all copies or substantial portions of the Software.
	16	+
	17	+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	18	+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	19	+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	20	+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	21	+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	22	+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	23	+ THE SOFTWARE.
	24	+-->
	25	+
	26	+<!--
	27	+* Developed by :
	28	+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
	29	+*
	30	+-->
	31	+
	32	+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
	33	+<script src="http://code.highcharts.com/highcharts-more.js"></script>
	34	+
	35	+<!--
	36	+`bubblechart` is a bubbles chart datalet based on highcharts project <http://www.highcharts.com/>
	37	+
	38	+Examples:
	39	+
	40	+ An example to create a Bubble chart with multiple series specified (fields4)
	41	+
	42	+ <bubblechart-datalet
	43	+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
	44	+ fields='["field1","field2","field3","field4"]'>
	45	+ </bubblechart-datalet>
	46	+
	47	+ An example to create a Bubble chart with x and y values, and a size value (field3)
	48	+
	49	+ <bubblechart-datalet
	50	+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
	51	+ fields='["field1","field2","field3"]'>
	52	+ </bubblechart-datalet>
	53	+
	54	+@element bubblechart-datalet
	55	+@status v0.1
	56	+@demo demo/index.html
	57	+@group datalets
	58	+-->
	59	+
	60	+<dom-module name="bubblechart-datalet">
	61	+ <template>
	62	+ <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
	63	+ </template>
	64	+ <script>
	65	+ var BubblechartBehavior = {
	66	+ /**
	67	+ * Build Highchart object
	68	+ *
	69	+ * @method presentData
	70	+ */
	71	+ presentData: function() {
	72	+ var categoryName = [];
	73	+ var color = {};
	74	+ var bubblechartSeriesData = {};
	75	+ var bcserie = [];
	76	+
	77	+ BubblechartArr = [];
	78	+ var dataTmp = [];
	79	+
	80	+ //Example 1: No Series name is specified in the query
	81	+ if(this.data.length == 3){
	82	+ for (var i = 0; i < this.data[0].data.length; i++) {
	83	+ BubblechartArr = [this.data[0].data[i], parseFloat(this.data[1].data[i]), parseFloat(this.data[2].data[i])];
	84	+ dataTmp.push(BubblechartArr)
	85	+ }
	86	+ color = {
	87	+ fillColor: {
	88	+ radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
	89	+ stops: [
	90	+ [0, 'rgba(255,255,255,0.5)']
	91	+ ]
	92	+ }
	93	+ }
	94	+ //add data to the series
	95	+ bubblechartSeriesData = {
	96	+ name: "Series",
	97	+ data: dataTmp,
	98	+ marker: color
	99	+ }
	100	+ bcserie.push(bubblechartSeriesData);
	101	+ }
	102	+ //Example 2: A multi-series bubbles chart
	103	+ else{
	104	+ var categoryNameDuplicateValue = [];
	105	+ for (i = 0; i < this.data[0].data.length; i++) {
	106	+ categoryNameDuplicateValue.push(this.data[3].data[i]);
	107	+ }
	108	+ categoryName = categoryNameDuplicateValue.filter(function (itm, i, categoryNameDuplicateValue) {
	109	+ return i == categoryNameDuplicateValue.indexOf(itm);
	110	+ });
	111	+ for (var index = 0; index < categoryName.length; index++) {
	112	+ for (var i = 0; i < this.data[0].data.length; i++) {
	113	+ if (this.data[3].data[i] == categoryName[index]) {
	114	+ BubblechartArr = [this.data[0].data[i], this.data[1].data[i], parseFloat(this.data[2].data[i])];
	115	+ dataTmp.push(BubblechartArr);
	116	+ //A different color for each series
	117	+/* blocco usato per 3d
	118	+ color = {
	119	+ fillColor: {
	120	+ radialGradient: {cx: 0.4, cy: 0.3, r: 0.7},
	121	+ stops: [
	122	+ [0, 'rgba(255,255,255,0.5)'],
	123	+ [1, Highcharts.Color(Highcharts.getOptions().colors[index]).setOpacity(0.5).get('rgba')]
	124	+ ]
	125	+ }
	126	+ }
	127	+*/
	128	+ }
	129	+ }
	130	+ //add data to the series
	131	+ bubblechartSeriesData = {
	132	+ name: "Series: " + categoryName[index],
	133	+ data: dataTmp,
	134	+ marker: color
	135	+ }
	136	+
	137	+ bcserie.push(bubblechartSeriesData);
	138	+ dataTmp = [];
	139	+ }
	140	+ }
	141	+ $(this._component.$.charts.$.container).highcharts({
	142	+ chart: {
	143	+ type: 'bubble',
	144	+ plotBorderWidth: 1,
	145	+ zoomType: 'xy'
	146	+ },
	147	+ legend: {
	148	+ enabled: true
	149	+ },
	150	+ xAxis: {
	151	+ categories: this.properties.categories.value,
	152	+ title: {
	153	+ text: this._component.xAxisLabel
	154	+ }
	155	+ },
	156	+ yAxis: {
	157	+ categories: this.properties.categories.value,
	158	+ title: {
	159	+ text: this._component.yAxisLabel
	160	+ }
	161	+ },
	162	+ title: {
	163	+ text: this._component.Title
	164	+ },
	165	+ subtitle: {
	166	+ text: this._component.SubTitle
	167	+ },
	168	+ //A custom tooltip
	169	+ tooltip: {
	170	+ shared: true,
	171	+ useHTML: true,
	172	+ headerFormat:
	173	+ '<table ><tr><td style="color: {series.color}">{series.name}</td></tr>' +
	174	+ '<tr><td <b> {point.key}</b> , <b>{point.y}</b></tr>',
	175	+ pointFormat:
	176	+ '<td style="text-align: right"><b>{point.z}</b></td></tr>',
	177	+ footerFormat: '</table>',
	178	+ followPointer: true
	179	+ },
	180	+ plotOptions: {
	181	+ series: {
	182	+ dataLabels: {
	183	+ enabled: false, //enable for label for each bubble
	184	+ format: '{point.z}'
	185	+ }
	186	+ }
	187	+ },
	188	+ //hide link HighChart
	189	+ credits: {
	190	+ enabled: false
	191	+ },
	192	+ series: bcserie
	193	+ });
	194	+ }
	195	+ };
	196	+ /**
	197	+ * Element registration
	198	+ */
	199	+ BubblechartDatalet = Polymer({
	200	+ is: 'bubblechart-datalet',
	201	+ properties: {
	202	+ /**
	203	+ * It's the label for X axis
	204	+ *
	205	+ * @attribute xAxisLabel
	206	+ * @type String
	207	+ * @default ''
	208	+ */
	209	+ xAxisLabel: {
	210	+ type: String,
	211	+ value: ""
	212	+ },
	213	+ /**
	214	+ * It's the label for Y axis
	215	+ *
	216	+ * @attribute yAxisLabel
	217	+ * @type String
	218	+ * @default ''
	219	+ */
	220	+ yAxisLabel: {
	221	+ type: String,
	222	+ value: ""
	223	+ },
	224	+ /**
	225	+ * It's the title of the chart
	226	+ *
	227	+ * @attribute title
	228	+ * @type Strig
	229	+ * @default ''
	230	+ */
	231	+ Title: {
	232	+ type: String,
	233	+ value: ""
	234	+ },
	235	+ SubTitle: {
	236	+ type: String,
	237	+ value: ""
	238	+ },
	239	+ /**
	240	+ * It's the component behavior
	241	+ *
	242	+ * @attribute behavior
	243	+ * @type Object
	244	+ * @default {}
	245	+ */
	246	+ behavior : {
	247	+ type : Object,
	248	+ value : {}
	249	+ }
	250	+ },
	251	+ /**
	252	+ * 'ready' callback extend the BubblechartBehavior with HighchartsComponentBehavior and BubblechartBehavior
	253	+ * and run the Datalet workcycle.
	254	+ *
	255	+ * @method ready
	256	+ */
	257	+ ready: function(){
	258	+ this.behavior = $.extend(true, {}, HighchartsComponentBehavior, BubblechartBehavior);
	259	+ this.async(function(){this.behavior.init(this)},1);
	260	+ }
	261	+ });
	262	+ </script>
	263	+</dom-module>
0	264	\ No newline at end of file
...	...

datalets/bubblechart-datalet/bubblechart-datalet.png 0 → 100644

View file @bd478cd

11.9 KB

datalets/bubblechart-datalet/demo/index.html 0 → 100644

View file @bd478cd

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8">
	5	+ <title></title>
	6	+
	7	+ <script>
	8	+ </script>
	9	+
	10	+</head>
	11	+<body>
	12	+
	13	+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
	14	+<link rel="import" href="../bubblechart-datalet.html" />
	15	+
	16	+<bubblechart-datalet data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=0cb600fc-19ad-4aaf-9794-1e6ea851840a&limit=20"
	17	+ fields='["result,records,risorsa","result,records,capitolo","result,records,movimento", "result,records,categoria"]'>
	18	+</bubblechart-datalet>
	19	+
	20	+</body>
	21	+</html>
...	...

datalets/bubblechart-datalet/docs.html 0 → 100644

View file @bd478cd

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
	5	+ <meta charset="UTF-8">
	6	+</head>
	7	+<body>
	8	+
	9	+<iron-component-page src="bubblechart-datalet.html"></iron-component-page>
	10	+
	11	+</body>
	12	+</html>
0	13	\ No newline at end of file
...	...

datalets/heatmap-datalet/demo/index.html 0 → 100644

View file @bd478cd

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8">
	5	+ <title></title>
	6	+
	7	+ <script>
	8	+ </script>
	9	+
	10	+</head>
	11	+<body>
	12	+
	13	+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
	14	+<link rel="import" href="../heatmap-datalet.html" />
	15	+
	16	+<heatmap-datalet data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=2cd3c44c-9589-41cc-889e-e3e8c31d29e9&limit=10"
	17	+ fields='["result,records,Comune","result,records,1971","result,records,1981","result,records,1991","result,records,2001","result,records,2011","result,records,2015"]'></heatmap-datalet>
	18	+
	19	+</body>
	20	+</html>
0	21	\ No newline at end of file
...	...

datalets/heatmap-datalet/docs.html 0 → 100644

View file @bd478cd

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
	5	+ <meta charset="UTF-8">
	6	+</head>
	7	+<body>
	8	+
	9	+<iron-component-page src="heatmap-datalet.html"></iron-component-page>
	10	+
	11	+</body>
	12	+</html>
0	13	\ No newline at end of file
...	...

datalets/heatmap-datalet/heatmap-datalet.html 0 → 100644

View file @bd478cd

	1	+<!--
	2	+@license
	3	+ The MIT License (MIT)
	4	+
	5	+ Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
	6	+
	7	+ Permission is hereby granted, free of charge, to any person obtaining a copy
	8	+ of this software and associated documentation files (the "Software"), to deal
	9	+ in the Software without restriction, including without limitation the rights
	10	+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	11	+ copies of the Software, and to permit persons to whom the Software is
	12	+ furnished to do so, subject to the following conditions:
	13	+
	14	+ The above copyright notice and this permission notice shall be included in
	15	+ all copies or substantial portions of the Software.
	16	+
	17	+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	18	+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	19	+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	20	+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	21	+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	22	+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	23	+ THE SOFTWARE.
	24	+-->
	25	+
	26	+<!--
	27	+* Developed by :
	28	+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
	29	+*
	30	+-->
	31	+
	32	+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
	33	+<script src="https://code.highcharts.com/highcharts-more.js"></script>
	34	+<script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script>
	35	+
	36	+<!--script src="https://code.highcharts.com/modules/heatmap.js"></script>
	37	+
	38	+<!--
	39	+
	40	+`heatmap-datalet` is a heat map datalet based on highcharts project <http://www.highcharts.com/>
	41	+
	42	+Example:
	43	+
	44	+ <heatmap-datalet
	45	+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
	46	+ fields='["field1","field2"]'>
	47	+ </heatmap-datalet>
	48	+
	49	+@element heatmap-datalet
	50	+@status v0.1
	51	+@demo demo/index.html
	52	+@group datalets
	53	+-->
	54	+
	55	+<dom-module id="heatmap-datalet">
	56	+ <template>
	57	+ <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
	58	+ </template>
	59	+ <script>
	60	+
	61	+ var HeatMapBehavior = {
	62	+
	63	+ /**
	64	+ * Build Highchart object
	65	+ *
	66	+ * @method presentData
	67	+ */
	68	+ presentData: function(){
	69	+ campi = [];
	70	+ serie = [];
	71	+
	72	+ for (i = 0; i < this.properties.series.value.length; i++) {
	73	+ campi.push(this.properties.series.value[i].name);
	74	+ for (j = 0; j < this.properties.series.value[i].data.length; j++) {
	75	+ serie.push([j,i,this.properties.series.value[i].data[j]])
	76	+ }
	77	+ }
	78	+
	79	+ $(this._component.$.charts.$.container).highcharts({
	80	+ chart: {
	81	+ type: 'heatmap',
	82	+ marginTop: 40,
	83	+ marginBottom: 80,
	84	+ plotBorderWidth: 1
	85	+ },
	86	+
	87	+ title: {
	88	+ text: this._component.Title
	89	+ },
	90	+
	91	+ xAxis: {
	92	+ categories: this.properties.categories.value,
	93	+ title: {
	94	+ text: this._component.xAxisLabel
	95	+ }
	96	+ },
	97	+
	98	+ yAxis: {
	99	+ categories: campi,
	100	+ //categories: this.properties.categories.value,
	101	+ title: {
	102	+ text: this._component.yAxisLabel
	103	+ }
	104	+ },
	105	+
	106	+ colorAxis: {
	107	+ min: 0,
	108	+ minColor: '#FFFFFF',
	109	+ maxColor: Highcharts.getOptions().colors[0]
	110	+ },
	111	+
	112	+ legend: {
	113	+ align: 'right',
	114	+ layout: 'vertical',
	115	+ margin: 0,
	116	+ verticalAlign: 'top',
	117	+ y: 25,
	118	+ symbolHeight: 280
	119	+ },
	120	+ /*tooltip: {
	121	+ formatter: function () {
	122	+ return '<b>' + this.series.xAxis.categories[this.point.x] + '</b><br>Abitanti: <b>' + this._component.prototype.xAxis
	123	+ this.point.value + '</b><br>Anno <b>' + this.series.yAxis.categories[this.point.y] + '</b>';
	124	+ }*/
	125	+
	126	+ //},
	127	+ /* tooltip: {
	128	+ formatter: function () {
	129	+ return '<b>' + this.series.xAxis.categories[this.point.x] + this._component.prototype.xAxis
	130	+ this.point.value + this.series.yAxis.categories[this.point.y];
	131	+ }
	132	+*/
	133	+ //},
	134	+ credits: {
	135	+ enabled: false
	136	+ },
	137	+ series: [{
	138	+ //name: 'Popolazione',
	139	+ borderWidth: 1,
	140	+ data: serie,
	141	+ dataLabels: {
	142	+ enabled: true,
	143	+ color: '#000000'
	144	+ }
	145	+ }]
	146	+ });
	147	+ }
	148	+ };
	149	+
	150	+
	151	+ heatmapDatalet = Polymer({
	152	+ is: 'heatmap-datalet',
	153	+
	154	+ properties: {
	155	+ /**
	156	+ * It's the label for X axis
	157	+ *
	158	+ * @attribute xAxisLabel
	159	+ * @type String
	160	+ * @default ''
	161	+ */
	162	+ xAxisLabel: {
	163	+ type: String,
	164	+ value: ""
	165	+ },
	166	+ /**
	167	+ * It's the label for Y axis
	168	+ *
	169	+ * @attribute yAxisLabel
	170	+ * @type String
	171	+ * @default ''
	172	+ */
	173	+ yAxisLabel: {
	174	+ type: String,
	175	+ value: ""
	176	+ },
	177	+ /**
	178	+ * It's the title of the chart
	179	+ *
	180	+ * @attribute title
	181	+ * @type String
	182	+ * @default ''
	183	+ */
	184	+ Title: {
	185	+ type: String,
	186	+ value: ""
	187	+ },
	188	+ /**
	189	+ * It's the values suffix
	190	+ *
	191	+ * @attribute suffix
	192	+ * @type String
	193	+ * @default 'units'
	194	+ */
	195	+ suffix : {
	196	+ type : String,
	197	+ value : ""
	198	+ },
	199	+ /**
	200	+ * It's the component behavior
	201	+ *
	202	+ * @attribute behavior
	203	+ * @type Object
	204	+ * @default {}
	205	+ */
	206	+ behavior : {
	207	+ type : Object,
	208	+ value : {}
	209	+ }
	210	+ },
	211	+
	212	+ /**
	213	+ * 'ready' callback extend the heatmapComponentBehavior with HighchartsComponentBehavior and heatmapBehavior
	214	+ * and run the Datalet workcycle.
	215	+ *
	216	+ * @method ready
	217	+ */
	218	+ ready: function(){
	219	+ this.behavior = $.extend(true, {}, HighchartsComponentBehavior, HeatMapBehavior);
	220	+ this.async(function(){this.behavior.init(this)},1000);
	221	+ }
	222	+ });
	223	+ </script>
	224	+</dom-module>
0	225	\ No newline at end of file
...	...

datalets/heatmap-datalet/heatmap-datalet.png 0 → 100644

View file @bd478cd

5.51 KB

datalets/scatterchart-datalet/demo/index.html 0 → 100644

View file @bd478cd

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <meta charset="UTF-8">
	5	+ <title></title>
	6	+
	7	+ <script>
	8	+ </script>
	9	+
	10	+</head>
	11	+<body>
	12	+
	13	+<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
	14	+<link rel="import" href="../scatterchart-datalet.html" />
	15	+
	16	+<!--More serie-->
	17	+<scatterchart-datalet data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=29d9700a-fb2c-45fe-9cea-da856d5afd6c&limit=500"
	18	+ fields='["result,records,area_geo","result,records,pop_residente","result,records,superficie_kmq"]'></scatterchart-datalet>
	19	+
	20	+<!-- One serie-->
	21	+<!--scatterchart-datalet data-url="http://ckan.ancitel.it/api/action/datastore_search?resource_id=29d9700a-fb2c-45fe-9cea-da856d5afd6c&limit=500"
	22	+ fields='["result,records,pop_residente","result,records,superficie_kmq"]'></scatterchart-datalet-->
	23	+
	24	+</body>
	25	+</html>
0	26	\ No newline at end of file
...	...

datalets/scatterchart-datalet/docs.html 0 → 100644

View file @bd478cd

	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+<head>
	4	+ <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
	5	+ <meta charset="UTF-8">
	6	+</head>
	7	+<body>
	8	+
	9	+<iron-component-page src="scatterchart-datalet.html"></iron-component-page>
	10	+
	11	+</body>
	12	+</html>
0	13	\ No newline at end of file
...	...

datalets/scatterchart-datalet/scatterchart-datalet.html 0 → 100644

View file @bd478cd

	1	+<!--
	2	+@license
	3	+ The MIT License (MIT)
	4	+
	5	+ Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
	6	+
	7	+ Permission is hereby granted, free of charge, to any person obtaining a copy
	8	+ of this software and associated documentation files (the "Software"), to deal
	9	+ in the Software without restriction, including without limitation the rights
	10	+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	11	+ copies of the Software, and to permit persons to whom the Software is
	12	+ furnished to do so, subject to the following conditions:
	13	+
	14	+ The above copyright notice and this permission notice shall be included in
	15	+ all copies or substantial portions of the Software.
	16	+
	17	+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	18	+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	19	+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	20	+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	21	+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	22	+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	23	+ THE SOFTWARE.
	24	+-->
	25	+
	26	+<!--
	27	+* Developed by :
	28	+* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
	29	+*
	30	+-->
	31	+
	32	+<link rel="import" href="../highcharts-datalet/highcharts-datalet.html">
	33	+
	34	+<!--
	35	+
	36	+`scatterchart-datalet` is a scatter plot chart datalet based on highcharts project <http://www.highcharts.com/>
	37	+
	38	+Example:
	39	+
	40	+ <scatterchart-datalet
	41	+ data-url="http://ckan.routetopa.eu/api/action/datastore_search?resource_id=#"
	42	+ fields='["field1","field2"]'>
	43	+ </scatterchart-datalet>
	44	+
	45	+@element scatterchart-datalet
	46	+@status v0.1
	47	+@demo demo/index.html
	48	+@group datalets
	49	+-->
	50	+
	51	+<dom-module id="scatterchart-datalet">
	52	+ <template>
	53	+ <highcharts-datalet id="charts" data-url="{{dataUrl}}" fields="{{fields}}" data="{{data}}"></highcharts-datalet>
	54	+ </template>
	55	+ <script>
	56	+
	57	+ var scatterchartBehavior = {
	58	+
	59	+ /**
	60	+ * Bluid Highchart object
	61	+ *
	62	+ * @method presentData
	63	+ */
	64	+ presentData: function(){
	65	+ var categoryName = [];
	66	+ var color = {};
	67	+ var scatterSeriesData = {};
	68	+ var scattserie = [];
	69	+
	70	+ ScatterArr = [];
	71	+ var dataTmp = [];
	72	+ //Example 1: No Series name is specified in the query
	73	+ if(this.data.length == 2){
	74	+ for (var i = 0; i < this.data[0].data.length; i++) {
	75	+ ScatterArr = [parseFloat(this.data[0].data[i]), parseFloat(this.data[1].data[i])];
	76	+ dataTmp.push(ScatterArr)
	77	+ }
	78	+ //add data to the series
	79	+ scatterSeriesData = {
	80	+ name: "Series",
	81	+ data: dataTmp,
	82	+ marker: color
	83	+ }
	84	+ scattserie.push(scatterSeriesData);
	85	+ }
	86	+ //Example 2: multi-series charts
	87	+ else{
	88	+ var categoryNameDuplicateValue = [];
	89	+ for (i = 0; i < this.data[0].data.length; i++) {
	90	+ categoryNameDuplicateValue.push(this.data[0].data[i]);
	91	+ }
	92	+ categoryName = categoryNameDuplicateValue.filter(function (itm, i, categoryNameDuplicateValue) {
	93	+ return i == categoryNameDuplicateValue.indexOf(itm);
	94	+ });
	95	+ for (var index = 0; index < categoryName.length; index++) {
	96	+ for (var i = 0; i < this.data[0].data.length; i++) {
	97	+ if (this.data[0].data[i] == categoryName[index]) {
	98	+ ScatterArr = [this.data[1].data[i], this.data[2].data[i]];
	99	+ dataTmp.push(ScatterArr);
	100	+ }
	101	+ }
	102	+ //add data to the series
	103	+ scatterSeriesData = {
	104	+ name: "Series: " + categoryName[index],
	105	+ data: dataTmp,
	106	+ marker: color
	107	+ }
	108	+
	109	+ scattserie.push(scatterSeriesData);
	110	+ dataTmp = [];
	111	+ }
	112	+ }
	113	+
	114	+ $(this._component.$.charts.$.container).highcharts({
	115	+ chart: {
	116	+ type: 'scatter',
	117	+ zoomType: 'xy'
	118	+ },
	119	+ title: {
	120	+ text: "" + this._component.title
	121	+ },
	122	+ subtitle: {
	123	+ text: "" + this._component.subTitle
	124	+ },
	125	+ xAxis: {
	126	+ categories: this.properties.categories.value,
	127	+ title: {
	128	+ enabled: true,
	129	+ text: this._component.xAxisLabel,
	130	+ startOnTick: true,
	131	+ endOnTick: true,
	132	+ showLastLabel: true
	133	+ }
	134	+ },
	135	+ yAxis: {
	136	+ categories: this.properties.categories.value,
	137	+ title: {
	138	+ text: this._component.yAxisLabel
	139	+ }
	140	+ },
	141	+ /*legend: {
	142	+ layout: 'vertical',
	143	+ align: 'bottom',
	144	+ verticalAlign: 'top',
	145	+ x: -40,
	146	+ y: 100,
	147	+ floating: true,
	148	+ backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) \|\| '#FFFFFF',
	149	+ borderWidth: 1,
	150	+ shadow: true
	151	+ },*/
	152	+ plotOptions: {
	153	+ scatter: {
	154	+ marker: {
	155	+ radius: 5,
	156	+ states: {
	157	+ hover: {
	158	+ enabled: true,
	159	+ lineColor: 'rgb(100,100,100)'
	160	+ }
	161	+ }
	162	+ },
	163	+ /*tooltip: {
	164	+ headerFormat: '<b>{series.name}</b><br>',
	165	+ pointFormat: '{point.x} ab, {point.y} kmq',
	166	+ valueSuffix: ' ' + this._component.suffix
	167	+ }*/
	168	+ tooltip: {
	169	+ headerFormat: '<b>{series.name}</b><br>',
	170	+ pointFormat: '{point.x}' + this._component.xAxisLabel + ', {point.y}' + this._component.yAxisLabel,
	171	+ valueSuffix: ' ' + this._component.suffix
	172	+ }
	173	+ }
	174	+ },
	175	+ credits: {
	176	+ enabled: false
	177	+ },
	178	+ series: scattserie
	179	+ });
	180	+ }
	181	+ };
	182	+
	183	+
	184	+ scatterchartDatalet = Polymer({
	185	+ is: 'scatterchart-datalet',
	186	+ properties: {
	187	+ /**
	188	+ * It's the label for X axis
	189	+ *
	190	+ * @attribute xAxisLabel
	191	+ * @type String
	192	+ * @default ''
	193	+ */
	194	+ xAxisLabel: {
	195	+ type: String,
	196	+ value: ""
	197	+ },
	198	+ /**
	199	+ * It's the label for Y axis
	200	+ *
	201	+ * @attribute yAxisLabel
	202	+ * @type String
	203	+ * @default ''
	204	+ */
	205	+ yAxisLabel: {
	206	+ type: String,
	207	+ value: ""
	208	+ },
	209	+ /**
	210	+ * It's the component behavior
	211	+ *
	212	+ * @attribute behavior
	213	+ * @type Object
	214	+ * @default {}
	215	+ */
	216	+ behavior : {
	217	+ type : Object,
	218	+ value : {}
	219	+ }
	220	+ },
	221	+
	222	+ /**
	223	+ * 'ready' callback extend the scatterchartComponentBehavior with HighchartsComponentBehavior and scatterchartBehavior
	224	+ * and run the Datalet workcycle.
	225	+ *
	226	+ * @method ready
	227	+ */
	228	+ ready: function(){
	229	+ this.behavior = $.extend(true, {}, HighchartsComponentBehavior, scatterchartBehavior);
	230	+ this.async(function(){this.behavior.init(this)},1000);
	231	+ }
	232	+ });
	233	+ </script>
	234	+</dom-module>
0	235	\ No newline at end of file
...	...

datalets/scatterchart-datalet/scatterchart-datalet.png 0 → 100644

View file @bd478cd

3.63 KB