Apr 18, 2014, 1:27 PM
[CLOSED] Chart Category Axis label getting overlapp after exporting it into Image
Hi ,
I have column chart where on category Axis i m displaying products name where some of my product name length is more than 100 characters, so if category axis label length is large then i m dividing it in two lines and its working fine on web but if we export this chart into image then category axis label getting overlap in exported image
Using following browser & Ext library
Internet Explorer Version : 8.0.7601.17514 64 bit Edition
Ext.net version : 2.2.0.26551
Chart on Web
Exported Chart Image
Here is sample code
//Model
I have column chart where on category Axis i m displaying products name where some of my product name length is more than 100 characters, so if category axis label length is large then i m dividing it in two lines and its working fine on web but if we export this chart into image then category axis label getting overlap in exported image
Using following browser & Ext library
Internet Explorer Version : 8.0.7601.17514 64 bit Edition
Ext.net version : 2.2.0.26551
Chart on Web
Exported Chart Image
Here is sample code
//Model
public class ChartModel
{
public string Name { get; set; }
public int Data1 { get; set; }
}
// Controllerpublic List<ChartModel> GenerateData()
{
List<ChartModel> lst=new List<ChartModel>();
ChartModel cm = new ChartModel();
string strProductName = " ";
for (int i = 1; i <= 5; i++)
{
if (i == 1)
strProductName = "APROVEL_PF/IRBESARTAN_APV TABS 1 PACK 28 TABS IRBESARTAN 150.00 MG + HYDROCHLOROTHIAZIDE 12.5 MG";
else
strProductName = "Sample_Product/IRBESARTAN_APV TABS 1 PACK 28 TABS";
cm = new ChartModel();
cm.Name = strProductName.Length > 50 ? strProductName.Insert(strProductName.LastIndexOf(' ', strProductName.Length / 2), "\n") + i : strProductName + i;
cm.Data1 = 100+i;
lst.Add(cm);
}
return lst;
}
public ActionResult Index()
{
return View(GenerateData());
}
//View
@{
ViewBag.Title = "Bar Chart";
var X = Html.X();
}
<script>
var saveChart = function (btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice == 'yes') {
btn.up('panel').down('chart').save({
type: 'image/png'
});
}
});
}
</script>
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))
@{
<h3>Bar Chart Sample</h3><br />
@(X.Panel()
.Title("Column Chart")
//.Layout(LayoutType.Fit)
.Width(1000)
.Height(800)
.TopBar(X.Toolbar()
.Items(
X.Button()
.Text("Save Chart")
.Icon(Icon.Disk)
.Handler("saveChart")
)
)
.AutoScroll(false)
.Items(
X.Chart()
.ID("Chart1")
.Height(650)
.MinWidth(300)
.Width (900)
.MaxWidth (1200)
.Shadow(true)
.StyleSpec("background:#fff;")
.Animate(true)
.Store(X.Store()
.Data(Model)
.Model(X.Model()
.Fields(
X.ModelField().Name("Name"),
X.ModelField().Name("Data1")
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(X.JsonReader().Root("data"))
)
)
.Axes(
X.NumericAxis()
.Fields("Data1")
.Grid(true)
.Title("Revenue")
.MajorTickSteps(5)
.Label(X.AxisLabel()
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
),
X.CategoryAxis()
.Position(Position.Bottom)
.Fields("Name")
.Title("Products")
.Position(Position.Bottom)
.Label(X.AxisLabel()
.Rotate(X.RotateAttribute().Degrees(270))
)
)
.Series(X.ColumnSeries()
.Axis(Position.Left)
.Highlight(true)
.XField("Name")
.YField("Data1")
.Tips(X.ChartTip()
.TrackMouse(true)
.Width(140)
.Height(28)
.Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));")
)
.Label(X.SeriesLabel()
.Display(SeriesLabelDisplay.InsideEnd)
.Field(new [] { "Data1" })
.Orientation(Orientation.Horizontal)
.Color("#333")
.TextAnchor("middle")
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0');")
)
)
)
)
}
Note :Please test it in Internet Explorer Version : 8.0 , 64 bit Edition
Last edited by Daniil; May 06, 2014 at 6:49 AM.
Reason: [CLOSED]