Adjusting the startAngle parameter dynamically within HighCharts

I am looking to dynamically adjust the startAngle value on my polar chart based on the 'Wind_direction' value from JSON data. Here's the code snippet:

$(function() {
$.getJSON('wind_graph.php?callback=?', function(dataWind) {
    var direction = Wind_direction;
    var polarOptions = {
    chart: {
      polar: true,
      events : {
          load : function () {
              setInterval(function(){
                RefreshDataWind();
                }, 1000);
          }
      }
    },
    title: {
      text: 'Wind Direction'
    },
    pane: {
      startAngle: direction,
    },
    xAxis: {
      tickInterval: 15,
      min: 0,
      max: 360
    },
    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 30,
      },
    }
  };

  // The polar chart
  $('#graph-1').highcharts(Highcharts.merge(polarOptions, {
    yAxis: {
      tickInterval: 5,
      min: 0,
      max: 25,
      visible: false
    },
    series: [{
        type: 'line',
        name: 'Direction',
        data: [
          [0, 0],
          [direction, 20]
        ],
      }
    ]
  }));

  function RefreshDataWind()
  {
    var chart = $('#graph-1').highcharts();
    $.getJSON('wind_graph.php?callback=?', function(dataWind)
    {
        var direction = Wind_direction;
        chart.series[0].setData([[0,0],[direction, 20]]);
    }); 
  }
});
});

In the last section of the code, I attempted to include this line below 'chart.series[0].setData...':

chart.pane.setStartAngle(direction);

Unfortunately, this resulted in an error: "Cannot read property 'startAngle' of undefined."

I also tried another approach:

polarOptions.pane({ startAngle: direction });

But this yielded an error: "polarOptions.pane is not a function".

So, I'm stuck. Any help would be greatly appreciated.

Answer №1

If you want to update all the chart options, you can use the Chart.update() method. However, it seems that this method does not have any effect on the pane - I have raised this issue here.

Alternatively, you can update the pane in a more traditional way by destroying and creating a new chart. Here is an example: http://jsfiddle.net/highcharts/qhY8C/

Another workaround is to set options for the pane, remove the existing pane, and then update the axis. This will create a new pane with the updated options.

const xAxis = chart.xAxis[0];
chart.options.pane.startAngle = 45;
Highcharts.erase(chart.panes, xAxis.pane);
chart.yAxis[0].update(null, false);
xAxis.update();

Here is an example of this workaround: http://jsfiddle.net/v8L381Lj/

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

What are the strategies for distinguishing between languages in React Native prior to mounting the component?

I had high hopes for this solution, but unfortunately it doesn't work as expected. The issue is that this.text.pupil is undefined. Could the problem possibly be related to componentWillMount? If so, how can I handle multiple languages outside of ...

Preventing the mysql server called by php from running when the website is refreshed

My local website runs by querying a mysql database using inputs from an html form. The form values are passed to php via jQuery to execute the query. Is there a way to send a command to the mysql server to terminate the query if the web page is refreshed? ...

Showing Text Information from a distant web server's jQuery.getJSON() script

I am currently working on a personal project that involves displaying data from a remote server. The HTML code I am using looks like this: <script> jQuery.getJSON("http://someurl.com/something.cgi? AJZ=1&STOCK=S", function(data) { if (data.inform ...

What strategies can I employ to help JSDoc/TypeScript recognize JavaScript imports?

After adding // @ts-check to my JavaScript file for JSDoc usage, I encountered errors in VS Code related to functions included with a script tag: <script src="imported-file.js"></script> To suppress these errors, I resorted to using ...

Error encountered: Unable to send a text value using cURL's -d option

When I run the following command: curl.exe -k -L -X PUT "https://developer-api.nest.com/devices/thermostats/[DEVICE_ID]/hvac_mode.json?auth=[ACCESS_TOKEN]" -H "Content-Type: application/json" -d "heat" It gives me this error message: {"error":"Invalid c ...

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

Unable to retrieve data from the React API

Whenever I try to reload my page, I encounter an error while fetching content from the API. I have attached an image showing the issue. My goal is to retrieve weather details using the Weather API, and for now, I am using fixed latitude and longitude value ...

Kreait makes working with Firebase push notifications a breeze

After implementing Kreait for sending Firebase push notifications successfully, I encountered an issue. Every time I try to send the request, I receive a 404 error indicating that the URL does not exist (Client error: POST https://fcm.googleapis.com/v1/pro ...

Strategies for efficiently parsing JSON in HTML using AngularJS

I have received this JSON format and I am looking to extract the message and username fields. How can I achieve this? Also, I want to format the date in Y-m-d format. I tried using ng-repeat but couldn't print the data. Can someone please help me disp ...

HTML5Up! Skyrocketing with Meteor showers

While attempting to utilize a responsive site template from , I encountered several issues. To test the template, I downloaded the Striped package and created a clients folder in a Meteorite app where I placed the Striped folder. In order to make it work, ...

Creating a customized date picker design with Material UI

Instead of displaying the date in DD/MM/YYYY format, I would like to show "Today" text. For example, when using a datepicker, the browser may display a date like 20/1/2009. However, I want it to show "Today" instead of that specific date. ...

Incorporating S3 images into vanilla JavaScript within a Django storages environment

I am facing a simple issue that I cannot seem to resolve. I have configured Django storages to serve static files from S3. In my template, I define the image source like this: "{% static 'fun_share/img/logo/logo.svg' %}" with STATIC_UR ...

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

Sending POST Requests with Node and ExpressJS in the User Interface

Just diving into the world of Node.js and Express.js, I'm attempting to create a form submission to an Express.js backend. Below is a snippet of the code I am working with: var author = 'JAck'; var post = 'Hello World'; var body ...

Defense Against Altering POST Values via Browser Developer Tools

   Having searched extensively, I have been unable to locate an answer to my question...or perhaps I am not phrasing it correctly in my searches. Anyways, below is my question and description: As I develop a web application using Django, Javascript, H ...

Express Angular Node Template Render throwing an error: module 'html' not found

I am currently in the process of creating a web application using AngularJS with ui-router for routing via $stateProvider, ensuring that only the specified states are displayed in the ui-view. In my server.js file, I have set up an initial framework such ...

The error message "TypeError ".deploy" is not a function in your Hardhat environment."

Currently, I'm in the process of developing a page for minting NFTs called astro-mint. To move forward, I need to deploy my contract using hardhat. However, when I execute this command npx hardhat run scripts/deploy.js --network dexitTestnet An erro ...

Tips for sending a changing mouse scroll value as a property in VueJS

I am currently utilizing the Laravel - VueJS framework. My goal is to detect the Y position of the mouse scroll and pass it dynamically as a prop to a Navbar component. To achieve this, I set up an eventListener and stored the window.scrollY value in a va ...

Determining the Similarity of jQuery Selectors' Selected Elements

I'm looking for a way to programmatically identify if two jQuery selectors have chosen the exact same element. My goal is to iterate over multiple divs and exclude one of them. This is what I envision: var $rows, $row, $row_to_exclude; $rows ...

List of sortable components

I have successfully implemented a filters section using vue.js to display dynamic responses based on user-selected filters. The components, in this case, represent cars with attributes such as price and brand. Now, I want to add two more filters that will ...