Customising Stock Chart

[rowan.bradley]

I have finally managed to create a jsFiddle account that lets me log in. My latest attempt at the graph that I'm aiming for is at https://jsfiddle.net/rowanbradley/x6frun1j/ .
Questions still outstanding from this are:
1. How do I get the date picker to work for the From and To date boxes?
2. How do I get the legend to display?
3. How do I modify the JS to use my new JSON file, in which I have tried to reduce the amount of processing that needs to be done in JS? The new JSON data is at https://sylvesterbradley.org/swchoir/da ... event.json .
4. How do I get the three radio buttons at the bottom of the chart to work? The intention is that clicking one of these will cause the points to be filtered and the graph redisplayed with only the points that got through the filter.

I have not yet got the pop-up onclick box to display what I want, but I am still working on this.

Many thanks for your help - Rowan

[bastss]

Hi Rowan!
1. The easiest way to get date picker is to get it from jQuery library, like in the example which I've sent you before. It is recommended not to mix pure JavaScript and jQuery - if you want have something from jQuery, write whole code in jQuery. More information about jQuery library you can find on their website.
2. You had a problem with legend, because in your code legend is defined twice. The second one without disabled attribute was loaded.
3. This question is not related with Highcharts, but with JavaScript.
4. This question is very common. I just googled it and found whole solution:
https://stackoverflow.com/questions/888 ... the-legend

Your code rewrite to jQuery with date picker and legend:
http://jsfiddle.net/Bastss/217vLocz/

Best regards!

[rowan.bradley]

1. The easiest way to get date picker is to get it from jQuery library, like in the example which I've sent you before. It is recommended not to mix pure JavaScript and jQuery - if you want have something from jQuery, write whole code in jQuery. More information about jQuery library you can find on their website. Thanks for this. I think I was getting in a mess because I was using the Bootstrap datepicker elsewhere on my site, and it was calling the wrong version. I will try to incorporate this into the graph.
2. You had a problem with legend, because in your code legend is defined twice. The second one without disabled attribute was loaded. Thanks for pointing out this error.
3. This question is not related with Highcharts, but with JavaScript. Well, I still need to understand exactly what data structure is expected by HighCharts. That is what I'm struggling with. Where is this documented?
4. This question is very common. I just googled it and found whole solution:
https://stackoverflow.com/questions/888 ... the-legend Those examples are not doing quite what I want. I don't want to hide or show a whole series. I want to hide or show specific sets of points in the series. I want to show either the points with the square marker, or the ones with the circle marker, or both. I hope that the functions that I have written create the right array of points for each of these three conditions. What I'm struggling with is to get it to redraw the graph when the user selects one of the radio buttons and one of these functions runs.

One more issue - the legend now shows 4 different symbols on the four lines (circle, diamond, square, triangle). I am only using two of these symbols, and not to distinguish between the lines (it is just colour that distinguishes between the lines. How do I get the legend to show with say circle on all four lines?

Thanks again for all your help with this. It's been a bit of a learning curve, but I'm nearly there now.

Rowan

[bastss]

Rowan,
3. There is whole Highcharts documentation about data, which I hope help you to better understand Highcharts.
https://www.highcharts.com/docs/working ... data-intro
4. Check this example. Data is builded similar to your's. In place id you can set marker symbol.
http://jsfiddle.net/Bastss/2rjLnqyd/1/

Best regards

[rowan.bradley]

I have been making progress, but some recent change has broken my graph, and after a couple of days banging my head against it, I can't find what I've done wrong. Here is a jsFiddle: https://jsfiddle.net/rowanbradley/mrn25seu/. I have an earlier version (using a different format of JSON file) that works, but this one just gives a blank screen. I would be most grateful if someone could just put their finger on what I've done that has broken this.

Thanks - Rowan

[rowan.bradley]

Don't worry about the previous post. I seem to have resolved the problem by carefully comparing the structure of what I had with working examples that you have provided earlier in this thread. That at least is now sorted,

Thanks - Rowan

[rowan.bradley]

Another question: if I want to pop up an element on the web page when the user clicks a point on the graph, and I want the element to appear at a position relative to the point (e.g. with the middle of its bottom edge 20 pixels above the point), what properties of the event or the point do I use to determine where the new element should be drawn?

Thanks - Rowan

[bastss]

Hello Rowan,

Do you know dataLabels property in Highcharts? This property has access to points positions and makes enable to draw element wherever you want by set properly features. More information: https://api.highcharts.com/highstock/pl ... dataLabels
And example with click event to show and hide dataLabels: http://jsfiddle.net/BlackLabel/b7dao2ns/

Back to your question. It is possible to get access to determine point position by renderer function - API: https://api.highcharts.com/class-refere ... erer#label ,but this solution required a lot of work.

Best regards!

[rowan.bradley]

Thanks for your reply. It had not occurred to me that labels would do what I want. I don't want to display the labels all the time, just when the user clicks a point, and then only for the point clicked. And the value that I want displayed is not the Y value of the curve at this point, it is different properties of the point (which I have added purely for this purpose), and probably with some local processing. I have already generated some HTML and JS to display the box that I want to display, I just need the X, Y coordinates at which to display it (relative to the body, or to the div containing the graph). I can see several properties which look like X,Y values, but I don't know what each of them means, and what they are measured relative to, and what are the units. I can't believe that this is difficult. Apart from anything else, this must be how tooltips work, isn't it? How does it know where to display the tooltip?

Thanks - Rowan

[bastss]

Rowan,

Inside dataLabel you can display whatever you want, not only the y value. It's the easiest and recommended by Highcharts solution to display something anchor to the particular point. Check this example:http://jsfiddle.net/Bastss/1e9y7van/
API: https://api.highcharts.com/highcharts/p ... .formatter

Answer to question how to find every points positions you can find here: https://forum.highcharts.com/post143635 ... 99#p143635

Kind regards!

[rowan.bradley]

Inside dataLabel you can display whatever you want, not only the y value. It's the easiest and recommended by Highcharts solution to display something anchor to the particular point. Check this example:http://jsfiddle.net/Bastss/1e9y7van/

This example uses HTML text to display the required element. I have up until now been trying to build the element that I want to display as a section of the DOM tree. Is it possible using dataLabel to create an element in the DOM and then display it (in the right place) by saying info_box.style.display = 'table'; (where info_box is the element (in this case a div) that I have just created). The element was previously display: none.

Thanks - Rowan

[rafalS]

Hello, Rowan.

From what I have noticed, you are trying to implement a label (pop up) (with point's info inside) that is displayed when the user clicks on the specific point, am I right? That label would be displayed close at this specific point on the chart's plot area, yes? And you are looking for coordinates of a clicked point?

Kind regards!

[rowan.bradley]

From what I have noticed, you are trying to implement a label (pop up) (with point's info inside) that is displayed when the user clicks on the specific point, am I right? That label would be displayed close at this specific point on the chart's plot area, yes? And you are looking for coordinates of a clicked point?

Yes, that is more or less what I'm trying to do. When the user clicks a point, I will calculate some information that I want to display, and display it in a div that should appear very close to the point that was clicked. So I need to know the X,Y coordinates of the point that was clicked. As I tried to explain, I have built the div that I want to display as a section of the DOM tree (this code is already working). I just need to know the position so I can set the top and left properties of the div before displaying it.

Many thanks - Rowan

[rowan.bradley]

Here's an example of what I want to pop up when a user clicks a point: https://jsfiddle.net/rowanbradley/z7y1sug3/
The contents of the Date, Name, Part fields and the list of names will be calculated depending on which point was clicked.
My current plan is to put a dummy copy of this into the HTML of the web age, with display: none, to clone it to the real element (info_box) and to change this to display: table by JS when I've finished updating all the fields.

Thanks - Rowan

[rafalS]

Rowan,

In that case, I agree with @bastss - the best way to achieve this is to return dataLabels from formatter() function with useHTML: true property. I recommend it as a Highcharts Developer and I am not able to try and test your approach because I do not have a whole of your code I can work on.

Now I am going to explain you, why I believe that our approach is the best:

1) It is easy to implement and we have already prepared a simplified demos for you in at least a few examples above including other topics. You can find even more examples on this forum, Stack Overflow forum or on the different websites because it is a really popular issue.

2) dataLabels have direct access to the point's information and you can display in dataLabels whatever you want - we have shown you a few examples above and in other topics.

3) dataLabels have direct access to the point's coordinates and you don't have to worry about their positions. Additionally, dataLabels correct their positions on every window redraw and are fully responsive. Also, you can simply move them relatively to the point using dataLabels.x and dataLabels.y properties.

I could find more arguments but I believe it is enough to convince you at least to try to implement our approach.

However, if you really want to stick at your approach and you want to find the point's (x,y) coordinates... @bastss has already answered your question and gave you this jsFiddle: http://jsfiddle.net/Bastss/1e9y7van/
I have prepared another one for you: https://jsfiddle.net/BlackLabel/keq36wy7/
You are looking for point.plotX and point.plotY properties. Also, you might want to read about chart.plotLeft and chart.plotTop properties in main chart object.

One more time I will redirect you to API - you will find really useful information in there:
https://api.highcharts.com/highcharts/p ... dataLabels
https://api.highcharts.com/highcharts/p ... .formatter
https://api.highcharts.com/highcharts/p ... ls.useHTML
https://api.highcharts.com/highcharts/p ... int.events

If you still have problems with your project, I can give you one more time contact details to Black Label company that specializes in custom Highcharts projects:
http://www.blacklabel.pl
[email protected]

Kind regards!