SGH / COMPONENTS

Commit bd478cd0f15f576ce50de3a98e28d49302131498

Authored by pina
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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 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 \ No newline at end of file 235 \ No newline at end of file
datalets/scatterchart-datalet/scatterchart-datalet.png 0 → 100644
View file @bd478cd

3.63 KB