Today, We want to share with you Wind Rose Chart Tutorial With Examples.In this post we will show you Wind rose chart using highcharts with example, hear for Highcharts wind rose chart with json rowswap example we will give you demo and example for implement.In this post, we will learn about pyramid chart highcharts with an example.
Wind Rose Chart Tutorial With Examples
There are the Following The simple About wind rose generator by location Full Information With Example and source code.
As I will cover this Post with live Working example to develop How to use highcharts to create wind rose chart with example, so the highcharts wind barb is used for this example is following below.
Highcharts Wind Rose Chart Example
index.html
Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts - Wind Rose Chart - www.pakainfo.com</title>
<script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
<script src="https://www.pakainfo.com/jquery/js/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/rowswap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chartrowswap = {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 7
}
var graphtype = {
polar: true,
type: 'column'
}
var graphTitle = {
text: 'Wind rose for South Shore Met Station, Oregon'
}
var graphchildtitle = {
text: 'Source: or.water.usgs.gov'
}
var chartpane = {
size: '85%'
}
var graphlegend = {
align: 'right',
verticalAlign: 'top',
y: 141,
layout: 'vertical'
}
var graphxaxis = {
tickmarkPlacement: 'on'
}
var graphyaxis = {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Frequency (%)'
},
labels: {
formatter: function () {
return this.value + '%';
}
},
reversedStacks: false
}
var graphtooltip = {
valueSuffix: '%'
}
var graphplotoptions = {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
$('#chart-full-content').highcharts({
data:chartrowswap,
chart: graphtype,
title: graphTitle,
subtitle:graphchildtitle,
pane: chartpane,
legend:graphlegend,
xAxis: graphxaxis,
yAxis: graphyaxis,
tooltip: graphtooltip,
plotOptions: graphplotoptions
});
});
</script>
</head>
<body>
<div id="chart-full-content" style="min-width: 420px; max-width: 841px; height: 425px; margin: 0 auto"></div>
<div style="display:none">
<!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl -->
<table id="freq" border="0" cellspacing="0" cellpadding="0">
<tr nowrap bgcolor="#CCCCFF">
<th colspan="9" class="hdr">Table of Frequencies (percent)</th>
</tr>
<tr nowrap bgcolor="#CCCCFF">
<th class="freq">Direction</th>
<th class="freq">< 0.5 m/s</th>
<th class="freq">0.5-2 m/s</th>
<th class="freq">2-4 m/s</th>
<th class="freq">4-6 m/s</th>
<th class="freq">6-8 m/s</th>
<th class="freq">8-10 m/s</th>
<th class="freq">> 10 m/s</th>
<th class="freq">Total</th>
</tr>
<tr nowrap>
<td class="dir">N</td>
<td class="rowswap">1.81</td>
<td class="rowswap">1.78</td>
<td class="rowswap">0.16</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">3.75</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">NNE</td>
<td class="rowswap">0.62</td>
<td class="rowswap">1.09</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">1.71</td>
</tr>
<tr nowrap>
<td class="dir">NE</td>
<td class="rowswap">0.82</td>
<td class="rowswap">0.82</td>
<td class="rowswap">0.07</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">1.71</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">ENE</td>
<td class="rowswap">0.59</td>
<td class="rowswap">1.22</td>
<td class="rowswap">0.07</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">1.88</td>
</tr>
<tr nowrap>
<td class="dir">E</td>
<td class="rowswap">0.62</td>
<td class="rowswap">2.20</td>
<td class="rowswap">0.49</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">3.32</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">ESE</td>
<td class="rowswap">1.22</td>
<td class="rowswap">2.01</td>
<td class="rowswap">1.55</td>
<td class="rowswap">0.30</td>
<td class="rowswap">0.13</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">5.20</td>
</tr>
<tr nowrap>
<td class="dir">SE</td>
<td class="rowswap">1.61</td>
<td class="rowswap">3.06</td>
<td class="rowswap">2.37</td>
<td class="rowswap">2.14</td>
<td class="rowswap">1.74</td>
<td class="rowswap">0.39</td>
<td class="rowswap">0.13</td>
<td class="rowswap">11.45</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">SSE</td>
<td class="rowswap">2.04</td>
<td class="rowswap">3.42</td>
<td class="rowswap">1.97</td>
<td class="rowswap">0.86</td>
<td class="rowswap">0.53</td>
<td class="rowswap">0.49</td>
<td class="rowswap">0.41</td>
<td class="rowswap">9.31</td>
</tr>
<tr nowrap>
<td class="dir">S</td>
<td class="rowswap">2.66</td>
<td class="rowswap">4.74</td>
<td class="rowswap">0.43</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">7.83</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">SSW</td>
<td class="rowswap">2.96</td>
<td class="rowswap">4.14</td>
<td class="rowswap">0.26</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">7.37</td>
</tr>
<tr nowrap>
<td class="dir">SW</td>
<td class="rowswap">2.53</td>
<td class="rowswap">4.01</td>
<td class="rowswap">1.22</td>
<td class="rowswap">0.49</td>
<td class="rowswap">0.13</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">8.39</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">WSW</td>
<td class="rowswap">1.97</td>
<td class="rowswap">2.66</td>
<td class="rowswap">1.97</td>
<td class="rowswap">0.79</td>
<td class="rowswap">0.30</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">7.70</td>
</tr>
<tr nowrap>
<td class="dir">W</td>
<td class="rowswap">1.64</td>
<td class="rowswap">1.71</td>
<td class="rowswap">0.92</td>
<td class="rowswap">1.45</td>
<td class="rowswap">0.26</td>
<td class="rowswap">0.10</td>
<td class="rowswap">0.41</td>
<td class="rowswap">6.09</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">WNW</td>
<td class="rowswap">1.32</td>
<td class="rowswap">2.40</td>
<td class="rowswap">0.99</td>
<td class="rowswap">1.61</td>
<td class="rowswap">0.33</td>
<td class="rowswap">0.41</td>
<td class="rowswap">0.41</td>
<td class="rowswap">6.64</td>
</tr>
<tr nowrap>
<td class="dir">NW</td>
<td class="rowswap">1.58</td>
<td class="rowswap">4.28</td>
<td class="rowswap">1.28</td>
<td class="rowswap">0.76</td>
<td class="rowswap">0.66</td>
<td class="rowswap">0.69</td>
<td class="rowswap">0.03</td>
<td class="rowswap">9.28</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">NNW</td>
<td class="rowswap">1.51</td>
<td class="rowswap">5.41</td>
<td class="rowswap">1.32</td>
<td class="rowswap">0.13</td>
<td class="rowswap">0.23</td>
<td class="rowswap">0.13</td>
<td class="rowswap">0.07</td>
<td class="rowswap">8.39</td>
</tr>
<tr nowrap>
<td class="allsums">Total</td>
<td class="allsums">25.53</td>
<td class="allsums">44.54</td>
<td class="allsums">15.07</td>
<td class="allsums">8.52</td>
<td class="allsums">4.31</td>
<td class="allsums">1.81</td>
<td class="allsums">0.23</td>
<td class="allsums"> </td>
</tr>
</table>
</div>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about wind rose diagram.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.