What is the process for extracting the period value from SMA technical indicators within highcharts?

Can someone assist me in retrieving the period value from SMA indicator series by clicking on the series?

series : [{
                name: 'AAPL Stock Price',
                type : 'line',
                id: 'primary',
                data : data
            }, {
                name: '15-day SMA',
                linkedTo: 'primary',
                showInLegend: true,
                type: 'trendline',
                algorithm: 'SMA',
                periods: 15
            }]

If you are familiar with SMA technical indicators, you can check out this link for more information- http://jsfiddle.net/laff/WaEBc/

The reference sets the period value to 15. I just need a way to alert this value. Thank you in advance!

javascripthighchartsindicator

Answer №1

To add a click event to a series in Highcharts, you can directly set it in the series options like this:

        series : [{
            name: 'AAPL Stock Price',
            type : 'line',
            id: 'primary',
            data : data
        }, {
            name: '15-day SMA',
            linkedTo: 'primary',
            showInLegend: true,
            type: 'trendline',
            algorithm: 'SMA',
            periods: 15,
            events: {
                click: function() {
                    console.log(this.options.periods);
                }
            }
        }]

Check out the live demo here: http://jsfiddle.net/WaEBc/32/

Answer №2

Experiment with adding a click handler to the plot options block as shown below:

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        var index = this.x;
                    }
                }
            }
        }
    },

Take a closer look at the debug properties available within the this object

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

Angularfire2: Access Denied Error When User Logs Out

When utilizing the following method: login() { this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) .then(() => { this.router.navigate(['']); }); } An error occurs during logout: zone.js:915 Unca ...

javascriptangularfirebasefirebase-authenticationangularfire2

Layout display issue post redirection in React

I am facing an issue with my app that utilizes styled-components and material-ui. I have set up private routes based on user roles, and when a non-authenticated user is redirected to the login page, the layout fails to load properly. App.tsx import React ...

javascriptreactjsreact-routermaterial-uireact-router-dom

Adjust the height in proportion to the width

My goal is to adjust the height of the li's based on their width using JQuery. var width = $('li').width(); $('li').css('height', width + 'px'); However, I've encountered an issue as it doesn't resu ...

javascriptjqueryhtmlcss

What is the best way to define a variable that captures and logs the values from multiple input variables?

Hey there, I'm a new coder working on a shopping list app. I'm trying to display the input from three fields - "item", "store", and "date" - at the bottom of the page as a single line item. I attempted to do this by creating a variable called "t ...

javascripthtmlarraysfunctionobject

AngularJS ng-include nested form configuration

My application utilizes nested ng-includes. The outer include is a login screen for one application while the inner ng-include includes two templates. The login screen is designed in two steps where the email is checked first and then the password entered. ...

javascriptangularjsangularjs-ng-include

The inline style in Angular 2 is not functioning as expected when set dynamically

Having a small dilemma... I'm trying to apply an inline style within a div like this: div style="background: url(..{{config.general.image}})"></div Oddly enough, it was functioning in beta 16 but ever since the RC1 upgrade, it's no longer ...

javascripttypescriptangular

Issue with event delegation when using if-else conditions is not being resolved

I have set up an event listener on an HTML container, and when the user clicks on the play again button, the code inside the 'if' statement should be executed. However, nothing happens when clicking on the play again button and no logs are output ...

javascript

halt execution of npm test and erase any printed content

When I run npm test on my React project, it runs unit tests using jest and react testing library. The test logs (including console log lines added for debugging) are printed to the screen but get deleted after running the tests. It seems like the logs are ...

javascriptnpmjestjs

The Node.js callback is executed before the entire function has finished executing

const fileSystem = require('fs'); const filePath = require('path'); module.exports.getFiles = function(filepath, callback) { let files = []; fileSystem.exists(filepath, function(exists){ if(exists){ fileSy ...

javascriptnode.jsexpress

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

After successfully creating a password redirect page where entering the correct password redirects you to another URL (psswrdtest.tumblr.com with the password as correctpsswrd, redirecting to google.com*), I attempted to improve it by making the password p ...

javascriptjqueryhtmlcsspasswords

React - Unable to perform 'removeChild' on 'Node' object: The specified node cannot be removed as it is not a child of this node

I am encountering an issue in my React project with the following structure: <div className="App"> <BrowserRouter> <BasicLayout title={"test"}> <Routes> <Route path="/home&qu ...

javascriptreactjs

Looping through data in AngularJS with duplicated entries

I'm having an issue with my AngularJS ng-repeat when trying to display JSON data. The records are duplicating, but only after reloading the page. Initially, everything works fine. Take a look at the JSON data below: [{ "EmployeeName": "Jishn ...

javascriptangularjsjson

What is the best way to submit form data along with an image using Angular?

Recently, I built an application where users can submit form data along with an uploaded image. Since I am new to Angular, I am facing some challenges in merging the user-submitted data model and the image upload using the FormData method. Can anyone guide ...

javascriptangularangularjs

A guide on testing mouse clientY in React using JEST for effective testing

useEffect(() => { const mouseHandler = (event: MouseEvent) => { menuData.forEach((element) => { if (element.hasActiveDropdown && event.clientY > 50) { handleCloseDropDown(); // handleDropDown('0') ...

javascriptreactjsjestjsreact-testing-library

Begin the jQuery ResponsiveSlides Slider with the final image in the <ul> list

Currently utilizing the responsiveSlides image slider from responsiveSlides on our website. This jQuery slider uses an HTML unordered list of images to slide through automatically. The issue I'm facing is that before the slider actually starts (meani ...

javascriptjqueryhtmlcss

Is there a way to invoke a C# method upon completion of the callback function in ScriptManager.RegisterStartupScript?

I am currently developing JavaScript methods that will be called from C# code. Once the JS methods are complete, I need to include C# code to send an email. Can anyone provide guidance on how to achieve this? ScriptManager.RegisterStartupScript(this, G ...

c#javascriptasp.netwebformscallback

Exploring the power of media query breakpoints within Chakra UI's global styles

Trying to incorporate a media query breakpoint in Chakra UI global styles has presented some challenges. An attempt was made using template literals for property names, but it was discovered that this approach is not supported: import { ChakraProvider, e ...

javascriptreactjschakra-ui

During the installation of a package, npm encountered a require stack error with the code MODULE_NOT_FOUND

Whenever I attempt to install something using the npm install command, it throws an error saying "require stack" and "code MODULE_NOT_FOUND" C:\Users\dell>npm audit fix node:internal/modules/cjs/loader:1075 const err = new Error(message); ...

javascriptnode.jsnpmerror-handling

After sending a GET request in AngularJS, simply scroll down to the bottom of the

Usually, I use something like this: $scope.scrollDown = function(){ $location.hash('bottom'); $anchorScroll(); } While this method works fine in most cases, I've encountered an issue when fetching data for an ng-repeat and trying t ...

javascriptangularjs

Tips for restoring lost data from localStorage after leaving the browser where only one data remains

After deleting all bookmark data from localStorage and closing my website tab or Chrome, I am puzzled as to why there is still one remaining data entry when I revisit the site, which happens to be the most recently deleted data. This is the code snippet I ...

javascriptreactjsnext.js