Range Padding for String Labels on the axis

[Pradeep]

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]

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]

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]

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]

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]

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]

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]

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