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

Utilizing child component HTTP responses within a parent component in Angular: a comprehensive guide

As a newcomer to Angular, I find myself struggling with http requests in my application. The issue arises when I have component A responsible for retrieving a list of IDs that need to be accessed by multiple other components. In component B, I attempted t ...

javascriptajaxangulartypescript

What is preventing the control from being passed back from the PHP file to the AJAX success function?

My website is built using PHP, Javascript, and AJAX. Below is the essential code snippet: JS code (AJAX function): $("#btn_add_event").click(function(){ var strSeriaze = $( "#formAddEvent" ).serialize(); url = $( "#formAddEvent" ).attr('act ...

javascriptphpjqueryajaxajaxsubmit

Guide to Inputting Numbers in a Form Field using a Pop-up Keypad (with Javascript/AJAX)

I am working on a small project that involves creating a keypad with buttons for all the digits, backspace, and decimal. When these buttons are clicked, they should populate a form field like a text box. The keypad will be located next to the form field as ...

javascriptajaxkeyboardformfield

Encountering a mongoose error when attempting to use the push()

var mongoose = require('mongoose'), Schema = mongoose.Schema, ObjectId = Schema.ObjectId; var SongSchema = new Schema({ name: {type: String, default: 'songname'}, link: {type: String, default: './data/train.mp3&a ...

javascriptmongodbexpressmongoosenosql

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

javascriptjqueryhtmlcsscookies

The Angular TypeScript service encounters an undefined issue

Here is an example of my Angular TypeScript Interceptor: export module httpMock_interceptor { export class Interceptor { static $inject: string[] = ['$q']; constructor(public $q: ng.IQService) {} public request(config: any) ...

javascriptangularjstypescript

How to use getBoundingClientRect in React Odometer with React Visibility Sensor?

I need help troubleshooting an error I'm encountering while trying to implement react-odometer js with react-visibility-sensor in next js. Can anyone provide guidance on how to resolve this issue? Here is the code snippet causing the problem: https:/ ...

javascriptreactjsnext.jsfrontendodometer

What are some ways to prevent sorting and dragging of an element within ul lists?

A list styled with bullets contains various items. It is important that the last item in the list remains in a fixed position. I attempted to disable sorting using the cancel option of the .sortable() method, but it only prevented dragging without disablin ...

javascriptjqueryjquery-ui

Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

I'm currently facing an issue with my code snippet below: getInformations().subscribe( informations => { let subs = []; for (const information of informations) { subs.push(getOtherDetails(information.id)); } ...

javascriptangulartypescriptrxjsfork-join

Using JavaScript, include a child class into a parent class

I am facing an issue with my class hierarchy, which includes classes like Parent, Child1 (which extends Parent), and Child2. Parent contains an array of child items, but importing Child1 and Child2 into Parent leads to circular dependencies and errors whe ...

javascript

Group HTML Tables According to Specific Attributes

Let's cut to the chase. My table is functioning well, printing all the necessary information without any issues. However, I'm facing a challenge when it comes to grouping the data rows under Program 1 together. Instead of having Program 1 print, ...

javascripthtmljqueryajax

Toggle between bold and original font styles with Javascript buttons

I am looking to create a button that toggles the text in a text area between bold and its previous state. This button should be able to switch back and forth with one click. function toggleTextBold() { var isBold = false; if (isBold) { // Code t ...

javascripthtmlcss

Implementing user-driven filtering in a React table

When a user clicks on the submit button, data will be loaded. If no filter is applied, all data will be displayed. const submit = async (e: SyntheticEvent) => { e.preventDefault(); const param = { ...(certificateNo && ...

javascripthtmlreactjsapireact-hooks

Attempting to send arguments to a jQuery ajax request

After successfully implementing my original ajax call, I decided to create a reusable function for it. This way, I can easily modify the data and URL fields of the ajax call without having to retype everything each time. However, I encountered an issue whe ...

javascriptjqueryajaxfunctionparameters

Tips for retaining focus on the same control following an asynchronous postback

I am experiencing an issue with my 3 textboxes, where one is placed in an update panel that refreshes every 4 seconds. Unfortunately, during the refresh process, the focus on controls outside of the update panel is being lost. I need a solution to maintain ...

c#javascriptjqueryasp.netajax

Is it possible to ensure only one value is set as true in useReducer without manually setting the rest to false

I am seeking a more efficient method to ensure that only one value is set to true while setting the rest to false I came across this Python question and answer recommending an enum (I am not very familiar with that concept) Currently, I have the followin ...

javascriptreactjsreduxreact-hooksuse-reducer

Creating intricate structures using TypeScript recursively

When working with Angular and TypeScript, we have the power of generics and Compile-goodness to ensure type-safety. However, when using services like HTTP-Service, we only receive parsed JSON instead of specific objects. Below are some generic methods that ...

javascriptjsontypescriptgenerics

Issue experienced with Vue2 where utilizing a computed property to filter a nested v-for structure

I have a unique HTML challenge that requires me to iterate through an unconventional data setup. The information is retrieved in two separate parts from Firebase: one for categories and another for businesses. The structure of the data is as follows: Busi ...

javascriptvue.jsvuejs2

Delaying consecutive calls to query on mouse enter event in React

Currently, I have a React component from antd that utilizes the onMouseEnter prop to make an API query. The issue arises when users hover over the component multiple times in quick succession, which floods the network with unnecessary API calls. To prevent ...

javascriptreactjs

Alter the Color of the 'div' According to the Background

At the bottom right of my website, there is a black chatbot icon. The web footer also has a black background. To create a clear contrast, I have decided to change the color of the chatbot to white as users scroll to the bottom of the page. I implemented t ...

javascriptcssangularsassfrontend