Jump to content
JChartFX Community
  • 0

Legend box and percent value rounds up


Question

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>

 

 

post-47373-0-40556100-1431353911_thumb.jpg

Edited by StatementSolutions
Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

how can i place the legend full text value not just the character value of the legend with an arrow pointing to a section of the pie chart? (Look at attached image for visual)

 

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>
 

example:

 

post-47373-0-15007300-1431364639_thumb.jpg

Link to post
Share on other sites
  • 0

>> 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)

 

I am guessing there is an issue with the server-side JSON generated for the data, can you please post a sample of what that JSON looks like?

 

>> 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)

 

chart1.getAxisY().getDataFormat().setDecimals(2);

 

>> 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?

 

The fact that the legend is truncated is probably due to how the JSON is formed as we do not truncate the legend labels (at least on purpose). Having an arrow pointing from the legend to the pie slice is not supported. You might want to check if the following calls give you something close to what you want

 

chart1.setGallery(cfx.Gallery.Pie);

var pieAttr = chart1.getAllSeries().getGalleryAttributes();
pieAttr.setLabelsInside(false);
chart1.getAllSeries().getPointLabels().setFormat("%l %p%%");
chart1.getLegendBox().setVisible(false);
 
This will force the labels to be painted outside (with an arrow from the slice to the label) and will change the label displayed to include the label and percentage. Note that this might cause your slices to be smaller, specially if your labels are very long (after fixing the truncation issues)
 
Regards,
 
JuanC
Link to post
Share on other sites
  • 0

I thnk I may know what the problem is.  the code below I convert viewdata value to json and than set it as data source (below in bold). 

ExampleJSON:

AssetType: ABC AssetTypeCd: A MarketValue: 100

 

it seems the chart is using 'AssetTypeCd' rather than 'AssetType'.  How do I force the chart to use 'AsseType' and not 'AssetTypCd'?

 

Code:

<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/jChartFx/jchartfx.system.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreVector.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/jchartfx.coreBasic.js"></script>
    <script type="text/javascript" src="~/Scripts/jChartFx/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="~/Stylesheets/jChartfx/Attributes/jchartfx.attributes.css" />
    <link rel="stylesheet" type="text/css" href="~/Stylesheets/jChartfx/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 pieAttr = chart1.getAllSeries().getGalleryAttributes();

            pieAttr.setLabelsInside(false);
            chart1.getAllSeries().getPointLabels().setFormat("%l %p%%");
            chart1.getLegendBox().setVisible(false);

            //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.getAxisY().getDataFormat().setDecimals(2);
            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 onload="LoadChart()">

    @RenderBody()

</body>
</html>

Link to post
Share on other sites
  • 0

If you do not specify how fields are used we will use the first string field we find for your labels and all numeric fields as series to be plotted, you can change this behavior using code similar to this

 

        var fields = chart1.getDataSourceSettings().getFields();

 

        var field1 = new cfx.FieldMap();
        field1.setName("AssetTypeCd");
        field1.setUsage(cfx.FieldUsage.Label);
        fields.add(field1);
 
        var field2 = new cfx.FieldMap();
        field2.setName("MarketValue");
        field2.setUsage(cfx.FieldUsage.Value);
        fields.add(field2);
 
I also noticed that in your page you are including both coreBasic and coreVector, you are only supposed to include one of those.
 
CoreVector is the recommended one as it allows us to customize several visuals of the chart (including all out motifs)
 
CoreBasic could be considered legacy as there is a lot of new functionality that is not present on it, it was intended to be used in case coreVector was too big and the charts you were looking for were visually simple (note that you can also generate simple charts using coreVector by changing the templates).
 
JuanC
Link to post
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...