- Chart Gallery
- Circular Gauges
- Wind Direction
Wind Direction
{
"gauge": {
"zIndex": 0,
"enabled": true,
"type": "circular-gauge",
"title": {
"zIndex": 80,
"enabled": false,
"maxLength": null,
"fontSize": 17,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#d7cacc",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Chart Title",
"margin": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": false,
"maxLength": null,
"fontSize": 15,
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": "#84707C",
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 10,
"top": 10,
"bottom": 10,
"right": 10
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 30,
"top": 30,
"bottom": 30,
"right": 30
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"chartLabels": [
{
"zIndex": 50,
"enabled": true,
"fontSize": "12px",
"fontFamily": "'Verdana', Helvetica, Arial, sans-serif",
"fontColor": "#212121",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"text": "<span style=\"color: #64B5F6; font-size: 13px\">Wind Direction: </span><span style=\"color: #5AA3DD; font-size: 15px\">120° (+/- 0.5°)</span><br><span style=\"color: #1976d2; font-size: 13px\">Wind Speed:</span> <span style=\"color: #166ABD; font-size: 15px\">12m/s</span>",
"position": "left-top",
"width": null,
"height": null,
"anchor": "center-top",
"offsetX": 0,
"offsetY": -20,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 72,
"background": {
"zIndex": 0,
"enabled": true,
"fill": "#fff",
"stroke": {
"color": "#E0F0FD",
"thickness": 1
}
},
"padding": {
"left": 20,
"top": 15,
"bottom": 15,
"right": 20
}
}
],
"bounds": {},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "AnyChart",
"url": "https://www.anychart.com/?utm_source=registered",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://static.anychart.com/logo.png",
"enabled": false
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"fill": "#fff",
"stroke": "none",
"startAngle": 0,
"circularPadding": "10%",
"encloseWithStraightLine": false,
"sweepAngle": 360,
"defaultPointerType": "needle",
"data": [
120,
12
],
"cap": {
"zIndex": 50,
"enabled": true,
"radius": "4%",
"stroke": "none",
"fill": "#1976d2",
"hatchFill": "none"
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select"
},
"axes": [
{
"zIndex": 10,
"enabled": true,
"fill": "#7c868e",
"overlapMode": "no-overlap",
"startAngle": 0,
"width": "1%",
"sweepAngle": -360,
"cornersRounding": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"scale": {
"type": "linear",
"inverted": false,
"maximum": 360,
"minimum": 0,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 30
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 10
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
"ticks": {
"zIndex": 10,
"enabled": true,
"length": "4%",
"type": "line",
"stroke": "none",
"fill": "#7c868e",
"hatchFill": "none",
"position": "outside"
},
"minorTicks": {
"zIndex": 10,
"enabled": false,
"length": null,
"type": "line",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"labels": {
"zIndex": 10.00004,
"enabled": true,
"padding": {
"left": 3,
"top": 3,
"bottom": 3,
"right": 3
},
"format": "{%Value}°",
"position": "outside"
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
},
{
"zIndex": 10,
"enabled": true,
"fill": "#7c868e",
"overlapMode": "no-overlap",
"startAngle": 270,
"width": "1%",
"sweepAngle": 180,
"radius": "40%",
"cornersRounding": "0%",
"drawFirstLabel": true,
"drawLastLabel": true,
"scale": {
"type": "linear",
"inverted": false,
"maximum": 25,
"minimum": 0,
"minimumGap": 0.1,
"maximumGap": 0.1,
"softMinimum": null,
"softMaximum": null,
"alignMinimum": true,
"alignMaximum": true,
"maxTicksCount": 1000,
"ticks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 5
},
"minorTicks": {
"mode": "linear",
"base": 0,
"allowFractional": true,
"interval": 1
},
"stackMode": "none",
"stackDirection": "direct",
"stickToZero": true,
"comparisonMode": "none"
},
"ticks": {
"zIndex": 10,
"enabled": true,
"length": "4%",
"type": "line",
"stroke": "none",
"fill": "#7c868e",
"hatchFill": "none",
"position": "outside"
},
"minorTicks": {
"zIndex": 10,
"enabled": false,
"length": null,
"type": "line",
"stroke": "none",
"fill": "#545f69",
"hatchFill": "none",
"position": "center"
},
"labels": {
"zIndex": 10.00004,
"enabled": true,
"padding": {
"left": 3,
"top": 3,
"bottom": 3,
"right": 3
},
"format": "{%Value} m/s",
"position": "outside"
},
"minorLabels": {
"zIndex": 10.00004,
"enabled": false
}
}
],
"pointers": [
{
"zIndex": 120,
"enabled": true,
"stroke": "none",
"fill": "#64b5f6",
"hatchFill": "none",
"axisIndex": 0,
"pointerType": "marker",
"size": "15%",
"position": "inside",
"radius": "97%",
"type": "triangle-up"
},
{
"zIndex": 40.0001,
"enabled": true,
"stroke": "none",
"fill": "#1976d2",
"hatchFill": "none",
"axisIndex": 1,
"pointerType": "needle",
"startWidth": "2%",
"startRadius": "6%",
"middleWidth": "1%",
"endWidth": "0%",
"endRadius": "38%"
}
]
}
}
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-circular-gauge.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/dark_glamour.min.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('darkGlamour');
var gauge = anychart.gauges.circular();
gauge
.fill('#fff')
.stroke(null)
.padding(0)
.margin(30)
.startAngle(0)
.sweepAngle(360);
gauge
.axis()
.labels()
.padding(3)
.position('outside')
.format('{%Value}\u00B0');
gauge.data([120, 12]);
gauge
.axis()
.scale()
.minimum(0)
.maximum(360)
.ticks({ interval: 30 })
.minorTicks({ interval: 10 });
gauge
.axis()
.fill('#7c868e')
.startAngle(0)
.sweepAngle(-360)
.width(1)
.ticks({
type: 'line',
fill: '#7c868e',
length: 4,
position: 'outside'
});
gauge
.axis(1)
.fill('#7c868e')
.startAngle(270)
.radius(40)
.sweepAngle(180)
.width(1)
.ticks({
type: 'line',
fill: '#7c868e',
length: 4,
position: 'outside'
});
gauge
.axis(1)
.labels()
.padding(3)
.position('outside')
.format('{%Value} m/s');
gauge
.axis(1)
.scale()
.minimum(0)
.maximum(25)
.ticks({ interval: 5 })
.minorTicks({ interval: 1 });
gauge.title().padding(0).margin([0, 0, 10, 0]);
gauge
.marker()
.fill('#64b5f6')
.stroke(null)
.size('15%')
.zIndex(120)
.radius('97%');
gauge
.needle()
.fill('#1976d2')
.stroke(null)
.axisIndex(1)
.startRadius('6%')
.endRadius('38%')
.startWidth('2%')
.middleWidth(null)
.endWidth('0');
gauge.cap().radius('4%').fill('#1976d2').enabled(true).stroke(null);
var bigTooltipTitleSettings = {
fontFamily: '\'Verdana\', Helvetica, Arial, sans-serif',
fontWeight: 'normal',
fontSize: '12px',
hAlign: 'left',
fontColor: '#212121'
};
gauge
.label()
.text(
'<span style="color: #64B5F6; font-size: 13px">Wind Direction: </span>' +
'<span style="color: #5AA3DD; font-size: 15px">' +
120 +
'\u00B0 (+/- 0.5\u00B0)</span><br>' +
'<span style="color: #1976d2; font-size: 13px">Wind Speed:</span> ' +
'<span style="color: #166ABD; font-size: 15px">' +
12 +
'm/s</span>'
)
.useHtml(true)
.textSettings(bigTooltipTitleSettings);
gauge
.label()
.hAlign('center')
.anchor('center-top')
.offsetY(-20)
.padding(15, 20)
.background({
fill: '#fff',
stroke: {
thickness: 1,
color: '#E0F0FD'
}
});
// set container id for the chart
gauge.container('container');
// initiate chart drawing
gauge.draw();
});
</script>
</body>
</html>
Circular Gauges are gauges of a circular shape with radial scale. There can be several axes and each might have a needle or marker pointing at the value. Mostly circular gauges are used as electronic simulators of real gauges like speedometers, tuners or watches.
This Chart displays the wind direction. It consists of a big outer gauge and a half-circular gauge inside. The outer gauge shows the wind direction itself; it has major ticks enabled and stroked; the 30-degrees interval is set between them and they are put in the counterclockwise order. The marker showing the wind direction is a triangle colored in light blue.
The second gauge which is small and half-circular shows the wind speed has major ticks also enabled and stroked; the interval between them is 5 meters per second. A knob and a needle are colored in bright blue and the needle points the wind speed.
Both wind direction and wind speed values are given under the inside-gauge.