Pie IE & Chrome don't look the same

StatementSolutions · June 2, 2015

The pie chart apperance differ in Chrome and IE. Below is my source.

I can't attach an image on how the chart look because of size limitation.

Code with JS:

<html>

<head>

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

</head>

<body>

@RenderBody()

</body>

@*

*@

@using System.Web.Script.Serialization;

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(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(item.AssetTypeCd + "|" + 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 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);

var divHolder = document.getElementById('ChartDiv');

chart1.create(divHolder);

}

LoadPieChart();

</script>

</html>

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=""> <link href="/Content/bootstrap-theme.css" rel="stylesheet" /> <link href="/Content/bootstrap.css" rel="stylesheet" /> <script type="text/javascript" src="/Scripts/jquery.min.js"></script> <script type="text/javascript" src="/Scripts/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="/Content/jPushMenu.css" /> </head> <body> <div data-role="layout" data-id="drawer-layout"> <header data-role="header"> <div data-role="navbar" style="height:120px;"> <button class="toggle-menu menu-left push-body" data-align="left" style="height:25px;width:25px; top:80px;color:black;font-size: x-large; background-image:url('../Content/drawer.png'); background-repeat:no-repeat;background-color:transparent; border:none; "></button> <a href="/"> <img src="../Content/SSLogo.gif" height="97" style="position:absolute; left:40px;" /> </a> <span data-role="view-title" style="color: red; font-weight: bold;position: absolute; right:25px; top: 55px; "> <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="g00xgeRVdyVdGuCNHWCfwNMgII_JZWTM2tQRpwp34YNbUNojbRzcLyqlEoEy6uHZUqdcrWcejlc_vKsV50KqnCmDmb5NSdwgj_spuUUJMjRkw1MskONadDSZe9ozrfiF-B4-dpOmbvITouNq4dGSyw2" /> <div style="text-align:right"> <a href="/Manage" title="Manage">Hello demouser!</a> <a href="javascript:document.getElementById('logoutForm').submit()"> <img src="/Content/logout.png" height="20" /> Log off </a> </div> </form> </span> </div> </header> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"> <a href="javascript:document.getElementById('logoutForm').submit()"> <img src="/Content/logout.png" height="20" /> Log off </a> <h3>Menu</h3> <a href="/"> <img src="/Content/images/icons-png/home-black.png" /> Home </a> <h3>Accounts</h3> <a href="/Aggregates">Aggregate</a> <a href="/Positions">Positions</a> <h3>Transactions</h3> <a href="/Transactions/Transactions">Transactions</a> <a href="/Transactions/TransType">Transaction Type</a> <h3>Reporting</h3> <a href="/Aggregates/Performance">Performance Reports</a> <a href="/Bundles">Report Batches</a> <h3>Benchmark</h3> <a href="/Benchmarks/Details">Details</a> <a href="/Benchmarks/Yields">Yields</a> <h3>User Maintenance</h3> <a href="/UserAdministration">User Administration</a> <a href="/Advisors">Investment Reps</a> <h3>My Profile</h3> <a href="/Manage/ChangePassword"> <img src="/Content/images/icons-png/lock-black.png" /> Change Password </a> </nav> </div> <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title=""> <link href="/Content/jquery-ui.css" rel="stylesheet" /> <script src="/Scripts/jquery-2.1.3.min.js"></script> <script src="/Scripts/jquery-ui.js"></script> <div id="tabs"> <ul class="nav nav-tabs" id="myTab"> <li class="active"> <a data-toggle="tab" href="#home">Home</a> </li> <li><a data-toggle="tab" href="#aggregate">Aggregate</a></li> <li><a data-toggle="tab" href="#account">Account</a></li> <li><a data-toggle="tab" href="#securities">Securities</a></li> </ul> <div id="home" class="tab-pane fade in active"> <iframe width="1000" height="1200" scrolling="yes" frameborder="0" style="border:none;" src="/DashBoard/Home/1"></iframe> </div> <div id="aggregate" class="tab-pane fade in"> <iframe width="1000" height="1200" scrolling="yes" frameborder="0" style="border:none;" src="/DashBoard/Aggregate/2"></iframe> </div> <div id="account" class="tab-pane fade in"> <iframe width="1000" height="1200" scrolling="yes" frameborder="0" style="border:none;" src="/Home/Account"></iframe> </div> <div id="securities" class="tab-pane fade in"> <iframe width="1000" height="1200" scrolling="yes" frameborder="0" style="border:none;" src="/Home/Securities"></iframe> </div> <hr> </div> <script type="text/javascript"> $(document).ready(function () { $("#tabs").tabs(); $("#tabs").tabs("option", "selected", 0); }); </script> </div>  <script src="/Scripts/jPushMenu.js"></script>  <script> jQuery(document).ready(function ($) { $('.toggle-menu').jPushMenu(); }); </script>  <script type="application/json" id="__browserLink_initializationData"> {"appName":"Chrome","requestId":"627be2e2cad74a3c9bd2279eeb97adef"} </script> <script type="text/javascript" src="http://localhost:51968/d18da8fa4f5642658c24c936204c7dfe/browserLink" async="async"></script>  </body> </html>

StatementSolutions · June 24, 2015

why are some label truncated on a pie chart?

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>

</head>

<body>

    @RenderBody()

<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.coreBasic.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 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);
        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);

        var divHolder = document.getElementById('ChartDiv');
        chart1.create(divHolder);
    }

    LoadPieChart();
</script>

</body>

</html>

it should read 'Non taxable Fixed Income 81.77%'

Sign In

Pie IE & Chrome don't look the same

Question

StatementSolutions

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

StatementSolutions

Link to comment

Share on other sites

Join the conversation

Browse

Activity