Range Padding for String Labels on the axis
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??
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
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
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?
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
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 }
});
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
- 7 Replies
- 2 Participants
-
PR Pradeep
- Sep 26, 2013 12:28 AM UTC
- Oct 17, 2013 05:40 AM UTC
