Customising Stock Chart

[rowan.bradley]

I'm still struggling with this.

Here is what I need:
4 lines, each potted against datetime.
Each line will be in a different colour.
Each point on the line will be shown by a symbol representing an event.
The symbol will be either a circle or a square, depending on a 'type' propery of the event.
When the mouse hovers over an event symbol, a tooltip will show giving some information, such as:
22-Sep-18
Parish Eucharist
7 sopranos

The number (7 in this case) is the number whose value is plotted on the Y axis.
The cateogry (Sopranos in this case) depends on which line is clicked on (the 4 lines are Sopranos, Altos, Tenors, Basses).

So far I have created JSON data that you can see here http://sylvesterbradley.org/swchoir/dat ... event.json. I have not yet succeeded in getting this to plot in a stock chart.

Ideally I would like that when a point is clicked upon (not just hovered over) then an information box pops up giving the name and some other details of the 7 sopranos (in this exmaple).

Various questions arise:
1. What format does the JSON data need to be in to create this graph? How do I include the data for 4 lines into the JSON file?
2. How do I provide the information about the type of event (i.e. whether it needs to be shown with a circle or a square symbol)?
3. How do I provide the information for the tooltips, e.g the date, the name of the event etc.?
4. How do I get the format of the tooltip as I want it? What control do I have over this?
5. How do I provide the information for the popup box that appears when the user clicks on an event (i.e. the list of people etc.)
6. How do I get the X-axis labelled with the dates of the events?
7. How do I control whether the dates are used as the X-coordinate of the points, or whether the points are just evenly spaced on the X-axis? The latter might make it easier for users to select an individual event when there is more than one event on the same day.

I hope you can give me some advice on these issues.

Thanks - Rowan

[bastss]

Hi Rowan,

First you should rewrite your JSON data in a following way:

https://jsfiddle.net/Bastss/g3cz5at2/

In this example symbol property is written before date, because I assumed that whole series will have the same symbol. If you want to have different symbol for each point, you need to write this symbol property inside particular point.

Then, you need to add eventName property into every point which will keep an event's info inside (the one you want to display in tooltip like Parish Eucharist from your example).

When I get correct JSON, I will prepare Chart for you.

Best regards,

[rowan.bradley]

Sebastian,

Thanks for your help. I believe that I have changed the JSON data (at the same URL as before) into the format that you suggested. Object property names are quoted, because that's what the PHP function json_encode() produces (I am constructing the data as PHP arrays and objects, and then converting them to JSON using json_encode() ). If I have got anything wrong, please explain and I can fairly easily adjust the format. And if you can provide some guidance on how to write the JS to create the graphs, that would be fantastic.

Thanks - Rowan

[bastss]

Rowan,

Thanks for providing new JSON!

1. It would be really great if you could change symbol: "circle" property to {marker: {symbol: "circle"}}. For this moment i wrote a parsing function but it would be better if JSON had proper format at the beginning.

2. I formatted the tooltip and x-axes categories as you wanted. Again, you can check for details in the jsFiddle below.

If something is unclear for you, feel free to ask

jsFiddle: https://jsfiddle.net/Bastss/rtL7fjox/

some API references:

https://api.highcharts.com/highstock/tooltip.useHTML
https://api.highcharts.com/highstock/tooltip.split
https://api.highcharts.com/highstock/tooltip.formatter
https://api.highcharts.com/highstock/xA ... els.format

Kind regards

[rowan.bradley]

When I try to run your JSfiddle, nothing happens. It's just blank. What am I doing wrong? Does it run for you?

Thanks - Rowan

[wojtek]

Hi rowan.bradley,

Your jsfiddle is probably not working due to CORS (check the console error). Download CORS plugin to your browser and enable it then your chart will be working as expected.

Kind regards.

[rowan.bradley]

I've tried adding CORS to Chrome, IE and Firefox, and in no case does your JSfiddle show a result.

I'm afraid I know next to nothing about CORS. Do I require this just for JSfiddle, or is there something about Highcharts that requires it? So will I require it to use my website once I've incorporated Highcharts in it?

Can you suggest any other reason why your code may not be working for me?

Thanks - Rowan

[bastss]

Hi Rowan,

After addition CORS plugin to your browser - have you tried to set enable cross-origin sharing on? (option available after click CORS button in your browser).

If this wouldn't help what is the error showed in your browser console?

Information what is CORS: https://en.wikipedia.org/wiki/Same-origin_policy

Best regards

[rafalS]

Rowan,

In short, CORS is a security mechanism that allows the browser to fetch data only from the origin server - for example website on your server can fetch data from the same server but website from another domain (like jsFiddle) can't. In our case, jsFiddle tries to fetch your JSON from your server, but on your server the CORS is enabled and blocks the connection.
You can always ask administrators of your server to turn the CORS off but there will be no need until you have your website on the same server as JSON.

For this moment, if you don't want to play with CORS, I can just copy your JSON data and paste it to data variable: https://jsfiddle.net/BlackLabel/dc3s9rfL/

Don't worry, everything will work fine once you fetch your JSON data from the same server that your website will be.

Kind regards

[rowan.bradley]

Thank you for your excellent help. I have now got the graph basically working. But I still have a number of questions to achieve all the features that I'm aiming for:

1. How do I change the format of the date displayed in the From and To boxes on HighStock chart from USA to European dates, i.e. from Oct 16, 2017 to 16-Oct-17.
2. How do I get a date picker to pop up when the user clicks in the From or To box?
3. How do I change the time zone used to convert timestamps to readable times? My timezone is Europe/London, and currently any time during the daylight saving time period (approx April to October) is showing 1 hour earlier than it should.
4. Currently my graph does not by default show any point symbols. When I hover over a point, then it shows me a symbol. I would like the symbols always to display on the line graph. How do I do this?
5. How do I get dates shown on the scroll bar to include a year (i.e. to show 17-Apr-2016 rather than 17 Apr)?
6. I have the symbol shape for each point defined as part of the point. Can I then define the size of the symbol just once for the series? How? Or do I have to define a size for each point (all of which will be the same)?
7. If possible I would like that when the user clicks on a point, an information box about that point pops up. This box will contain more information than the tooltip. Can I do this? How? How do I need to supply the information to be shown in this window for each point? Can I include this in my JSON data file? How?
8. So far I have not succeeded in getting the legend to display. What do I have to add to the chart JS to get it to display the legend?
9. How do I get the zoom factor to default to 1 Year? Currently it defaults to All, which in my case is not helpful.

Thanks for your help - Rowan

[bastss]

Dear Rowan,

Some answers:
1. API: https://api.highcharts.com/highstock/ra ... DateFormat
Example: http://jsfiddle.net/0cyns2ev/
2. http://jsfiddle.net/BWEm5/542/ - Here is example of datapicker.
3. The easiest way is to add 1 hour = 3 600 000 = 60 sec * 60 min * 1000 (because data in highcharts is in miliseconds) to your data on x axis.
4. API: https://api.highcharts.com/highcharts/p ... er.enabled
Example: http://jsfiddle.net/36qdcygv/
5. API: https://api.highcharts.com/highstock/na ... belFormats
6. API: https://api.highcharts.com/highcharts/p ... ker.height
7. Yes, it is possible. Here is simple example how to create it.
https://jsfiddle.net/BlackLabel/gxstpLcv/
API: https://api.highcharts.com/highcharts/p ... ents.click
API: https://api.highcharts.com/class-refere ... VGRenderer
8. API:https://api.highcharts.com/highcharts/legend.enabled
9. https://api.highcharts.com/highstock/ra ... onsEnabled
Example: http://jsfiddle.net/1gthcsy9/

Best regards!

[rowan.bradley]

Thanks for your very helpful reply. Just a few further questions:

Some answers:
1. API: https://api.highcharts.com/highstock/ra ... DateFormat
Example: http://jsfiddle.net/0cyns2ev/ I have now got the date displaying as I want it, but when I edit the date in one of the boxes, then click elsewhere in the page, the date in the box reverts to the date before I edited it. How do I get it to accept editing of the From and To dates?
2. http://jsfiddle.net/BWEm5/542/ - Here is example of datapicker. Thanks - I will work on this during the coming days.
3. The easiest way is to add 1 hour = 3 600 000 = 60 sec * 60 min * 1000 (because data in highcharts is in miliseconds) to your data on x axis. This surely will result in the time being 1 hour wrong in the winter? I need to add an hour when daylight saving is active, but not when it's not. If I understand how JS/HighCharts converts timestamps to textual representations of the time and date, then I can compensate for this as I extract the data from my database. What timezone does JS/HighCharts think I'm in for the conversion of times and dates? Does it take DST into account, or not?
4. API: https://api.highcharts.com/highcharts/p ... er.enabled
Example: http://jsfiddle.net/36qdcygv/ Thank you, I have now got the markers always displaying as I want.
5. API: https://api.highcharts.com/highstock/na ... belFormats Thank you, this is now working as I want.
6. API: https://api.highcharts.com/highcharts/p ... ker.height I have now set the height and width (I was trying to use radius before), but it makes no difference to the graph displayed. Something must be overruling the sizes I'm entering. What could this be?
7. Yes, it is possible. Here is simple example how to create it.
https://jsfiddle.net/BlackLabel/gxstpLcv/
API: https://api.highcharts.com/highcharts/p ... ents.click
API: https://api.highcharts.com/class-refere ... VGRenderer Thank you. I think I now understand how to do this. I will work on this in the coming days.
8. API:https://api.highcharts.com/highcharts/legend.enabled I have set legend.enabled to true, and also I have set showInLegend to true, but the legend still does not appear. What may be the cause of this?
9. https://api.highcharts.com/highstock/ra ... onsEnabled
Example: http://jsfiddle.net/1gthcsy9/ Thank you, this is now working as I want.

[bastss]

Rowan,

1. Have you tried set both inputDateFormat and inputEditDateFormat to requested format? Just like in this example: http://jsfiddle.net/0cyns2ev/
3. I think that you can find answers to your questions here: https://api.highcharts.com/highcharts/time
6. I assume that your project is very similar to example sent before https://jsfiddle.net/Bastss/rtL7fjox/ . Notice that inside function to create your data and set requested points symbol, marker radius is set to 6 - you can change it here.
8. Hm, interesting. Can you send me jsFiddle?

Best regards

[rowan.bradley]

1. Have you tried set both inputDateFormat and inputEditDateFormat to requested format? Just like in this example: http://jsfiddle.net/0cyns2ev/ Yes, I have them both set. I will send you a jsFiddle when I can get it to let me log in.
3. I think that you can find answers to your questions here: https://api.highcharts.com/highcharts/time Thanks - I will try to sort this.
6. I assume that your project is very similar to example sent before https://jsfiddle.net/Bastss/rtL7fjox/ . Notice that inside function to create your data and set requested points symbol, marker radius is set to 6 - you can change it here. Yes, it is very similar to your example. I was being stupid, and had forgotten that the point size was controlled here. That's why it was not changing when I tried other things. Now sorted.
8. Hm, interesting. Can you send me jsFiddle? No, it seems I can't. jsFiddle is not letting me log in, giving a 422 error "this should not have happened". I have not yet found any way to report this problem. I will keep trying.

Thanks again for your excellent help - Rowan

[bastss]

Rowan,

I can't help without online examples, so when you get to grips with jsFiddl send it.

Kind regards