Support > Repository > Portal > Use gauge parts

I will explain how to use Dojotoolkit's gauge parts. (The description on this page is for programmers.)

Before reading this page, obtain JSON data via REST API "Display values ​​of arbitrary modelsPlease prepare a portlet.

I will show sample code to fix "displayCountOfAsk" prepared at that time and display it with 3 gauge parts respectively. The gauge is using parts provided by Dojotoolkit (included in Wagby).

An example

Figure 1

size

It is 200 in height and 200 in width.

2

content

<div id="displayCountOfAskMsg" ></div>
<div id="displayCountOfAskGauge" style="margin-left:10px;"></div>

script

dojo.require('dijit.form.Button');
dojo.require('dojox.gauges.GlossyCircularGauge');
var displayCountOfAskGaugesFunc = function() {
    var value = data.entity[0].countOfAsk_;
    var glossyCircular1 = new dojox.gauges.GlossyCircularGauge({
        background: [255, 255, 255, 0],
        title: 'value',
        id: "displayCountOfAskGaugeParts",
        width: 160,
        height: 140,
        value: value,
        noChange: true
    }, dojo.byId("displayCountOfAskGauge"));
    glossyCircular1.startup();
};
if (data.listp.item_.length > 0) {
  dojo.ready(displayCountOfAskGaugesFunc);
} else {
  domConstruct.create("div", {'class': 'nomsg', innerHTML: '問い合わせデータはありません'}, "displayCountOfAskMsg");
}

DomConstruct in the above code uses module dojo/dom-construct for DOM manipulation provided by Dojotoolkit.When the portlet type is "list", we make it available soon.

An example

3

size

It is 200 in height and 200 in width.

4

content

<div id="displayCountOfAskMsg" ></div>
<div id="displayCountOfAskGauge" style="margin-left:10px;"></div>

script

dojo.require('dijit.form.Button');
dojo.require('dojox.gauges.GlossySemiCircularGauge');
var displayCountOfAskGaugesFunc = function() {
    var value = data.entity[0].countOfAsk_;
    var glossyCircular1 = new dojox.gauges.GlossySemiCircularGauge({
        background: [255, 255, 255, 0],
        title: 'value',
        id: "displayCountOfAskGaugeParts",
        width: 160,
        height: 140,
        value: value,
        noChange: true
    }, dojo.byId("displayCountOfAskGauge"));
    glossyCircular1.startup();
};
if (data.listp.item_.length > 0) {
  dojo.ready(displayCountOfAskGaugesFunc);
} else {
  domConstruct.create("div", {'class': 'nomsg', innerHTML: '問い合わせデータはありません'}, "displayCountOfAskMsg");
}

An example

5

size

It is 200 in length and 300 in width.

6

content

<div id="displayCountOfAskMsg" ></div>
<div id="displayCountOfAskGauge" style="margin-left:5px;"></div>

script

dojo.require('dijit.form.Button');
dojo.require('dojox.gauges.GlossyHorizontalGauge');
var displayCountOfAskGaugesFunc = function() {
    var value = data.entity[0].countOfAsk_;
    var glossyCircular1 = new dojox.gauges.GlossyHorizontalGauge({
        background: [255, 255, 255, 0],
        title: 'value',
        id: "displayCountOfAskGaugeParts",
        width: 270,
        height: 140,
        value: value,
        noChange: true
    }, dojo.byId("displayCountOfAskGauge"));
    glossyCircular1.startup();
};
if (data.listp.item_.length > 0) {
  dojo.ready(displayCountOfAskGaugesFunc);
} else {
  domConstruct.create("div", {'class': 'nomsg', innerHTML: '問い合わせデータはありません'}, "displayCountOfAskMsg");
}

The parameter passed to the gauge introduced above was "the number of inquiries".However, gauges should be used as a percentage by nature.In this case, calculate the value to display.The example below is a calculation of what percentage of the target value the value of the listing item "earings" (sales) has reached.

Since value item.earnings_ is "character string", it operates after converting it to a number with function parseFloat provided by JavaScript.

var displaySalestotalGauges = function() {
    var item = data.listp.item_[0];
    var value = (parseFloat(item.earnings_) / 1000000 * 100);
    var glossyCircular1 = new dojox.gauges.GlossyCircularGauge({
        background: [255, 255, 255, 0],
        title: 'Value',
        id: "salestotalGaugeParts",
        width: 200,
        height: 200,
        value: value,
        noChange: true
    }, dojo.byId("salestotalGauge"));
    glossyCircular1.startup();
};