Pie chart does not render using Firefox

[StatementSolutions]

The chart renders on IE & Chrome but does not render in firefox.   What is wrong?

 

Code:

@model ePortfolio.Models.WidgetViewModel

@{

    Layout = "~/Views/Shared/_WidgetEmptyLayout.cshtml";

}

 

<li class="widget">

    <div style="overflow:auto;height:250px;">        

 

            <div data-role="navbar" class="widget-head" id="navcontainer">

                @Html.DisplayFor(model => model, "WidgetHeader");

            </div>

 

            <div class="widget-content" id="ChartDiv" style="width:485px;height:250px;display:inline-block"></div>

 

        </div>

</li>

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

    }

    

    LoadChart();

</script>

[JuanC]

In order for us to be able to help you without duplicating your server side environment we need the HTML source that gets to the client.

 

JuanC

[StatementSolutions]

This is an MVC application.  It renders in IE & Chrome but not in Firefox.:

 

 

cshtml:

<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()
    
</body>
<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 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>

[JuanC]

It does not matter whether it is an MVC application, PHP,  Perl, etc.

 

You can always use right-click in Firefox, View Page source and send us the page that gets to the client, if the page is doing additional HTTP requests using Ajax we will also need the content of those.

 

JuanC

[StatementSolutions]

Page source IE:

<!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="">
   
</head>

<body>
    <div>
        


<div>
        <div id="columns">

            <ul id="column1" class="column" style="width:50%;">
<!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>
</head>

<body>


<li class="widget">
    <div style="overflow:auto;height:200px;">
        <div data-role="navbar" class="widget-head" id="navcontainer">
            <h3>Asset Breakdown</h3>
<ul>
    <li>
        <button id="pinButton" class="submitButton" onclick="Pin('AssetAllocation2')">
            <img src="/Content/pin.png" alt="" wdith="15" height="15" />
        </button>
    </li>
    <li>
        <button id="resizeButton" class="submitButton" onclick="MaximizeWidget('/Widget/AssetAllocation2')">
            <img src="/Content/images/icons-png/plus-black.png" alt="" wdith="15" height="15" />
        </button>
    </li>
    <li>
        <button id="rotateButton" class="submitButton" onclick="Refresh('AssetAllocation2')">
            <img src="/Content/images/icons-png/refresh-black.png" alt="" wdith="15" height="15" />
        </button>
    </li>
</ul>
;
        </div>
        <div class="widget-content">
            <table class="table table-striped table-hover table-bordered table-condensed">
                <tr>
                    <th>Asset Type</th>
                    <th>Market Value</th>
                    <th>Percentage</th>
                </tr>
                        <tr>
                            <td>
                                Cash & Cash Equivalents
                            </td>
                            <td>
                                $130,452.31
                            </td>
                            <td>
                                13.32 %
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Equities
                            </td>
                            <td>
                                $293,277.39
                            </td>
                            <td>
                                29.94 %
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Taxable
Fixed Income
                            </td>
                            <td>
                                $301,496.17
                            </td>
                            <td>
                                30.78 %
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Non Taxable
Fixed Income
                            </td>
                            <td>
                                $254,425.70
                            </td>
                            <td>
                                25.97 %
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Other Securities
                            </td>
                            <td>
                                $0.00
                            </td>
                            <td>
                                0.00 %
                            </td>
                        </tr>

            </table>
        </div>
    </div>
</li>

    

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"baad894efb60461299ccb7d5557ea220"}
</script>
<script type="text/javascript" src="http://localhost:59623/3057d34ac1104072a7979daed1877b83/browserLink"async="async"></script>
<!-- End Browser Link -->

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

   

   
</head>

<body>

    

<li class="widget">
    <div style="overflow:auto;height:250px;">        

            <div data-role="navbar" class="widget-head" id="navcontainer">
                <h3>Asset Allocation</h3>
<ul>
    <li>
        <button id="pinButton" class="submitButton" onclick="Pin('AssetAllocation')">
            <img src="/Content/pin.png" alt="" wdith="15" height="15" />
        </button>
    </li>
    <li>
        <button id="resizeButton" class="submitButton" onclick="MaximizeWidget('/Widget/AssetAllocation')">
            <img src="/Content/images/icons-png/plus-black.png" alt="" wdith="15" height="15" />
        </button>
    </li>
    <li>
        <button id="rotateButton" class="submitButton" onclick="Refresh('AssetAllocation')">
            <img src="/Content/images/icons-png/refresh-black.png" alt="" wdith="15" height="15" />
        </button>
    </li>
</ul>
;
            </div>

       
            <div class="widget-content" id="ChartDiv" style="width:480px;height:230px"></div>

        </div>
</li>
 
    
</body>
<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>


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


    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 = [{"AssetType":"Cash \u0026 Cash Equivalents","AssetTypeCd":"C","EndMarketValue":130452.31,"EndMarketValueRatio":0.133161},{"AssetType":"Equities","AssetTypeCd":"E","EndMarketValue":293277.39,"EndMarketValueRatio":0.299369},{"AssetType":"Taxable\r\nFixed Income","AssetTypeCd":"I","EndMarketValue":301496.17,"EndMarketValueRatio":0.307758},{"AssetType":"Non Taxable\r\nFixed Income","AssetTypeCd":"N","EndMarketValue":254425.70,"EndMarketValueRatio":0.25971},{"AssetType":"Other Securities","AssetTypeCd":"O","EndMarketValue":0.00,"EndMarketValueRatio":0}];
        var str = [{"AssetType":"Cash \u0026 Cash Equivalents","AssetTypeCd":"C","EndMarketValue":130452.31,"EndMarketValueRatio":0.133161},{"AssetType":"Equities","AssetTypeCd":"E","EndMarketValue":293277.39,"EndMarketValueRatio":0.299369},{"AssetType":"Taxable\r\nFixed Income","AssetTypeCd":"I","EndMarketValue":301496.17,"EndMarketValueRatio":0.307758},{"AssetType":"Non Taxable\r\nFixed Income","AssetTypeCd":"N","EndMarketValue":254425.70,"EndMarketValueRatio":0.25971},{"AssetType":"Other Securities","AssetTypeCd":"O","EndMarketValue":0.00,"EndMarketValueRatio":0}];

        

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

            <ul id="column2" class="column" style="width:50%;"></ul>            
        </div>
</div>
    </div>    
</body>
</html>


<script src="/Scripts/jquery-DragNDrop.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="/scripts/inettuts.js"></script>
<link href="/content/inettuts.css" rel="stylesheet" type="text/css" />




Page source Firefox:

<!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="IdWSgDtt11oFWm9NqDguQ8cmYymcPp_bckKhWdBBtKdrE_QYjwO2ounvIciXwU8cl23XojDXSzTsgCIlTkkpI6rXQjLP6ma4c7iVIKhyCx9SSpKQXNMMNs7NVnPweZE1uxrAk6sdVjmZe3N2lkJdLA2" /> <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>


<!--load jPushMenu, required-->
<script src="/Scripts/jPushMenu.js"></script>

<!--call jPushMenu, required-->
<script>
jQuery(document).ready(function ($) {$('.toggle-menu').jPushMenu();});
</script>




<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"4da232cf9ec04e468b29838a66adb51f"}
</script>
<script type="text/javascript" src="http://localhost:59623/3057d34ac1104072a7979daed1877b83/browserLink"async="async"></script>
<!-- End Browser Link -->

</body>

</html>

[StatementSolutions]

I did not notice any errors when I hit f12 and view console

[JuanC]

Not sure if this look like this in your browser or was a problem introduced when posting to the forum, these are the things I noticed

 

1) Even though you say IE works fine, the page you posted has a <body> tag and after that the page seems to start again (e.g. doctype, html tag, etc.)

 

2) The page you posted as the one Firefox gets does not seem to have the scripts for jChartFX or the code that creates the chart.

 

Have you tried moving the scripts and code that creates the chart inside the <body> tag in your cshtml file?

 

JuanC

[StatementSolutions]

These are  widgets that is part of another page.  When I right-click on the page when the chart is render to view source you don't see everything.  I did move the code to render the chart inside the body and still the chart does nopt render in firefox.   Why can I not able to attach images so that you can see what I see?

 

Below is code to render the widget:

@model ePortfolio.Models.WidgetViewModel
@{
    Layout = "~/Views/Shared/_ChartWidgetEmptyLayout.cshtml";
}

<li class="widget">
    <div style="overflow:auto;height:250px;">        

            <div data-role="navbar" class="widget-head" id="navcontainer">
                @Html.DisplayFor(model => model, "WidgetHeader");
            </div>

       
            <div class="widget-content" id="ChartDiv" style="width:480px;height:230px"></div>

        </div>
</li>
 

Below is the code to render the pie chart:

<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.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 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>
</body>

</html>

[StatementSolutions]

I noticed while runnning this in firefox a javascript error occurs in the jchartfx.system.js: 93

 

TypeError: Cannot read property 'offsetwidth' of null.

 

 

I do not see this error happending in chrome or IE.

[StatementSolutions]

I also notice in firefox in console mode I get a whole bunch of this kind of messages browserlink line 37 happening when the page is trying to load:  I don't see this happening in IE or chrome.

 

http://localhost:51968/d18da8fa4f5642658c24c936204c7dfe/arterySignalR/poll?transport=longPolling&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAAR6%2FCcaHSy06hc9uhfX6LDgAAAAACAAAAAAADZgAAwAAAABAAAABHkrT%2FYI%2F4d9eu5R2KNwSWAAAAAASAAACgAAAAEAAAAAKmaVipwWGt9oSPHn22LQMoAAAA2VcOCQ2RDvVeLGD5mQyFhkGo6LZ7Pu9XcwjItlzrF%2BGUwx46rVnCzhQAAAD1Ada2%2FJpnjWLPaTnr1YT8ecKllw%3D%3D&messageId=d-13790217-NC%2C0%7CNj%2C9%7CNk%2C0&requestUrl=http%3A%2F%2Flocalhost%3A62509%2F&browserName=Firefox&userAgent=Mozilla%2F5.0+(Windows+NT+6.1%3B+WOW64%3B+rv%3A38.0)+Gecko%2F20100101+Firefox%2F38.0&tid=3&_=1433272751557

[StatementSolutions]

I diabled browerlink and I see an error occur only in firefox when trying to render the pie chart.

error:

 

  TypeError: m is null
http://localhost:62509/Scripts/jChartFx/jchartfx.system.js
Line 93

[JuanC]

I would recommend you test this page in FireFox (it works in all my tests), and then try step-by-step to migrate this page to your server side environment and see where it breaks.

 

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="jchartfx.system.js">

    </script>

    <script type="text/javascript" src="jchartfx.coreVector.js">

    </script>

    <script type="text/javascript" language="javascript">

        var chart1;

        

        function onLoadDoc()

        {

            chart1 = new cfx.Chart();

            chart1.getData().setSeries(1);

            chart1.getData().setPoints(5);

            chart1.setGallery(cfx.Gallery.Pie);

            chart1.create("myDiv");

        }        

    </script>

</head>

<body onload="onLoadDoc()">

<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>

</body>

</html>

 

JuanC