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

Document created by Adri2c on Jan 20, 2018Last modified by Adri2c on Apr 18, 2018
Version 4Show Document
  • View in full screen mode

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=""></script>
  2. <script type="text/javascript" src=""></script>
  3. <script type="text/javascript" src=""></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!


v1.3 => Update chart if extent change (fixed)

        => Using 'lang.hitch' instead of 'self' (scope)