Question

I am using highcharts to graph multilple series (several lines with multiple points each on one chart). The user selects one or more points on multiple lines. Data about the selected points is shown in a gridview on my asp page. After some server side logic I would like to redraw the page and put an image, marker, flag or some other way of showing the user the redrawn graph with those points “marked”.

I have been playing with jquery to add an image (small circle) to the div where the chart is rendered but not having much luck with the X/Y position of the image within the div.

Any advice or examples on how I might do this? Not married to image in DIV other suggestions appreciated.

Answer 1

I figured it out. I made a function that is called when the point is clicked passing the whole point object. An if statement toggles the marker of the ponit and using the acumulate = true it shows all the points on my curve that have been selected. Likewise if it is already selected it toggles the marker off. Much easier than what I was trying.

Here is my function to toggle point and make them all seleted

        function ChartClicked(oPointObject) {            
            if (oPointObject.selected) {
                oPointObject.select(false, true);                
            }
            else {
                oPointObject.select(true, true);                
            }            
         }

Here is a snipet of my graph. It is in the plotOptions I call the click event

plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {

                            ChartClicked(this);
                        }
                    }
                }
            }
        },

Hope this helps someone else.