Learn how to incorporate JSON data into your Wind Rose Polar Highchart rather than using traditional table data

 data: {
        table: 'freq',
        startRow: 1,
        endRow: 17,
        endColumn: 7
    },

Seeking assistance on how to implement JSON for a Wind rose polar highchart instead of using table data. https://jsfiddle.net/id10922606/26njzy7k/1/

Answer №1

Although I am arriving late to the discussion, I wanted to share the answer for anyone else who may come across this question. I also found it challenging to find the correct solution. The answers in related questions didn't quite hit the mark because they were using raw wind speeds instead of wind frequencies when working with polar wind roses without the table data from the highcharts demo example.

The polar version can be likened to a stacked columns chart, but imagine the x-axis wrapping around a circle. On the x-axis, we have the wind directions defined by the categories option. The y-axis represents the wind speed buckets. The series data is structured as follows:


         //data series
         {
            //series 1
            name: '10-20 kmph',
            //essentially the frequencies for that wind speed across all directions
            //e.g., 1.5% comes from N, 4.5% from NNE, 3.0% from NE, etc.
            data: [1.5, 4.5, 3.0, 0 ... ]
         },
         {
            //series 2
            name: '20-30 kmph',
            data: [1.2, 3.6, 0, .... ]
         }
         //and so on

Here is the code snippet I utilized to calculate the frequency data extracted via JSON:


          //chart no.1 - wind rose
          $scope.windRoseConfig = {
              options: {
                  chart: { polar: true, type: 'column' },
                  yAxis: {
                     title: { text: 'Frequency' }, 
                     reversedStacks: false
                  },
                  plotOptions: {
                     series: {
                        stacking: 'normal',
                        shadow: false,
                        groupPadding: 0,
                        pointPlacement: 'on'
                     }
                  }
              },

              title: { text: 'Wind Rose' },

              series: seriesData,

              xAxis: {
                  tickmarkPlacement: 'on',
                  categories: [ "N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW" ]
              }
          }

       }

Answer №2

For a demonstration using JSON, click on this link: Demo

series: [
    {
      name: '10-20 kmph',
      data: [1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5]
    },
    {
      name: '20-30 kmph',
      data: [1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5, 4.5, 3.0, 1.5]
    }
],
xAxis: {
    tickmarkPlacement: 'on',
    categories: ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"]
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving distinctive keys from deeply nested JSON data using jq

I am seeking to create an all_keys function that can extract all keys from a nested JSON blob, navigating through arrays and objects as necessary. The goal is to generate an array of keys without any duplicates. For example, consider the following input: ...

Decoding JSON data in golang

Just starting out with golang here. I'm looking to decode some JSON data as shown below: { "intro": { "title": "The Little Blue Gopher", "story": [ "Once upon a time, long long ago, there was a little blue gopher. Our little blue fr ...

A guide on incorporating a customized Google map into your website

Recently, I utilized the Google Map editing service from this site: https://developers.google.com/maps/documentation/javascript/styling This link provided me with two things: 1. A JSON code 2. The Google API link However, I am unsure about how to incorpo ...

From Panda's Den to JSON Empire: Unraveling the Dataframe

After an exhaustive review and attempt at implementing all the other solutions on SO related to this challenge, I have yet to find a working solution. Question: How can I convert employee and supervisor pairs into a dynamic hierarchical JSON structure for ...

When using JSON.stringify on a map object, it returns an empty result

var map1= new Map(); map1.set("one",1); var map2 = new Map(); map2.set("two",2); concatMap = {}; concatMap['one']= map1; concatMap['two']= map2; JSON.stringify(concatMap); //outputs : "{"one":{},"two":{}}" I als ...

Encountering a compilation error while trying to utilize Newtonsoft.Json in my Blazor application

This snippet contains the following code: @page "/" @using Newtonsoft.Json @using System.Text.Json @using System.Text.Json.Serialization <h1>Hello World</h1> @code { public class Account { public string Email { get; set; } public boo ...

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

I am aware of the potential for a Cross-Site Forgery Attack that can target requests returning arrays by manipulating the Array constructor. For instance, let's say I have a site with a URL: foo.com/getJson that provides the following array: [&apos ...

Exploring JSON data and making precise adjustments in JavaScript

I am attempting to create my own database using JavaScript and JSON, but I have encountered some issues along the way. My main struggle is figuring out how to extract specific content from a JSON file. After doing some research, I came across this code sn ...

A guide on converting hierarchical database data into JSON format

I have some data stored in a database that represents a hierarchical tree structure. The code snippet below shows how this can be structured using a simple DataTable in C#. using System.Data; namespace DemoConsoleApp { class Program { sta ...

Can the hash of a string be calculated while it already contains that hash?

As I was working today, I found myself attempting to generate a JSON document that looked like this: { 'a' : 1, 'b' : 2, 'hash' : (some hash value), } The challenge I encountered was setting the hash value to be ...

Retrieve information using the GET method in REST API

I have a JSON file containing various data fields such as name, roll number, address, and mobile number. I am looking to display only the roll number and address information from this file using node.js. Can someone provide instructions on how to achieve ...

Exploring the differences between conditional serialization using JAXB and Jackson: An insight into External and Internal Views

As I develop a RESTful API, I encounter a scenario where I must present two different perspectives of my data - one for internal use and another for external exposure. Furthermore, my API should accommodate both XML and JSON formats. In the case of JSON r ...

Is there a way to merge these arrays into a single array?

With the current code I am obtaining numerous JSON objects within separate arrays: Here is the code snippet: for (let i=1; i<=150;i++){ fetch(`A valid URL ${i}`) .then(result => result.json()) .then(result => console.log(result.data.results)) ...

Using JavaScript: Retrieve the URL from a JSON file and run it in the background

I am looking to make a JSON request using jQuery: $.getJSON('http://example.com/file.php', function(data) { //data }); An example of the JSON output: { "url":"http://example.com/execute.php" } Next, I want to silently execute the URL on th ...

AngularJS request has exceeded the time limit

Although this question may have been asked before, I couldn't find a solution. It's currently 10:30pm and I really need help from you guys! The issue I'm facing involves two json server methods - one to update data and the other to get new ...

Transform Dynamic Array to JSON structure

I am currently developing a feature in my SvelteKit application that allows users to create custom roles for themselves. Users can input a role name and add it to an array, which is then displayed below. https://i.stack.imgur.com/oUPFU.png My goal is to ...

Using ext.js to make asynchronous AJAX requests

Could someone help me with a question? I have the code below that I found from a certain source: Ext.Ajax.request({ url: 'http://localhost/day1/new.php', method:'GET', params:{format:'json'}, success: this. ...

What is the best way to parse a JSON file in GWT without knowing the structure

I am developing a GWT project and facing the challenge of loading and parsing JSON files with unknown schema. It seems that using overlay types may not be the best approach as I cannot predict the format of the file beforehand. Despite researching online ...

Unusual occurrences of backslashes in arrays when using JSON.stringify

While experimenting with JavaScript, I observed an unusual behavior when inserting a backslash \ into a string within an array and using JSON.stringify() to print it. Normally, the backslash is used for escaping special characters, but what if we actu ...

What is the process of retrieving user input from an HTML form and locating specific data within it?

Here is the structure of my form: <div id="employeeinfo" style="padding:40px" class="employee-body"> <form id="employeeform" title="" method="post"> <label class="title">First Name</label> < ...