CODEWITHSUNDEEP
javascriptjquerychartsshieldui
Prasadika
Prasadika

Reputation: 927

jQuery to customize TicksRepeat of X axis in Sheild UI

I have the following code segment in sheild UI.

<Axes>
    <shield:ChartAxisY>
        <Title Text="Portfolio Value($)"></Title>
    </shield:ChartAxisY>
    <shield:ChartAxisX TicksRepeat="10" CategoricalValues=""> 
        <Title Text="Portfolio Date"></Title>    
        <AxisTickText></AxisTickText>                   
    </shield:ChartAxisX>
</Axes>

What I want is TicksRepeat to be customized. For example, I have two date values, from date and to date. if the difference is one year, TicksRepeat should be 12, i.e in months. If the difference is one month, then the TicksRepeat should be in days. etc.

Will jQuery do the trick ? I am new to jQuery. Can someone please help to achieve this ?

Upvotes: 1

Views: 48

Answers (1)

Prabodh M
Prabodh M

Reputation: 2252

You can use the Chart API to refresh your chart using the ticksRepeat option with Javascript. Just select the target Chart element to execute the API methods. Below is the code to achieve the functionality you needed.

var chart = $('#chart').swidget(); // your target sheild chart selector

var tickRepeat; // to store the tick repeat value

// Your if condition to check the date difference 
// Based on the diffrence set the value of `tickRepeat`
if(<your-year-conditions>){
 tickRepeat = 12;
}else{
 tickRepeat = <your-days-value>; // replace with your days diff
}

// Call the refresh method on the Chart Object to rerender the chart
// With your new tickRepeat on X Axis as below.
chart.refresh({axisX: {ticksRepeat: tickRepeat }});

You can checkout the detailed chart API Documentation as well for other configurable options.

Hope this helps!

Upvotes: 1

Related Questions