tep
Posts: 2
Joined: Mon Sep 13, 2021 5:52 am

Chart with dynamically linked data

Dear Highchart Support Team,
I am setting up a website for our client using Wordpress and Highchart for the graphs.
I have so far arrived at this stage, see https://pointpleasure.com.au/charttest1/
The news is currently set up as a fixed database table form but the client wants the news to be dynamic (in sync) with the chart.
For example, if the mouse moves over 21 June 2018, the news for that day will appear.
If you have a look at the news, it ranges from one line to as many as five line items.
With the main graph, I am pulling the data out of a single csv file. See photo
csvfile.jpg
csvfile.jpg (60.32 KiB) Viewed 811 times
We hope you can help or suggest the best way to achieve this feature.
Thank you
Regards, Brian Gatenby
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Chart with dynamically linked data

Hello tep,

Welcome to our forum and thanks for contacting us with your question!

Could you provide me with more detailed description about your expected results? What do you mean by saying that news should be dynamic and in sync with the chart? To display data on mouse over for specific day the tooltip should be used, but you do it already.

Thanks for clarification in advance.
Best regards!
Mateusz Bernacik
Highcharts Developer
ugo.castelli21
Posts: 1
Joined: Tue Oct 05, 2021 7:41 am
Location: Pavia, Italy
Contact: Website

Re: Chart with dynamically linked data

tep wrote: Tue Oct 05, 2021 5:49 am Dear Highchart Support Team,
I am setting up a website for our client using Wordpress and Highchart for the graphs.
I have so far arrived at this stage, see https://pointpleasure.com.au/charttest1/
The news is currently set up as a fixed database table form but the client wants the news to be dynamic (in sync) with the chart.
For example, if the mouse moves over 21 June 2018, the news for that day will appear.
If you have a look at the news, it ranges from one line to as many as five line items.
With the main graph, I am pulling the data out of a single csv file. See photo
dermatologo.jpg
We hope you can help or suggest the best way to achieve this feature.
Thank you
Regards, Brian Gatenby
Hi Brian and mateusz.b,
I think Brian is trying to ged interaction between the "time period" actually visible in the chart and the "news" section below, once you change visible period in the chart, data from that timeframe will be shown in news section.

It could be great feature to load news dynamically altogether with a chart, I may implement this feature in the stock market project I manage since it is in development phase, waiting for updates from forum support regarding your issue 8) 8) 8)
Use highcharts for content and blog pubblications of researches
tep
Posts: 2
Joined: Mon Sep 13, 2021 5:52 am

Re: Chart with dynamically linked data

Hi Mateusz.b,
Thank you for getting back to me so quickly.
I need to be able to display extra column data, the news (from my csv file) below the chart.
This news will not appear in the tooltip only below the chart. See csvdata.jpg.

The relevant days news will need to appear when the mouse is over a particular date on the chart.
For example, if I mouse over Aug 13, I should see:
Tooltip showing chart information, AND the news for that day under the chart in the table. See news1.jpg.

If I move the mouse over the next date, say Sep 24, 2018, the news for that day will appear. See news2.jpg

I hope this explanation is clearer.

Regards, Brian
Attachments
news2.JPG
news2.JPG (109.32 KiB) Viewed 780 times
news1.JPG
news1.JPG (47.56 KiB) Viewed 780 times
csvdata.JPG
csvdata.JPG (172.89 KiB) Viewed 780 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Chart with dynamically linked data

Hello ugo.castelli21,

Welcome to our forum and thanks for sharing your thoughts!

Something like you have described is possible and the implementation shouldn't be too hard.

To show data in section below on chart load you could use load event.
API reference: https://api.highcharts.com/highcharts/chart.events.load

To change that data depending on selected date range you could use after afterSetExtremes event.
API reference: https://api.highcharts.com/highcharts/x ... etExtremes

You can also use mouseOver event or tooltip.formatter to show below data related to currently hovered point.
API reference:https://api.highcharts.com/highcharts/tooltip.formatter

The logic for updating your component you need to code on your own, but each of the mentioned events will work in this case and getting only visible points should be rather easy too.

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Chart with dynamically linked data

Brian,

Thanks for that explanation, everything is clear now.

I can see two solutions here. First one would be to create additional news property on each point where you would write related CSV News value. Then you should use tooltip.formatter to code logic showing that additional info below your chart.

Second option that I can think of is to use tooltip.formatter too, and create callback function which would search the CSV file for related to point News (for example by comparing date) and show that news message.
API reference: https://api.highcharts.com/highcharts/tooltip.formatter

Let me know what do you think about these suggestions.
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”