when I placed the label inside the pie chart(Code in bold). When i decrease the size of the page with the jChartFx pie chart the label inside the chart gets pushed outside of the pie chart with pointers. It seem after a certain size of the page where the jChartFx pie chart is on it pushes the label outside of the pie chart. How can I make the label inside the pie chart stay inside the pie chart no matter what size the page with jChartFx pie chart is?
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Question
StatementSolutions
when I placed the label inside the pie chart(Code in bold). When i decrease the size of the page with the jChartFx pie chart the label inside the chart gets pushed outside of the pie chart with pointers. It seem after a certain size of the page where the jChartFx pie chart is on it pushes the label outside of the pie chart. How can I make the label inside the pie chart stay inside the pie chart no matter what size the page with jChartFx pie chart is?
code:
@model ePortfolio.Models.WidgetViewModel
@using System.Web.Script.Serialization;
<div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">
<div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div>
<div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div>
</div>
<div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%;">
<div class="widget-content" id="ChartDiv" style="display: inline-block; overflow: visible;height:90%;width:100%;"></div>
</div>
<script type="text/javascript" language="javascript">
var chart@(Model.Widget.Id);
function LoadPieChart() {
chart@(Model.Widget.Id) = new cfx.Chart();
chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie);
chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);
var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes();
pieAttr.setSliceSeparation(50);
pieAttr.setLabelsInside(true);
pieAttr.setExplodingMode(cfx.ExplodingMode.First);
//chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%");
chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%");
var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));
chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2);
chart@(Model.Widget.Id).getView3D().setEnabled(true);
chart@(Model.Widget.Id).setDataSource(str);
var data = chart@(Model.Widget.Id).getData();
data.setSeries(1);
data.setPoints(10);
chart@(Model.Widget.Id).getToolTips().setEnabled(true);
chart@(Model.Widget.Id).getToolTips().setAlignment("near");
chart@(Model.Widget.Id).getToolTips().setFormat("%l%");
chart@(Model.Widget.Id).getLegendBox().setVisible(false);
@*chart@(Model.Widget.Id).getLegendBox().setWidth(175);
chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right);
chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@
chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0);
chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0);
chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0);
chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0);
var divHolder = document.getElementById('ChartDiv');
chart@(Model.Widget.Id).create(divHolder);
}
$(function() {
LoadPieChart();
});
function ResizeChart()
{
if (chart@(Model.Widget.Id) != null)
chart@(Model.Widget.Id).doUpdate(true);
};
</script>
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.