We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Range Padding for String Labels on the axis

Thread ID:

Created:

Updated:

Platform:

Replies:

112501 Sep 25,2013 08:28 PM Oct 17,2013 01:40 AM JavaScript 7
loading
Tags: ejChart
Pradeep
Asked On September 25, 2013 08:28 PM

This was the initial graph that got rendered, and as you
can see the label's are in between the ticks.
https://www.dropbox.com/s/81qd2nljk7cxs73/question_4_2_range_padding.jpg

So to make the labels appear on the ticks
I added labelPlacement: 'onTicks', which causes the
graph to become this.
https://www.dropbox.com/s/e3shxybr6gujb1r/question_4_1_range_padding.jpg

As you can see the range padding at the start and end goes away.
I am able to apply range padding on the Y-Axis by using rangePadding: 'additional'.
But the same does not work on the X-Axis labels as they are string ( as opposed to being integers ). How to I simulate this behavior for string labels??


Vijayabharathi K [Syncfusion]
Replied On September 27, 2013 04:33 AM

Hi Pradeep,

 

Thanks for using Syncfusion products.

 

By default, the “RangePadding” support only for double and datetime value type axis. The category axis (String Labels on the axis) is render the label in indexed position of points. This is default behaviour of category axis.  So, we are unable to achieve the “RangePadding” behaviour for category axis.

 

Please let us know if you need any further assistance.

 

Regards,

Vijayabharathi


Pradeep
Replied On October 2, 2013 08:32 PM

Oh, thats a bummer, coz sometimes my string labels are long, and without rangePadding, placing them on ticks makes them come really close or overlap on the y axis at '0'. :-(

Vijayabharathi K [Syncfusion]
Replied On October 3, 2013 07:06 AM

Hi Pradeep,

 

We regret for the inconvenience. You can use “betweenTicks” option for "labelPlacement" property to render the series with 0.5 padding from indexed position for category axis. Also,  could you please share more information for your reported  issue(on ticks makes them come really close or overlap on the y axis at '0') or provide screenshot? Is that the long text X-axis label overlapped  with Y-Axis?

 

Regards,

Vijayabharathi


Pradeep
Replied On October 8, 2013 01:06 AM

Ok I apologize for not being clear on that.
So what really happens is that, since I cannot provide range padding
for string labels, the graph that renders, collapses along the y axis
as shown below.

Here is a bar graph, and as you can see, on either of the ends,
the graph is getting cropped. So I cannot place them on the ticks
even if i wanted to.
https://www.dropbox.com/s/clpjdvswo4j6skh/question_10_1_graph_cut.jpg

And same happens on the line graph as well. but this is even weirder,
as the line from the first overlapping point never gets drawn.
https://www.dropbox.com/s/1mk2f40negfik3x/question_10_2_graph_cut.jpg

Here are the correctly rendered graphs when label is place in between ticks
https://www.dropbox.com/s/8b20ldajv85le9x/question_10_3_graph_cut.jpg
https://www.dropbox.com/s/58o0md9ch48g0au/question_10_4_graph_cut.jpg

Hope that is clear?

Vijayabharathi K [Syncfusion]
Replied On October 10, 2013 06:59 AM

Hi Pradeep,

 

Thanks for the update.

 

We suggest you to add  empty points in series for achieve your requirements as a workaround. We have attached the sample for this workaround. In this sample, we have added empty point in first and last position of  point collection in load event and enable “hidePartialLabels” property of X-Axis to avoid ticks and labels for  these edge points. Please refer the below code snippet to achieve this,

 

[JS]

               function chartload(args){

                                                var seriesCollection=args.model.series[0].points;

                                                // Add empty point to first point in point collection

                                                seriesCollection.unshift({x:"", y: 0 , isEmpty:true});

                                                // Add empty point to last point in point collection

                                                seriesCollection.push({x:"", y: 0, isEmpty:true });

                                }

 

Also, we have planned to include  the “PlotOffset” behaviour to providing custom padding support to axis for upcoming release.

 

Please let us know, if you have any further assistance.

 

Regards,

Vijayabharathi



Padding_7a97ba36.zip

Pradeep
Replied On October 14, 2013 02:37 AM

I have 3 lines in my graph, and I use the following code in my
on chart load

// functions for chart load
function onLineChartLoad(sender) {
    sender.model.series[0].dataSource = { data: graphQRData, xName: "x", yNames: ["y"] };
    sender.model.series[1].dataSource = { data: graphNFCData, xName: "x", yNames: ["y"] };
    sender.model.series[2].dataSource = { data: graphTotalData, xName: "x", yNames: ["y"] };
}

if I try to write

sender.model.series[0].points, it shows,
that it is "undefined"

Please guide me through on how to use your code, when using a data source.
the data is in the format [{x: "label", y: value}].
Here is the full code

lineGraphContainer.find("#graph-line").ejChart(
            {
                primaryXAxis:
                {
                    //labelPlacement: 'onTicks',
                    title: { text: toTitleCase(groupValue).toUpperCase(), font: { fontFamily: 'Oswald', size: '17px', color:'#595959'}},
                    font : { size: '12px', fontFamily: 'Open Sans', color:'#333333'},
                    majorGridLines: { visible: true, color: "rgb(89,89,89)" }
                },
                primaryYAxis:
                {
                    rangePadding: 'additional',
                    title: { text: 'NO OF INTERACTIONS', font: { fontFamily: 'Oswald', size: '17px', color:'#595959'}},
                    font: { size: '12px', fontFamily: 'Open Sans', color:'#333333'}
                },
                commonSeriesOptions: {
                    type: 'line',
                    animation: true,
                    marker:
                    {
                        shape: 'circle',
                        size:
                        {
                            height: 10,
                            width: 10
                        },
                        visible: true,
                    },
                    style: { borderWidth: 2 },
                },
                series: [{
                    name: 'QR Scans',
                    style: { interior: secondaryColor },
                    pointsTooltipTemplateID: 'qr-tooltip'
                },
                {
                    name: 'NFC Taps',
                    style: { interior: primaryColor },
                    pointsTooltipTemplateID: 'nfc-tooltip'
                },
                {
                    name: 'Total',
                    style: { interior: primaryColorDark },
                    pointsTooltipTemplateID: 'total-tooltip'
                }],
                load: "onLineChartLoad",
                showTooltip: true,
                size: { height: scrollH },
                legend: { visible: true, shape: 'circle', position: 'Right', alignment: 'Near', itemSize: { width: 8.5, height: 8.5 }, textOption: { font: { fontFamily: 'Open Sans', size: '13px', color: '#333333' } } }
                //zooming: { enabled: true, type: 'x', enableMouseWheel: false }
            });


Vijayabharathi K [Syncfusion]
Replied On October 17, 2013 01:40 AM

Hi Pradeep,

 

Thanks for the update.

 

We have modified this workaround for data binding. We have used “preRender” event to enable the “isEmpty”  property  for first and last point in series. Please find the attachment and code snippet in the below,

 

[JS]

function chartload(sender) {

              //Get data information                  

                var dataSourceModified=window.data;

                 // Add empty point to first point in point collection

                 dataSourceModified.unshift({  "FoodName": "", Value1: 0, Value2: 0, Value3: 0 });

                 // Add empty point to last point in point collection

                 dataSourceModified.push({  "FoodName": "", Value1: 0, Value2: 0, Value3: 0 });

                 sender.model.series[0].dataSource = { data: dataSourceModified , xName: "FoodName", yNames: ["Value1"] };

                sender.model.series[1].dataSource = { data: dataSourceModified , xName: "FoodName", yNames: ["Value2"] };

                sender.model.series[2].dataSource = { data: dataSourceModified , xName: "FoodName", yNames: ["Value3"] };

        

        }

      function chartpreload(args) {

                    for(var i=0;i<args.model.series.length;i++){

                                var seriesCollection = args.model.series[i].points;

                                  seriesCollection[0].isEmpty=true;

                                  seriesCollection[args.model.series[i].points.length-1].isEmpty=true;

                                }      

       }

 

Please let us know if you need further assistance.

 

Regards,

Vijayabharathi



Padding_DataSource_4c4e7fb.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;