<script type="text/javascript" language="javascript"> var chart1;
function LoadPieChart() {
chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Pie); chart1.getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart1.getAllSeries().getGalleryAttributes();
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
I have a chart using jChartfx that is rendered on a widget. This widget is resizeable.
How do I resize the jchartfx chart as the widget is being resized?
Code:
@model ePortfolio.Models.WidgetViewModel
@using System.Web.Script.Serialization;
@{
var x = Model.GetWidgetUser();
}
<li data-row="@x.data_row" data-col="@x.data_col" data-sizex="@x.data_sizex" data-sizey="@x.data_sizey" id="@x.WidgetId" style="border: solid">
@*<div data-role="navbar" class="widget-head" id="navcontainer">
@Html.DisplayFor(model => model, "WidgetHeader");
</div>*@
<div id="btn" style="overflow: no-content;width:100%;">
<div id="idRefresh" style="position: absolute; right:0px; top: 0px; display:inline;background:url(../../Content/images/refresh.gif) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"> </div>
<div id="idResize" style="position: absolute; right:20px; top: 0px; display:inline;background:url(../../Content/images/resize.png) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"></div>
<div id="idPin" style="position: absolute; right:40px; top: 0px; display:inline;background:url(../../Content/images/pin.png) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"> </div>
<div id="idText" style="position: absolute; right:50%; top: 20px; display:inline; height: 20px; "><h5>@Model.Widget.Title</h5></div>
</div>
<br /><br /><br />
<div style="overflow: auto;height:93%;">
<div id="ChartDiv" style="overflow: auto;height:288px;"></div>
</div>
</li>
<script type="text/javascript" language="javascript">
var chart1;
function LoadPieChart() {
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
chart1.getAllSeries().getPointLabels().setVisible(true);
var pieAttr = chart1.getAllSeries().getGalleryAttributes();
pieAttr.setLabelsInside(false);
chart1.getAllSeries().getPointLabels().setFormat("%l %p%%");
chart1.getLegendBox().setVisible(false);
var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));
chart1.getAxisY().getDataFormat().setDecimals(2);
chart1.getView3D().setEnabled(true);
chart1.getAllSeries().getPointLabels().setVisible(true);
//console.log("1: "+str)
chart1.setDataSource(str);
var data = chart1.getData();
data.setSeries(1);
data.setPoints(10);
chart1.getAllSeries().getPointLabels().setVisible(true);
chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);
chart1.getLegendBox().setVisible(false);
//chart1.getLegendBox().setWidth(50);
//chart1.getLegendBox().setDock(cfx.DockArea.Right);
//chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);
chart1.getPlotAreaMargin().setTop(0);
chart1.getPlotAreaMargin().setBottom(0);
chart1.getPlotAreaMargin().setRight(0);
chart1.getPlotAreaMargin().setLeft(0);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
$(function() {
LoadPieChart();
});
$(window).resize(function() {
if (chart1 != null)
chart1.doUpdate(true);
});
</script>
Link to comment
Share on other sites
3 answers 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.