- The value for the legend box is truncated to one character. The legend box should display the acual value not just one charaxcter. (exhibit A from attached image)
- The value in the pie chart is in percentage but it rounds up to the next vallue. Ex: 11.59 % should display 11.59% not 12% (exhibit B from attached image)
- How can we place the legend full value notjust one character outside the pie chart with an arrow pointng to the section of the pie?
Code:
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <style> * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */ color: rgb(112, 112, 112); font-family: Arial; font-size: 11px; margin: 0; /* Margin zero is used to prevent unnecessary white space. */ padding: 0; /* Padding zero is used to prevent unnecessary white space. */ } </style>
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
We are using visual studio mvc (c#).
- The value for the legend box is truncated to one character. The legend box should display the acual value not just one charaxcter. (exhibit A from attached image)
- The value in the pie chart is in percentage but it rounds up to the next vallue. Ex: 11.59 % should display 11.59% not 12% (exhibit B from attached image)
- How can we place the legend full value notjust one character outside the pie chart with an arrow pointng to the section of the pie?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */
color: rgb(112, 112, 112);
font-family: Arial;
font-size: 11px;
margin: 0; /* Margin zero is used to prevent unnecessary white space. */
padding: 0; /* Padding zero is used to prevent unnecessary white space. */
}
</style>
<script type="text/javascript" src="~/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.system.js"></script>
<script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.coreBasic.js"></script>
<script type="text/javascript" src="~/Scripts/jChart/js/jchartfx.advanced.js"></script>
@*<script type="text/javascript" src="~/Scripts/jChart/jchartfx.userinterface.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/jChart/jchartfx.userinterface.css" />*@
<link rel="stylesheet" type="text/css" href="~/Content/jChart/Attributes/jchartfx.attributes.css" />
<link rel="stylesheet" type="text/css" href="~/Content/jChart/Palettes/jchartfx.palette.css" />
<script type="text/javascript" language="javascript">
@using System.Web.Script.Serialization;
var chart1;
function loadChart() {
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
chart1.getAllSeries().getPointLabels().setVisible(true);
//var str = @Html.Raw(new JavaScriptSerializer().Serialize(ViewData["Asset Allocations Chart"]));
var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));
@*$.each(@Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])), function(i, item){
alert("Mine is " + i + "|" + item.AssetType + "|" + item.EndMarketValue);
//chart1.setDataSource(item);
});*@
chart1.getView3D().setEnabled(true);
chart1.getAllSeries().getPointLabels().setVisible(true);
chart1.setDataSource(str);
//var fields = chart1.getDataSourceSettings().getFields();
//var field1 = new cfx.FieldMap();
//field1.setName("AssetType");
//field1.setUsage(cfx.FieldUsage.RowHeading);
//fields.add(field1);
//var field2 = new cfx.FieldMap();
//field2.setName("EndMarketValue");
//field2.setUsage(cfx.FieldUsage.ColumnHeading);
//fields.add(field2);
//var crosstab = new cfx.data.CrosstabDataProvider();
//crosstab.setDataSource(str);
//chart1.setDataSource(str);
//var data = chartStats.getData();
var data = chart1.getData();
data.setSeries(1);
//data.setPoints(10);
//var labels = chart1.getAxisX().getLabels();
//labels.clear();
//labels.setItem(0, "Cash & Cash Equivalents");
//labels.setItem(1, "Equities");
//labels.setItem(2, "Taxable Fixed Income");
//labels.setItem(3, "Non Taxable Fixed Income");
//labels.setItem(4, "Other Securities");
//var titles = chart1.getTitles();
//var title = new cfx.TitleDockable();
//title.setText("Asset Allocation");
//titles.add(title);
//chart1.getAllSeries().getPointLabels().setFormat("%v");
chart1.getAllSeries().getPointLabels().setVisible(true);
chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);
chart1.getLegendBox().setVisible(true);
chart1.getLegendBox().setWidth(100);
chart1.getLegendBox().setDock(cfx.DockArea.Right);
chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
</script>
</head>
<body>
@RenderBody()
</body>
</html>
Edited by StatementSolutions
Link to comment
Share on other sites
4 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.