It is currently Mon May 28, 2018 3:27 am Advanced search

Highstock - Display Category wise data

Technical support for the Highcharts Stock package

Highstock - Display Category wise data

Postby hardik1709 » Mon May 14, 2018 1:05 pm

Hi Team,

I am using Highstock and I want to render chart category wise as shown in below image:

Category-1.png
Desired Output
Category-1.png (14.01 KiB) Viewed 64 times


I have done research to display the category and came to know that I can achieve the same using X-Axis label formatter and I have created sample chart https://jsfiddle.net/spidercode/frLc22eo/3/.

But it doent render desire output. It displays only FY-2010 as a category. Instead of that It should display all the categories for which data has been plotted as shown in above image.

And When I click on any buttons of date-range, It is not working.

Am I missing anything ?

Please take a note that I want to enable all date-range related features.
hardik1709
 
Posts: 9
Joined: Wed Mar 21, 2018 6:34 am

Re: Highstock - Display Category wise data

Postby daniel_s » Mon May 14, 2018 7:57 pm

hi hardik1709,

It isn't possible to achieve the categories look in Highstock in simple way. You can try different configurations, but in the result you won't receive expected effect. I don't understand for what reason do you want to use full functionality of rangeSelector, if there you have data with years interval only.

The best way to show that type of data is using Highcharts category axis combined with some custom buttons by which you would be able to set expected extremes. Here is the example of how to achieve it:
https://jsfiddle.net/cmsk310L/

Bets regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 597
Joined: Fri Sep 01, 2017 1:01 pm

Re: Highstock - Display Category wise data

Postby hardik1709 » Tue May 15, 2018 7:22 am

Hey Daniel,
Thanks for the quick response.

The Fiddle you have provided uses Highchart.

And the reason for using Highstock is we are rendering financial data based on date and time and we are using many features of the Highstock chart. In one of the functionality we have to display quarter result of the companies in the same highstock chart and for that we want to display quarterly data Like FQ1-2018, FQ2-2018, FQ3-2018 ....

But along with that we also wants to filter these quarter result by date (We can use custom functionality for date range). And I am not finding any feasible solution for the same

Regards,
Hardik
hardik1709
 
Posts: 9
Joined: Wed Mar 21, 2018 6:34 am

Re: Highstock - Display Category wise data

Postby daniel_s » Tue May 15, 2018 12:27 pm

hi hardik1709,

Please take a look on the example below. I hope that solution would be more adjusted to your expectations.
I defined the tickPositions there which are based on the data object, so every time the ticks would be adjusted to your data. Also I've to notice, that Highcharts need the data will be provided in ascending order, otherwise you will definitely see the Highcharts #15 error in the console (as on your example).

If you have some questions related to my example, or you don't understand some part of it, please let me know, the I will try to explain it as precisely as I can.

API Reference:
https://api.highcharts.com/highstock/xAxis.tickPositions

Live example: https://jsfiddle.net/dsnmummn/

Best Regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 597
Joined: Fri Sep 01, 2017 1:01 pm

Re: Highstock - Display Category wise data

Postby hardik1709 » Wed May 16, 2018 11:54 am

It will not work in this case too. Consider below dataset for two different companies:

Capture.PNG
Datasource
Capture.PNG (7.94 KiB) Viewed 33 times


So as shown in above table, two different companies have different Quarters Q3-2017 and Q1-2018 for the same date. And in this case I want chart to be rendered as shown below:

Capture1.PNG
chart output
Capture1.PNG (10.92 KiB) Viewed 33 times
hardik1709
 
Posts: 9
Joined: Wed Mar 21, 2018 6:34 am

Re: Highstock - Display Category wise data

Postby daniel_s » Wed May 16, 2018 1:02 pm

hi hardik1709,

I'm a bit confused now. In the image attached above it seems that you need to categorise the point not by date but on the quarter data, so you need to parse it to the timestamp and use it as an x value instead of using [i]date[i] values.
Just look on it, there you can see that fourth point (first Company-B point with 8.40% value) which has actually 01-Jul-17 date and it is located 'after' third point which is 01-Jan-18. In fact, as you can see, it isn't agree with date time axis conception.
You need to specify more precisely what do you need to do.
As I said before, that there aren't categories in Highstock, so it would be very problematic to imitate the categories using Highstock.

Bets regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 597
Joined: Fri Sep 01, 2017 1:01 pm


Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 0 guests