Jump to content
JChartFX Community
  • 0

Pie chart does not render using Firefox


Question

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>

Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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>

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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>

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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>

Link to post
Share on other sites
  • 0
  • 0

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