Support > Repository > Portal > Use gauge parts
ja | en

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).

Example of execution

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 ('dojox.gauges.GlossyCircularGauge'); var displayCountOfAskGaugesFunc = function () {var value = data.entity [0] .countOfAsk_; var glossyCircular1 = new dojox Value: value, noChange: true}, dojo.byId ({background: [255, 255, 255, 0], title: 'value', id: "displayCountOfAskGaugeParts", width: 160, height: 140, value: ("DisplayCountOfAskGauge")); glossyCircular1.startup ();}; if (data.listp.item_.length> 0) {dojo.ready (displayCountOfAskGaugesFunc);} else {domConstruct.create ("div", {'class' : 'Nomsg', innerHTML: 'no query data'}, "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.

Example of execution

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

> } 'Else {domConstruct.create ("div", {' class': 'nomsg', innerHTML: 'no query data'}, "displayCountOfAskAssMsg");

Example of execution

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

Var displayCountOfAskGaugesFunc = function () {var value = data.entity [0] .countOfAsk_; var glossyCircular1 = new dojox ('dijit.form.Button'); dojo.require ('dojox.gauges.GlossyHorizontalGauge'); Value: value, noChange: true}, dojo.byId ({background: [255, 255, 255, 0], title: 'value', id: "displayCountOfAskGaugeParts", width: 270, height: 140, value: ("DisplayCountOfAskGauge")); glossyCircular1.startup ();}; if (data.listp.item_.length> 0) {dojo.ready (displayCountOfAskGaugesFunc);} else {domConstruct.create ("div", {'class' : 'Nomsg', innerHTML: 'no query data'}, "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 ();};