Incorrect label displayed for quarter of the year

[Ravneet03]

Hi Team,
I am trying to display a chart with label on X axis as Quarters of the year.
https://jsfiddle.net/QwZuf/753/
IN this the Q4’15 ends at 1Dec2015 instead it should end at 31Dec2015, similarly 1March16 and 31March16 should fall in Q1 16 but they fall in Q2’16.

Please advise what can be done to resolve it.

Thanks,
Ravneet

[Indranil]

@ravneet03,

You can use this workaround to generate axisLabels using stripLine.

__________
Indranil Deo,
Team CanvasJS

[Ravneet03]

Thanks Indranil. But there is a slight problem, my actual code does not contain axis array in the chart variable. It is something like this, chart.options.axisX . Inside the axisX there is stripLines array but I am not able to add in that array with the code you gave.

If I try to do this: chart.options.axisX.stripLines[0] it creates another array inside stripLines array and hence I am not able to access its value using e.value.

Also chart.options.axisX.addTo(“stripLines”,{..}); gives an error “addTo is not a function”.

What can be done? Please suggest. Let me know if more information is required.

Thanks

[Ravneet03]

Never mind. It is working now!
Thanks

[Ravneet03]

Hi,

I am trying to remove stripLine using remove() method, but it is not working. My canvasjs version is 1.8.0. Is it due to the old version?

Thanks

[Indranil]

@ravneet03,

Methods and Properties were introduced in v1.9.6, kindly refer this blog post for more info. Also please download latest version from our download page to use the latest features.

__________
Indranil Deo,
Team CanvasJS

• This reply was modified 6 years, 6 months ago by Indranil.

[Ravneet03]

Team,
Any update on permanent solution for this. I have used the workaround but the client using the application wants Quarter label to be displayed at the end of Quarter itself rather than repeating it for each month. Please update.

Thanks,
Ravneet Singh

[Indranil]

@ravneet03,

This feature is not available as of now. Please take a look at this updated jsfiddle to display the label at the end of the Quarter.

___________
Indranil Deo,
Team CanvasJS

• This reply was modified 6 years, 6 months ago by Indranil.

[Ravneet03]

Hi,
I am using older version of CanvasJS which does not support addTo() method result being the old values are replaced in stripLines everytime I update it. As a result there is only one stripLine visible at the execution of code.
I am adding stripLines like below
chart.options.axisX.stripLines = [{...}];

From what it looks like striplines are an array, so when I try update it like below.
chart.options.axisX.stripLines[j] = [{...}]
where value of j is incremented using for loop, I get an error. Uncaught TypeError: Cannot read property '0' of undefined

Please suggest an alternative of addTo method I can use.

Thanks,
Ravneet

[Vishwas R]

Ravneet,

Can you kindly create jsfiddle along with sample data, so that we can understand your scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Ravneet03]

Given below is what my understanding is of the problem
1. stripLines is an array.
2. As per solution jsfiddle given by you guys. Everytime the addTO(“stripLines”,{}); method is called (using for loop) new values are added to the new index location. eg.
addTO("stripLines",{Q3 17}); //added to index 0
addTo("stripines", {value: Q4 17}); //added to index 1 .. and so on
3. Now I am using the older version of canvasJS and addTo method is not available and the way my code is written the value to stripLines is added as below.
chart.options.axisX.stripLines = [{..}]
Everytime the for loop is executed value at stripLines[0] i.e. index 0 is getting overwritten
e.g.
chart.options.axisX.stripLines = [{Q317}] //index 0
chart.options.axisX.stripLines = [{Q4 17}] //index 0
As a result I get only one stripLine in my chart at the end of for loop.

So Now I need a way that new values are written to new index everytime for loop is called.

so I tried this

var j= 0;
for( var i = minimum; i < maximum; i+= interval){
        value = new Date( i - (24 * 60 * 60 * 1000)).setHours(0, 0, 0, 0);
        interval = (getDaysInMonth(new Date(i).getMonth(), new Date(i).getFullYear())) * 24 * 60 * 60 * 1000;

        chart.options.axisX.stripLines[j]= [{
              value: value,
              label: value,
              labelPlacement: "outside",
              color: "#a3a3a3",              
              labelBackgroundColor: "transparent",
              labelFontColor: "#a3a3a3",
              labelFormatter: function (e) {
                var count = (new Date(e.stripLine.value).getMonth()/3 << 0) + 1;
                return "Q" + count + " " + CanvasJS.formatDate(e.stripLine.value, "YY");
              }
 }];
j++;
}

But this is not working and stripLines are not displayed. JSfiddle for the same

[Vishwas R]

Ravneet,

Rendering chart after updating chart-options should work fine in your case. Please check this updated jsfiddle for adding stripLines by updating chart-options and without using addTo method.

—
Vishwas R
Team CanvasJS

[Ravneet03]

Thanks. It worked.

[Ravneet03]

Hi,

There is one more issue. IN the above solution, the values for quarters are displayed right to left i.e. Q4’16 to Q1’17 contains value of Quarter1 17 i.e. Jan, Feb and March. but value for months are displayed left to right i.e. Jan to Feb displays value of January month 1st Jan…31st Jan. This creates confusion. Any solution to resolve this.

Thanks

[midel1]

thanks alot