Loading
Dynamically Resizing Gauges
In FusionCharts Suite XT, all charts and gauges can resize dynamically when the container element is resized.
In this section, you will be shown how you can:
-
Configure gauges for dynamic resizing
-
Resize gauges, that have manual values specified for various gauge elements, dynamically
-
Use the JS API function
resizeTo()for resizing charts
Configuring Gauges for Dynamic Resizing
To enable the dynamic resizing feature, you need to :
-
Set the gauge size in percentage.
-
Set the container dimensions such that it can resize dynamically when the browser resizes or due to other changes taking place in the page (like when an element is added/removed or due to user interaction)
Whenever the container element resizes, the gauge can also dynamically resize itself instantly.
An angular gauge configured to resize dynamically looks like this:
Given below is a brief description of the attribute used to configure dynamic resizing for gauges:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge will dynamically resize when its parent container is resized. Setting this attribute to |
|
If you’ve defined the chart parameters (like gauge origin, co-ordinates etc.) using a different chart size and now want to scale the chart to a different size, you need to specify the original width and height and then set the |
The data structure needed to enable dynamic resizing of the gauge is given below:
{
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Los Angeles Topanga",
"plotToolText": "Current Score: $value",
"manageResize": "1",
"theme": "fint",
"chartBottomMargin": "50",
"showValue": "1"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "4.5",
"code": "#e44a00"
},
{
"minValue": "4.5",
"maxValue": "7.5",
"code": "#f8bd19"
},
{
"minValue": "7.5",
"maxValue": "10",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "8.9"
}
]
},
"trendPoints": {
"point": [
{
"startValue": "6.8",
"color": "#0075c2",
"dashed": "1"
},
{
"startValue": "9.5",
"color": "#0075c2",
"dashed": "1"
},
{
"startValue": "6.8",
"endValue": "9.5",
"color": "#0075c2",
"radius": "185",
"innerRadius": "80"
}
]
},
"annotations": {
"origw": "400",
"origh": "350",
"autoscale": "1",
"showBelow": "0",
"groups": [
{
"id": "arcs",
"x": "0",
"y": "0",
"items": [
{
"id": "national-cs-bg",
"type": "rectangle",
"x": "$chartCenterX+2",
"y": "$chartEndY - 45",
"tox": "$chartCenterX + 130",
"toy": "$chartEndY - 25",
"fillcolor": "#f8bd19"
},
{
"id": "national-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "National Average : 7.2",
"fontSize": "12",
"align": "left",
"x": "$chartCenterX + 7",
"y": "$chartEndY - 35"
},
{
"id": "state-cs-bg",
"type": "rectangle",
"x": "$chartCenterX-2",
"y": "$chartEndY - 45",
"tox": "$chartCenterX - 103",
"toy": "$chartEndY - 25",
"fillcolor": "#6baa01"
},
{
"id": "state-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "State Average : 8",
"fontSize": "12",
"align": "right",
"x": "$chartCenterX - 7",
"y": "$chartEndY - 35"
},
{
"id": "store-cs-bg",
"type": "rectangle",
"x": "$chartCenterX-130",
"y": "$chartEndY - 22",
"tox": "$chartCenterX + 150",
"toy": "$chartEndY - 2",
"fillcolor": "#0075c2"
},
{
"id": "state-cs-text",
"type": "Text",
"color": "#ffffff",
"label": "Store's Customer Satisfaction Range: 6.8 to 9.5",
"fontSize": "12",
"align": "center",
"x": "$chartCenterX + 10",
"y": "$chartEndY - 12"
}
]
}
]
}
}In this example, we have set the chart’s size in percentage and have set manageResize to 1 (true) in the chart object of the JSON data. These make the gauge capable of re-calculating the space available and adjusting to its new surroundings whenever the dimensions of the parent container changes.
Two input fields have been rendered with the gauge to enter the target width and height for the container element. When, after entering values in both fields, the Resize button is clicked, the width and the height of the container element are resized based on the inputs provided. As soon as the dimensions of the container element change, the gauge automatically resizes itself.
Please note that while dynamic resizing, the gauge and all its elements are scaled proportionally and works perfectly only for constrained resizing i.e., both width and height of the gauge are resized in proportions. If the chart is not scaled in proportions, the gauge will scale in the least possible proportion and then leave empty space all around it.
Dynamic Resizing of Gauges with Manual Values Specified for Various Gauge Elements
You can configure the various functional and cosmetic properties of gauge elements by manually specifying values for each. For example, you can configure the gauge radius, the dial radius, the tick value distance, the gauge origin etc. Ideally, you set these values based on specific width and height dimensions for the gauge. We name these dimensions as the original width and the original height of the gauge.
By default, a gauge set with manually-specified positions and size, when rendered initially, draws itself with all the elements based on the values provided in the JSON/XML. It does not scale its coordinates and other gauge elements. When this gauge is resized, it scales the manually specified values or coordinates based on the dimensions of the initially rendered gauge, that is, the width and height of the gauge when rendered for the first time. Thus, scaling of the various manually configured elements of a gauge will vary and may create problems when the initial dimensions of the gauge are different from the original width and height of the gauge.
When a gauge is rendered initially using the original width and original height, and then resized dynamically to different dimensions, the gauge can automatically re-calculate and scale these manual values to fit all the gauge elements to the new size.
However, it is observed that when the dimensions of the initially rendered gauge are NOT the same as the original width and original height (based on which the other parameters have been defined),
-
The initially rendered gauge and all its elements do not scale and fit to the current dimensions of the gauge.
-
On further resizing the gauge, all its elements scale based on the dimensions of the initially rendered gauge.
This scenario is apparent in applications that have containers with dynamic dimensions like web parts, panels, etc. These containers are not set with fixed dimensions. Rather, they derive their dimensions based on various conditions like the space available, the number of rows and columns, etc.
This may lead to either a cropped gauge or a gauge with lots of extra space and even when you further resize the container, the gauge will not fit into the given space and will always remain cropped or spaced.
To take care of this scenario, you need to pass the original width and height (as values to the attributes origW and origH, respectively) to the gauge. On receiving the original width and height, the gauge checks them against the current dimensions and scales everything accordingly.
The below sample is calculated with a original width of 390 pixels and original height of 300 pixels. And a host of attributes (like, gaugeOriginX, gaugeOriginY, gaugeOuterRadius and valueX and valueY on dial object) are defined with fixed coordinate values. Now if you have to render this chart with any values other than 390 pixels wide and 300 pixels tall, several of the gauge elements may not be positioned as intended. To solve this issue we have defined origw and origh attributes to 390 and 300 respectively in the chart object. And have provided a different width and height (300 and 280) for the chart. The chart still appears as expected.
An angular gauge, with element sizes manually-specified, configured for dynamic resize looks like this:
Given below is a brief description of the attributes that control dynamic resizing:
| Attribute Name | Description |
|---|---|
|
It is used to specify the original width of the gauge, if you have opted to dynamically resize the chart. It refers to the width based on which the various elements of the gauge have been manually configured. |
|
It is used to specify the original height of the gauge, if you have opted to dynamically resize the chart. It refers to the height based on which the various elements of the gauge have been manually configured. |
The data structure needed to render this angular gauge is given below:
In a similar way, the annotations present in a gauge can also be scaled and resized dynamically.
Please also note that the dynamic resizing feature will not work if you have set "autoScale": "0".
Using JS API Function resizeTo() for Resizing Charts
The FusionCharts JavaScript API allows you to resize an existing chart using the resizeTo() function. You can pass the new width and height of the chart in pixels or percent parameters to the resizeTo() function. You can also change the width and height property of the chart object and then call the resizeTo() function.
An angular gauge configured for using the resizeTo() functions looks like this:
Given below is a brief description of the resizeTo() function:
| API Method signature | Description |
|---|---|
|
It is used to resize an existing chart. This method accepts the width and height values as parameters. The width and height can be specified in pixels or as percentage values. |
The data structure needed to configure the resizeTo() method for the angular gauge is given below:
{
"chart": {
"caption": "Speedometer",
"captionFont": "Arial",
"captionFontColor": "#333333",
"manageresize": "1",
"origw": "320",
"origh": "320",
"tickvaluedistance": "-10",
"bgcolor": "#FFFFFF",
"upperlimit": "240",
"lowerlimit": "0",
"basefontcolor": "#FFFFFF",
"majortmnumber": "9",
"majortmcolor": "#FFFFFF",
"majortmheight": "8",
"majortmthickness": "5",
"minortmnumber": "5",
"minortmcolor": "#FFFFFF",
"minortmheight": "3",
"minortmthickness": "2",
"pivotradius": "10",
"pivotbgcolor": "#000000",
"pivotbordercolor": "#FFFFFF",
"pivotborderthickness": "2",
"tooltipbordercolor": "#FFFFFF",
"tooltipbgcolor": "#333333",
"gaugeouterradius": "115",
"gaugestartangle": "240",
"gaugeendangle": "-60",
"gaugealpha": "0",
"decimals": "0",
"showcolorrange": "0",
"placevaluesinside": "1",
"pivotfillmix": "",
"showpivotborder": "1",
"annrenderdelay": "0",
"gaugeoriginx": "160",
"gaugeoriginy": "160",
"showborder": "0"
},
"dials": {
"dial": [
{
"value": "65",
"bgcolor": "000000",
"bordercolor": "#FFFFFF",
"borderalpha": "100",
"basewidth": "4",
"topwidth": "4",
"borderthickness": "2",
"valuey": "260"
}
]
},
"annotations": {
"groups": [
{
"x": "160",
"y": "160",
"items": [
{
"type": "circle",
"radius": "130",
"fillasgradient": "1",
"fillcolor": "#4B4B4B,#AAAAAA",
"fillalpha": "100,100",
"fillratio": "95,5"
},
{
"type": "circle",
"x": "0",
"y": "0",
"radius": "120",
"showborder": "1",
"bordercolor": "cccccc",
"fillasgradient": "1",
"fillcolor": "#ffffff,#000000",
"fillalpha": "50,100",
"fillratio": "1,99"
}
]
},
{
"x": "160",
"y": "160",
"showbelow": "0",
"scaletext": "1",
"items": [
{
"type": "text",
"y": "100",
"label": "KPH",
"fontcolor": "#FFFFFF",
"fontsize": "14",
"bold": "1"
}
]
}
]
}
}There! You have now seen how you can configure an angular gauge to be dynamically resized.