Home forums Using CanvasJS Incorrect label displayed for quarter of the year

This topic contains 18 replies, has 4 voices, and was last updated by  Vishwas R 5 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #16096

    Ravneet03
    Member

    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

    #16105

    Indranil Deo
    Member

    @ravneet03,

    You can use this workaround to generate axisLabels using stripLine.

    __________
    Indranil Deo,
    Team CanvasJS

    #16153

    Ravneet03
    Member

    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

    #16154

    Ravneet03
    Member

    Never mind. It is working now!
    Thanks

    #16157

    Ravneet03
    Member

    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

    #17214

    Indranil Deo
    Member

    @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 9 months, 2 weeks ago by  Indranil Deo.
    #17326

    Ravneet03
    Member

    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

    #17349

    Indranil Deo
    Member

    @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

    #19208

    Ravneet03
    Member

    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

    #19210

    Vishwas R
    Keymaster

    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

    #19213

    Ravneet03
    Member

    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

    #19216

    Vishwas R
    Keymaster

    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

    #19312

    Ravneet03
    Member

    Thanks. It worked.

    #19393

    Ravneet03
    Member

    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

    #19394

    midel1
    Member

    thanks alot

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.