It is currently Mon Sep 24, 2018 2:51 am Advanced search

Conditional DateTime Interval in HighStock

Technical support for the Highcharts Stock package

Conditional DateTime Interval in HighStock

Postby ashishbisht » Thu Apr 12, 2018 2:43 pm

Hi,

I have to display the datetime breakdown as week,month,quarter and year. HighStock have datetimelableformat, but there is no option for quarterly. So to achieve that I am writing custom label format as below.

Code: Select all
if (this.selectedRangePeriod == 2) {      //for Quarterly
            this.chart2Data.xAxis['labels'] = {
                formatter: function () {
                        let s = "",
                            d = new Date(this.value),
                            q = Math.floor((d.getMonth() + 3) / 3);
                        s = "Q" + q + " " + d.getFullYear();
                        return s;
                    }
            }
        }
        else {
            this.chart2Data.xAxis['dateTimeLabelFormats'] = {
                week: '%e. %b',
                month: '%b \'%y',
                year: '%Y'
            }
        }


At first breakdown in monthly, there it is fine. But once I am changing to quarter, it is always showing the breakdown label in quarter. Though the points in graph is plotted correctly(i.e. as per the selected the breakdown) but label is not getting changed.

I have attached a image.In this breakdown is changed to monthly,even on tooltip its fine.Here x-axis labels should display month name but it is still showing quarter.
timeInterval Issue.PNG
timeInterval Issue.PNG (12.44 KiB) Viewed 175 times

Is there any better way to achieve this.Please suggest.
Ashish
ashishbisht
 
Posts: 7
Joined: Fri Mar 23, 2018 11:15 am

Re: Conditional DateTime Interval in HighStock

Postby daniel_s » Thu Apr 12, 2018 6:16 pm

hi ashishbisht,

Could you explain me more precisely what do you want to achieve? I cannot deduce it from the image and description you attached. Maybe could you provide me with minimal working copy (e.g JSFiddle, URL, files) of your project? It should be a big convenience for me.

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

Re: Conditional DateTime Interval in HighStock

Postby ashishbisht » Fri Apr 13, 2018 8:25 am

Hi Daniel,

Sorry, I can't share the file with you.

Actually the scenario is I have two button for changing the breakdown of x-axis from monthly(JAN,FEB,MAR) to quarterly(Q1 2017, Q2 2017,Q3 2017) in highstock. For monthly, I am doing by using the datetimelabelformatter. But for quarterly I am writting a callback in x-axis.label.formatter.

Now the problem is once I am changing the breakdown from quarterly to monthly, Graph is gettng plotted monthly but the y-axis label are still showing Q1 2017, Q2 2027... Labels should also get changed to Monthly like Jan, Feb, Mar.

Regards,
Ashish
Ashish
ashishbisht
 
Posts: 7
Joined: Fri Mar 23, 2018 11:15 am

Re: Conditional DateTime Interval in HighStock

Postby daniel_s » Fri Apr 13, 2018 9:32 am

hi ashishbisht,

I suspect that is caused by xAxis.labels.formatter, namely you set the formatter when change the breakdown from monthly to quarterly, but never set it back to the previous form, so I think solution is to set back the formatter to appropriate state by updating the chart on click event of 'monthly' button. Please take a look at code and example below:
Code: Select all
monthlyButton.onclick = function() {
    chart.update({
        xAxis: {
            formatter: function() {
                return Highcharts.dateFormat(this.dateTimeLabelFormat, this.value)
            }
        }
    })
}


Live example: http://jsfiddle.net/BlackLabel/8m0m07s4/

API Reference:
https://api.highcharts.com/class-reference/Highcharts#dateFormat
https://api.highcharts.com/class-reference/Highcharts.Chart#update

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

Re: Conditional DateTime Interval in HighStock

Postby ashishbisht » Mon Apr 16, 2018 6:10 am

Hi Daniel,

Actually I am working with a angular 2-highchart. There I don't have the chart instance. To get that I am calling a method on load. i.e.
Code: Select all
<chart type="StockChart" [options]="chart2Data" (load)="saveChart2Instance($event.context)"></chart>

And storing it like this.
Code: Select all
 saveChart2Instance(chart2Instance) {
        this.chart2 = chart2Instance;
    }


Finally I wrote a method to update the label formatter.
Code: Select all
 updateChartAxisLabelFormat(chart) {
        if (this.filterService.selectedRangePeriod != 2) {
            chart.update({
                xAxis: {
                    formatter: function () {
                        return Highcharts.dateFormat(this.dateTimeLabelFormat, this.value)
                    }
                }
            })
        }
        else {
            chart.update({
                credits: {
                    enabled: true
                },
                xAxis: {
                    formatter: function () {
                        let s = "",
                            d = new Date(this.value),
                            q = Math.floor((d.getMonth() + 3) / 3);
                        s = "Q" + q + " " + d.getFullYear();
                        return s;
                    }
                }
            })
        }
    }


But on calling this method nothing is getting changed.Please suggest what I am doing wrong.


Along with this, I am facing couple of more issue with the angular 2 highchart wrapper.
1. Not able to show loading while chart is getting loaded. showloading method not working.
2. Not able to show no data. I tried passing nodata from chart option, but it didn't work.
Ashish
ashishbisht
 
Posts: 7
Joined: Fri Mar 23, 2018 11:15 am

Re: Conditional DateTime Interval in HighStock

Postby ashishbisht » Mon Apr 16, 2018 9:01 am

HI,

I fixed it. It was because of some silly mistake I did while giving format.
Ashish
ashishbisht
 
Posts: 7
Joined: Fri Mar 23, 2018 11:15 am


Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 0 guests

cron