Creating a simple bar chart widget

This section describes how to create a simple bar chart widget, including styling, and how to bind data to it.

Creating a new widget library

Since widgets must belong to a widget library, start by creating a new widget library from the Dev Hub start page.

Do the following:

  1. In the Widget libraries section of the Dev Hub start page, click P Create new widget library.
  2. In the Create new widget library dialog, fill in the details to identify your widget library:

    • Enter a name for the widget library. In this example, we call it my-widget-lib.
    • If you wish, add a text description for the widget library.
  3. Click Create.

Creating a new widget

Widgets can be created in different ways:

  • From the ú menu on the Dev Hub start page
  • From the M menu inside the Widget editor when a widget library has been opened.

Widgets can be created from the Dev Hub start page.

Do the following:

  1. In Dev Hub, click ú, then select Create new widget.
  2. In the Create new widget dialog, fill in the details to identify your widget library:

    • Enter a name for the widget. In this example we call it MyBarChart.
    • Select the widget library you just created: my-widget-lib.
    • You can designate a type for the widget, but it is not mandatory. For this example, from the Widget type drop-down list, select Chart.
    • If you wish, add a text description and author for the widget.
  3. Click Create.

    The Widget editor opens and the MyBarChart widget is highlighted in the list of widgets in the open library

Creating the widget skeleton

Start by creating some simple HTML code in the HTML editor to visualize a bar chart, without binding any data to it.

<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>

Adding some basic styling

Add some basic styling in the CSS editor.

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

Select an app so you can see a preview of the widget.

Binding the widget to simple properties

Test to bind the labels of the bar chart widget to some simple properties like the title and the subtitle of the widget. The Title and the Subtitle are defined in the properties panel builder. Under the Appearance component, select the General section and type in a Title and a Subtitle. In this example we type in My bar chart widget as the title and My subtitle as the subtitle.

The properties definitions for the title and the subtitle are:

  • {{settings.title}} for the title
  • {{settings.subtitle}} for the subtitle

Then, in the HTML editor, replace two of the bar definitions with the property definitions for the title and the subtitle. The code in the HTML editor should now look like this:

<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">{{settings.title}}</div>
  <div style="width: 420px;">{{settings.subtitle}}</div>
</div>

With the title and the subtitle defined in the properties panel builder, and the HTML containing references to those properties, the preview should look like this:

Adding the data component

At the bottom of the properties panel builder, click @ to go into edit mode. Add the Data component by dragging it from its section under Available components to the property panel and drop it where the Place here message appears.

Click V on the newly added Data component. Change the Dimensions Min and Max from 0 to 1 for both.

Click Done when ready to close the dialog and then click m at the bottom of the properties panel builder to apply your changes and exit edit mode.

Binding the widget to hypercube data

Remove all the manual bars inside the <div class="chart"> tags, including the two bars referencing the title and the subtitle. Add a div to get the values from the dimension.

<div class="chart">
  <div ng-repeat="row in data.rows" class="row" title="{{row.dimensions[0].qText}}">
  </div>
</div>

Create a div class="bar", where you define the bar representation of the measure value.

<div class="chart">
  <div ng-repeat="row in data.rows" class="row" title="{{row.dimensions[0].qText}}">
	<div class="bar" style="width:{{row.measures[0].getPercentOfMax()}}%">
		<span>{{row.dimensions[0].qText}}</span>
	</div>
  </div>
</div>

Create a div class="per", where you define the text representation of the measure value.

<div class="chart">
  <div ng-repeat="row in data.rows" class="row" title="{{row.dimensions[0].qText}}">
	<div class="bar" style="width:{{row.measures[0].getPercentOfMax()}}%">
		<span>{{row.dimensions[0].qText}}</span>
	</div>
	<div class="per">
		<span class="{{row.measures[0].getPercentOfMax()>95 ? 'over':'' }}">{{row.measures[0].qText}}</span>
	</div>
  </div>
</div>

Adding additional styling

Add styling to your new bar chart by replacing the basic styling added in the beginning.

Style the class="row" element:

.row {
	transition: all 0.3s ease;
	float: left;
	width: 98%;
	overflow: hidden;
	border: 1px solid #ccc;
	font: 10px sans-serif;
	background-color: whitesmoke;
	text-align: right;
	color: darkgray;
	padding: 2px;
	margin: 1px;
}

Style the class="bar" element and its span:

.bar {
	float: left;
	clear: left;
	height: 20px;
	background-color: steelblue;
}

.bar span {
	font-weight: bold;
	float: left;
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 5px;
	color: #f0f0f0;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 90%;
	white-space: nowrap;
}

Style the class="per" element and its span:

.per {
	position: relative;
}
.per span {
	font-weight: bold;
	float: left;
	margin-right: 5px;
	margin-top: 5px;
	margin-left: 5px;
}
.per span.over {
	position: absolute;
	right: 15px;
	color: #f0f0f0;
}

The widget should now look something like this: