Community

Bar Chart Cedar Widget v1.3 - 04/18/2018

5728
19
01-20-2018 09:59 AM
Labels (1)

Bar Chart Cedar Widget v1.3 - 04/18/2018

Hi all,

I want to share with all the comunity a widget I have developed (WAB 2.6); create graphs of your map services on the fly using Cedar. You can select the available layers in the Web Map. Choose, for the 'x' axis, the field you want to show information, repeat the procedure for the 'y' axis. Select the type of graphic, bars or horizontal bars. The widget is ready to filter the data by extension (by activating the check button). Inside the container of the widget, the graphic will be updated being this responsive.

 

Don't forget to add the Cedar dependencies. How to add other libraries to WAB?

 

I added the following dependencies in the 'index.html' file of the app:

  1. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  2. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vega/2.6.1/vega.min.js"></script>
  3. <script type="text/javascript" src="https://unpkg.com/arcgis-cedar@0.9.1/dist/cedar.min.js"></script>

 

Version 1.1, pending improvements. All suggestions for improvement will be welcome.

 

List of the latest enhancements and changes:

  1. Added a new class => select the layers ids from the Web Map (Dojo Select)
  2. Geometry icons at layer selector; geometry selector (now => "*")

 

Live demo here!

I build Esri widgets without any -economic- interest, if you find it useful for your projects, you can buy me a coffee  

https://ko-fi.com/adrisolid 

Don't hesitate to contact me if you need some custom developments: biotekgis@gmail.com

Cheers!

Labels (1)
Attachments
barChartCedar.zip
Comments
ikbelkachbouri
by
New Contributor II
‎02-05-2018 12:10 AM
‎02-05-2018 12:10 AM

Hi , 

it doesn't work . 

Adri2cPérez_Beneito
by
Occasional Contributor
‎02-05-2018 12:40 AM
‎02-05-2018 12:40 AM

As you can see in the demo, it works. It contains the same widget as the post's attachment.

Best

A.

ikbelkachbouri
by
New Contributor II
‎02-05-2018 06:02 AM
‎02-05-2018 06:02 AM

Hi , 

i download  the same attatchment  but it doesn't work .  

Adri2cPérez_Beneito
by
Occasional Contributor
‎02-05-2018 08:22 AM
‎02-05-2018 08:22 AM

Tell me more, because I don't understand... What kind of error are you receiving? The widget is developed for WAB 2.6; just add the widget folder to 'stemapp' folder and don't forget to add the Cedar dependencies. 

Best 

A.

ikbelkachbouri
by
New Contributor II
‎02-06-2018 12:56 AM
‎02-06-2018 12:56 AM

Hi , 

When i add this widget i can't configure it . it is bloqued here . 

demo

demo

Adri2cPérez_Beneito
by
Occasional Contributor
‎02-06-2018 01:13 AM
‎02-06-2018 01:13 AM

This widget has no configuration (there is not 'settings' folder); could you click 'OK'? Anyway, I just updated the attachment for delete your error!

ikbelkachbouri
by
New Contributor II
‎02-06-2018 02:05 AM
‎02-06-2018 02:05 AM

I can click OK but there is no layer  .   

Adri2cPérez_Beneito
by
Occasional Contributor
‎02-06-2018 04:06 AM
‎02-06-2018 04:06 AM

Probably your Web Map has no layers; the widget reads the Web Map layers

ikbelkachbouri
by
New Contributor II
‎02-09-2018 01:03 AM
‎02-09-2018 01:03 AM

Hi , 

it is Ok . It works only  with feature service . Please is there any enhancements and changes to get other graphics type (pie , line , ....) 

Adri2cPérez_Beneito
by
Occasional Contributor
‎02-09-2018 09:03 AM
‎02-09-2018 09:03 AM

It works with Map Server and Feature Service. Now the app is consuming 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0' as well.

I'm planing to continue adding new functionalities to this widget and share it with whole community; for the moment I have a lot of private work. But I will. 

The next improvements probably will be the hability to create line charts and consume tables (alphanumeric).

Best

A.

ikbelkachbouri
by
New Contributor II
‎02-12-2018 01:59 AM
‎02-12-2018 01:59 AM

Thank you so much Adric2c .

AmalHorchi
by
New Contributor II
‎03-01-2018 06:41 AM
‎03-01-2018 06:41 AM

Hi ,

Please is there any enhancements and changes to get other graphics type (pie , line , ....) 

AmalHorchi
by
New Contributor II
‎03-01-2018 07:09 AM
‎03-01-2018 07:09 AM

Hi , 

Can you help to resolve this error .When i choose the same country , the result will be duplicated .

<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="UTF-8">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5"></script>
<script src="http://code.angularjs.org/1.5.8/angular.js"></script>
<script src="./../../highcharts/util.js"></script>
<!--script src="http://code.highcharts.com/4.2.2/highcharts.js"></script!-->
<!--script src="http://code.highcharts.com/highcharts.js"></script!-->
<!--script src="https://rawgithub.com/pablojim/highcharts-ng/master/dist/highcharts-ng.js"></script!-->
<script src="./../../highcharts-ng/dist/highcharts-ng.js"></script>
<script src="http://code.highcharts.com/4.2.2/modules/exporting.js"></script>
<script src="http://code.highcharts.com/4.2.2/modules/offline-exporting.js"></script>
</head>

<body>
<div ng-app="myapp">
<div ng-controller="myctrl">

<select ng-model="highchartsNG.options.chart.type" ng-options="t.id as t.title for t in chartTypes">
<option value="">-- Choisir type de graphe --</option>
</select>

<select ng-options="t as t.name for t in chartSeries" ng-model="item" ng-change="addSeries(item)">
<option value="">-- Choisir Gouvernorat --</option>
</select>

<highchart id="chart1" config="highchartsNG"></highchart>

</div>
<!div style="width:840px;height:600px;border: 2px solid #0F0F0F;margin: 0 auto;">

</div>

<script type="text/javascript">
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {

dojo.require("esri.map");
dojo.require("dojo.parser");
dojo.require("esri.tasks.query");
dojo.require("dojo.date.locale");
dojo.require("dojo.DeferredList");

$scope.chartTypes = [
{"id": "line", "title": "Lignes"},
{"id": "spline", "title": "Courbes"},
{"id": "column", "title": "Histogrammes"},
{"id": "bar", "title": "Barres"},
{"id": "scatter", "title": "Points"}
]

// pour traiter Object.values
if(!Object.values){Object.values=obj=>Object.keys(obj).map(key=>obj[key])};
var rqResults = [];

var datas = [];
var names = [];
var data_t = [];

var SERVERPATH = "http://41.231.36.249/sirgeo/rest/services";

dojo.ready(getGraphData);


function getGraphData() {
query = new esri.tasks.Query();

query.outFields = ["NOM", "PopTot2004", "PopTot2005", "PopTot2006", "PopTot2007", "PopTot2008", "PopTot2009", "PopTot2010", "PopTot2011", "PopTot2012", "PopTot2013", "PopTot2014"];
query.returnGeometry = false;
query.where = "1=1";
qSensor = new esri.tasks.QueryTask(SERVERPATH + "/SIR-Gouv/demographie_gouv/MapServer/0");
qSensor.execute(query, getGraphResults);

}


function getGraphResults(results) {
rqResults = results.features;
leng = rqResults.length;
var featureAttributes = [];

for (var i = 0; i < leng; i++) {

featureAttributes.push(results.features.attributes);

var featureAttributes_2;
featureAttributes_2 = JSON.parse(JSON.stringify(featureAttributes));
delete featureAttributes_2.NOM;

var myObj = new Object();

var name = featureAttributes.NOM;
var pop = Object.values(featureAttributes_2);
var date = Object.keys(featureAttributes_2);
var year = [];
var year2 = [];

for (var k=0; k < date.length; k++)
{ year = date.substring(date.length - 4,date.length);
// year2 = new Date(year);
year2 =parseInt(year)
};

myObj.id = i;
myObj.name = name;
myObj.data = pop;
myObj.year = year2;

data_t = myObj.year;

switch(myObj.id) {
case i:
names = myObj.name;
datas = myObj.data;

break;

}
};


$scope.chartSeries = [];
for (var i = 0; i < leng; i++) {

$scope.chartSeries.push({id:i, name: names[leng-1-i], data: datas[leng-1-i]});

};

// $scope.selectdata= $scope.chartSeries[0];

$scope.addSeries = function () {

var named = [];
var rnd = [];
for (var i = 0; i < leng; i++) {
switch($scope.item.id) {
case i:
named = $scope.item.name;
rnd = $scope.item.data;
$scope.highchartsNG.series.push({
name: named, data: rnd
})

break;
}

}

};

$scope.highchartsNG = {
options: {
chart: {
type: 'line'
},
plotOptions: {
line: {
connectNulls: true
},
spline: {
connectNulls: true
}
}
},
series: [],
//series: $scope.chartSeries,

title: {
text: 'Population Totale',
// x: 0//center
},
loading: false,
legend: {
enabled: true
},
xAxis: {
title: {
text: 'Ann\351es',
style: {
color: 'black',
fontWeight: 'bold'
}
},
categories: data_t,
lineWidth: 1,
lineColor: 'black'
},
yAxis: {
title: {
text: 'Population totale',
style: {
color: 'black',
fontWeight: 'bold'
}
},
labels: {
format: '{value:,.0f}'
},
lineWidth: 1,
lineColor: 'black',
minorGridLineWidth: 0,
gridLineWidth: 1,
alternateGridColor: null,
startOnTick: true,
endOnTick: true

},
tooltip: {
pointFormat: 'Value: {point.y:,.0f} habitants'
},
}
}
});

</script>
</body>

</html>

Adri2cPérez_Beneito
by
Occasional Contributor
‎03-01-2018 08:05 AM
‎03-01-2018 08:05 AM

Hey!

I'll help you, AngularJS is funny. Now I have a lot to do sorry.

But I do have one recommendaton to make, edit your post and delete the path server... Now it's open and anybody can play with your data..

Cheers

AmalHorchi
by
New Contributor II
‎03-02-2018 12:26 AM
‎03-02-2018 12:26 AM

Thank you so much .

LuisVelasquez
by
New Contributor
‎04-21-2018 10:09 AM
‎04-21-2018 10:09 AM

Hi there, I have been trying to add the widget without much luck. When I click execute I am having the following output in the console.

Does anyone have any suggestion of how to solve this?

I have added the cedar, d3 and vega to the lib folder in ..client/stemapp as well as adding them to the init.js 

Thank you.

AmalHorchi
by
New Contributor II
‎04-30-2018 03:53 AM
‎04-30-2018 03:53 AM

Hi , 

Please can you help me to disable selected options in ng option angular js .

<select ng-options="t as t.name for t in chartSeries " ng-model="item" ng-change="addSeries(item)">
<option value="" >-- Choisir Gouvernorat --</option>
</select>

AmalHorchi
by
New Contributor II
‎05-08-2018 02:01 AM
‎05-08-2018 02:01 AM

Hi  Adri2c Pérez Beneito 

please can you help to resolve this prob . The chart is duplicated when i choose the same country . 

this is the link of my application 

https://we.tl/bH2IwB5Dwh

Version history
Last update:
‎01-20-2018 09:59 AM
Updated by:
Contributors