Jump to content
JChartFX Community
  • 0
Sign in to follow this  
StatementSolutions

Tooltip for Pie chart does not work

Question

I created a pie chart using jchartfx.  I am trying to get the tooltip to work as one hovers over a section of the pie the detail info should appear.  Nothing happens when I hove the cursor over the pie chart.

 

 

chart@(Model.Widget.Id).GetToolTips().setenabled(true);

chart@(Model.Widget.Id).GetToolTips().SetFormat("%l %p%%);

 

 

 

Share this post


Link to post
Share on other sites

16 answers to this question

Recommended Posts

  • 0

We received the credentials, unfortunately although we can see the issue there is no way for us to try to fix our code or provide a workaround as we have no way of modifying the code that is running on your server (or the JS provided by your server).

 

In general, when posting an issue you should try the following

 

1) Start with an empty HTML page that creates a chart

2) If necessary change the div's size and chart attributes to match your chart using hardcoded data

3) Slowly try to match your page scenario (e.g. Div hierarchy, additional scripts such as jQueryUI, bootstrap, etc.)

 

Once you duplicate the problem in a stand-alone fashion, post or send us a zip containing the page and all additional scripts and CSS files.

 

Note that in this particular case, the fact that the tooltip is rendered behind has nothing to do with how your customize the chart (colors, fonts, API) but only with the hierarchy of divs in your page and possibly with interaction with other scripts jQueryUI, bootstrap, etc.

 

JuanC

Share this post


Link to post
Share on other sites
  • 0

In order to help you we will need the code that actually gets sent to the client (HTML page, including additional js scripts related to the chart), this allows to troubleshoot issues without the need to duplicate your server side architecture (ASP.NET, Perl, Python, MVC, etc.)

 

Have you checked if there is an error displayed in your browser's console?

Can you provide the version of jChartFX you are using?

Are you able to replicate the error in a simple page (preferably a client-only HTML page)?

 

JuanC

Share this post


Link to post
Share on other sites
  • 0

I placed a jchartfx pie chart onto a widget that is draggable and resizeable.  When I click on an section of the pie chart it seems that the tool tip is behind the widget.  When I drag the widget I see a tool tip.

 

master page:
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@Page.Title - ePortfolio Manager</title>
    <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
    @RenderSection("styles", required: false)
    <link rel="stylesheet" type="text/css" href="~/Content/jChartfx/Attributes/jchartfx.attributes.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/jChartfx/Palettes/jchartfx.palette.css" />
    @Styles.Render("~/Content/gridster/css")
    <style>
        .gridster * {
            -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>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jchartfx")
</head>
<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="//browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="container">
        <div id="bodyDiv">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div id="pushobj">
                        <div class="navbar-header" style="height:100px">
                            @Html.Partial("_LogoPartial")
                        </div>
                        <div class="navbar-collapse collapse">
                            @Html.Partial("_LoginPartial")
                        </div>
                        <div class="body-content">
                            @Html.Partial("_DashboardTabsPartial")
                            <div class="container tab-content">
                                @RenderBody()
                            </div>
                            <hr />
                            <footer>
                                <p>© 2014~@DateTime.Now.Year - Statement Solutions, LLC.</p>
                            </footer>
                        </div>
                    </div>
                </div>
                <div id="menu">
                    @Html.Partial("_MenuPartial")
                </div>
            </div>
        </div>
    </div>

    @Scripts.Render("~/bundles/multilevelpushmenu")
    @Scripts.Render("~/bundles/gridster")
    <script type="text/javascript">
        function updateWidget(widget) {
            $.ajax({
                url: "@Html.Raw(Url.Action("UpdateWidget", new { id = @ViewBag.DashboardPageId }))" + "?jsonData=" + JSON.stringify(widget),
                type: "GET",
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                cache: false,
                processData: false,
                success: function (data) {
                    // success code here
                  }
            });
        }

        var gridster;        

        $(function () {
            gridster = $(".gridster ul").gridster({
                widget_base_dimensions: [160, 155],
                widget_margins: [10, 11],

                max_cols: 6,
                min_cols: 6,

                serialize_params: function ($w, wgd) {
                    return {
                        x: wgd.col,
                        y: wgd.row,
                        width: wgd.size_x,
                        height: wgd.size_y,
                        id: $($w).attr('id'),
                        class: $($w).attr('class'),
                        htmlContent: $($w).html()
                    };
                },
                resize: {
                    enabled: true,
                    max_size: [6, 6],
                    min_size: [2, 2],
                    stop: function (e, ui, $widget) {
                        $(".gridster ul li").each(function (index) {
                            var widget = {
                                id: $(this).attr("id"),
                                xaxisval: $(this).attr("data-sizex"),
                                yaxisval: $(this).attr("data-sizey"),
                                datarow: $(this).attr('data-row'),
                                datacol: $(this).attr('data-col')
                            }

                            updateWidget(widget);
                           ResizeChart()      
                        })
                    }
                },
                draggable: {
                    max_size: [6, 6],
                    min_size: [2, 2],
                    stop: function (event, ui) {
                        $(".gridster ul li").each(function (index) {
                            var widget = {
                                id: $(this).attr("id"),
                                xaxisval: $(this).attr("data-sizex"),
                                yaxisval: $(this).attr("data-sizey"),
                                datarow: $(this).attr('data-row'),
                                datacol: $(this).attr('data-col')
                            }

                            updateWidget(widget);
                        })
                    }
                }

            }).data('gridster');
        });
    </script>
    @RenderSection("scripts", required: false)
</body>
</html>
 

 

page:

@model ePortfolio.Models.WidgetViewModel
@using System.Web.Script.Serialization;

<div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">
    <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div>
    <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div>

    @*<div id="header">
        <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%">
            <tr>

                <th class="wdgcenter" style="width:50px">Qty/Shares</th>
                <th class="wdgcenter" style="width:50px">Account #</th>
                <th class="wdgcenter" style="width:50px">% of Portfolio</th>

            </tr>
        </table>
    </div>*@
</div>

<div class="widget-body" style="display:block;overflow:auto;height:90%;width:100%;">
    <div class="widget-content" id="ChartDiv" style="overflow: auto;height:100%;width:100%;"></div>

</div>
   
    <script type="text/javascript" language="javascript">
    var chart@(Model.Widget.Id);

    function LoadPieChart() {

        chart@(Model.Widget.Id) = new cfx.Chart();
        chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie);
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes();

        pieAttr.setLabelsInside(true);

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%");
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%");
        // chart@(Model.Widget.Id).getLegendBox().setVisible(false);

        var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

        chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2);
        chart@(Model.Widget.Id).getView3D().setEnabled(true);
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        chart@(Model.Widget.Id).setDataSource(str);

        var data = chart@(Model.Widget.Id).getData();
        data.setSeries(1);
        data.setPoints(10);

        //var template = '<DataTemplate xmlns:x="a"><DataTemplate.Resources><MultiplyConverter x:Key="multConverter"></MultiplyConverter><StringConverter x:Key="titleConverter"></StringConverter><Thickness x:Key="padding">7</Thickness></DataTemplate.Resources><Canvas Padding="{Binding Path=Padding}"><Border Margin="0,0,0,0" Stroke="#808080" StrokeThickness="2" CornerRadius="12" CornerPercent="0.4" Canvas.Left="0" Canvas.Top="0" Fill="#808080" Segments="{Binding Path=Segments}" StartCorner="{Binding Path=Corner}"><Border.BitmapEffect><BlurBitmapEffect Radius="2"></BlurBitmapEffect></Border.BitmapEffect></Border><Border BorderBrush="#C6C6C6" BorderThickness="1" Background="{Binding Path=Fill}" Opacity="1" CornerPercent="0.4" CornerRadius="12" Segments="{Binding Path=Segments}" StartCorner="{Binding Path=Corner}"  Padding="26,8,26,6"><DockPanel x:Name="container" Orientation="Vertical"><TextBlock Text="{Binding Path=Title, Converter={StaticResource titleConverter},ConverterParameter=%u}}" FontSize="{Binding Path=FontSize, Converter={StaticResource multConverter},ConverterParameter=1}" Visible="{Binding Path=TitleVisible}" HorizontalAlignment="Center" Foreground="#3D3D3D" Margin="3,0,3,6"></TextBlock></DockPanel></Border></Canvas></DataTemplate>';
        //var tooltips = chart@(Model.Widget.Id).getToolTips();
        //tooltips.setBorderTemplate(template);
        //tooltips.setEnabled(true);

        chart@(Model.Widget.Id).getToolTips().setEnabled(true);
        
        chart@(Model.Widget.Id).getToolTips().setFormat("%l%");

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);
        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

        chart@(Model.Widget.Id).getLegendBox().setVisible(false);
        //chart@(Model.Widget.Id).getLegendBox().setWidth(500);
        //chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Top);
        //chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Center);

        @*chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0);*@

        var divHolder = document.getElementById('ChartDiv');
        chart@(Model.Widget.Id).create(divHolder);
    }

    $(function() {
        LoadPieChart();
    });

    //$(window).resize(function() {
    function ResizeChart()
    {
        if (chart@(Model.Widget.Id) != null)
            chart@(Model.Widget.Id).doUpdate(true);
    };

</script>
 

Share this post


Link to post
Share on other sites
  • 0

In order to help you we will need the code that actually gets sent to the client (HTML page, including additional js scripts related to the chart), we cannot test server side code as we do not have the same environment you have.

 

We need for you to use "View Page Source" and send us the HTML that gets to the client. We might also need additional scripts and/or CSS

 

JuanC

Share this post


Link to post
Share on other sites
  • 0

  View page Source:   <!DOCTYPE html>   <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->   <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->   <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->   <!--[if gt IE 8]><!-->   <html class="no-js">   <!--<![endif]-->   <head>   <meta charset="utf-8" />   <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title> - ePortfolio Manager</title>   <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">       <link rel="stylesheet" type="text/css" href="/Content/jChartfx/Attributes/jchartfx.attributes.css" />   <link rel="stylesheet" type="text/css" href="/Content/jChartfx/Palettes/jchartfx.palette.css" />   <link href="/Content/gridster/app.css" rel="stylesheet"/>   <link href="/Content/gridster/jquery.gridster.css" rel="stylesheet"/>       <style>   .gridster * {   -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>       <link href="/Content/jquery.multilevelpushmenu.css" rel="stylesheet"/>   <link href="/Content/bootstrap_integration.css" rel="stylesheet"/>   <link href="/Content/bootstrap.css" rel="stylesheet"/>   <link href="/Content/bootstrap-theme.css" rel="stylesheet"/>   <link href="/Content/site.css" rel="stylesheet"/>       <script src="/Scripts/modernizr-2.6.2.js"></script>       <script src="/Scripts/jquery-1.10.2.js"></script>       <script src="/Scripts/bootstrap.js"></script>   <script src="/Scripts/respond.js"></script>   <script src="/Scripts/bootstrap-paginator.js"></script>       <script src="/Scripts/jChartFx/jchartfx.system.js"></script>   <script src="/Scripts/jChartFx/jchartfx.coreBasic.js"></script>       </head>   <body>   <!--[if lt IE 7]>   <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="//browsehappy.com/">upgrade your browser</a> to improve your experience.</p>   <![endif]-->       <div class="container">   <div id="bodyDiv">   <div class="row">   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">   <div id="pushobj">   <div class="navbar-header" style="height:100px">   <div class="navbar-brand" style="padding-left: 30px; padding-top: 5px;">   <a class="site-title" href="/">   <img src="/Content/unensjg2.ooq.jpg" alt="Logo" style="height: 90px;">   </a>   <span class="site-desc"></span>   </div>           </div>   <div class="navbar-collapse collapse">   <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="qrc7n_MzJL05mW50spaeMPpky3UjLt5PWNL8JZvSYIMUqWwM_ER-2fX3ie2rLY91DqnIbhNCZGqAM9NuVF6K8r7rrCHtJERNZkxCQFAPQ3thBHIWLMkAo1zXo5e5s6F-cgyDHYxR7YNwzmRBKgAojQ2" /> <ul class="nav navbar-nav navbar-right">   <li>   <a href="/Manage" title="Manage">Hello wleung!</a>   </li>   <li>   <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>   </li>   </ul>   </form>       </div>   <div class="body-content">       <ul class="nav nav-tabs">   <li class=""><a href="/Dashboard">HOME</a></li>   <li class="active"><a href="/Dashboard/Aggregate/240">AGGREGATE</a></li>   <li class="disabledTab"><a href="/Dashboard/Account">ACCOUNT</a></li>   <li class="disabledTab"><a href="/Dashboard/Security">SECURITIES</a></li>   </ul>       <div class="container tab-content">               <div style="text-align: center;vertical-align:middle; width: 100%;">   <br />   <b><span>Title: Steel, Joan </span></b>   </div>       <div style="position: relative;height: 100%; width: 100%;">   <div id="columns" class="gridster ready">       <ul style="position: relative;height: 100%; width: 100%;">           <li data-row="1" data-col="1" data-sizex="3" data-sizey="2" id="3" style="border:1px solid;">       <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">   <div class="widget-title text-center" style="padding-top:10px;"><label>ASSET BREAKDOWN</label></div>   <div id="id-refresh-3" class="wdgbkg"> </div>   <div id="header">   <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%">   <tr>   <th class="wdglabel" style="width:65px">Account #</th>   <th class="wdgcenter" style="width:150px">Cash &<br/>Cash Equivalents</th>   <th class="wdgcenter" style="width:65px">Equities</th>   <th class="wdgcenter" style="width:125px">Taxable<br />Fixed Income</th>   <th class="wdgcenter" style="width:150px">Non Taxable<br />Fixed Income</th>   <th class="wdgcenter" style="width:65px">Other</th>   <th class="wdgcenter" style="width:65px">Total</th>   </tr>   </table>   </div>   </div>       <br/>   <br />       <div class="widget-body" style="display:block;overflow:auto;height:85%;width:100%;">   <div class="widget-content">   <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%">   <tfoot>   <tr>   <td class="wdgridge2" colspan="7"></td>   </tr>   </tfoot>   <tbody>   <tr>   <td class="wdglabel wdgridge" style="width:65px">   <a href="/Dashboard/Account/240?AcctNo=052258649%20%20%20">   52258649   </a>   </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $47,210.00       </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $88,597.80   </td>       <td class="wdgnumeric wdgridge" style="width:125px">   $31,263.45       </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $46,603.80   </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $0.00   </td>   <td class="wdgnumeric" style="width:65px">   $213,675.05   </td>   </tr>   <tr>   <td class="wdglabel wdgridge" style="width:65px">   <a href="/Dashboard/Account/240?AcctNo=086318467%20%20%20">   86318467   </a>   </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $24,381.00       </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $345,126.47   </td>       <td class="wdgnumeric wdgridge" style="width:125px">   $120,729.32       </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $51,055.52   </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $0.00   </td>   <td class="wdgnumeric" style="width:65px">   $541,292.31   </td>   </tr>       </tbody>   </table>   </div>   </div>       </li>           <li data-row="1" data-col="4" data-sizex="3" data-sizey="2" id="4" style="border:1px solid;">       <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">   <div class="widget-title text-center" style="padding-top:10px;"><label>ASSET ALLOCATION</label></div>   <div id="id-refresh-4" class="wdgbkg"> </div>           </div>       <div class="widget-body" style="display:block;overflow:auto;height:90%;width:100%;">   <div class="widget-content" id="ChartDiv" style="overflow: auto;height:100%;width:100%;"></div>       </div>       <script type="text/javascript" language="javascript">   var chart4;       function LoadPieChart() {       chart4 = new cfx.Chart();   chart4.setGallery(cfx.Gallery.Pie);   chart4.getAllSeries().getPointLabels().setVisible(true);       var pieAttr = chart4.getAllSeries().getGalleryAttributes();       pieAttr.setLabelsInside(true);       chart4.getAllSeries().getPointLabels().setFormat("%l %p%%");   //chart4.getAllSeries().getPointLabels().setFormat("%p%%");   // chart4.getLegendBox().setVisible(false);       var str = [{"AssetTypeDesc":"Cash \u0026 Cash Equivalents","EndMarketValue":71591.00},{"AssetTypeDesc":"Equities","EndMarketValue":433724.27},{"AssetTypeDesc":"Taxable Fixed Income","EndMarketValue":151992.77},{"AssetTypeDesc":"Non Taxable Fixed Income","EndMarketValue":97659.32},{"AssetTypeDesc":"Other Securities","EndMarketValue":0.00}];       chart4.getAxisY().getDataFormat().setDecimals(2);   chart4.getView3D().setEnabled(true);   chart4.getAllSeries().getPointLabels().setVisible(true);       chart4.setDataSource(str);       var data = chart4.getData();   data.setSeries(1);   data.setPoints(10);       //var template = '<DataTemplate xmlns:x="a"><DataTemplate.Resources><MultiplyConverter x:Key="multConverter"></MultiplyConverter><StringConverter x:Key="titleConverter"></StringConverter><Thickness x:Key="padding">7</Thickness></DataTemplate.Resources><Canvas Padding="{Binding Path=Padding}"><Border Margin="0,0,0,0" Stroke="#808080" StrokeThickness="2" CornerRadius="12" CornerPercent="0.4" Canvas.Left="0" Canvas.Top="0" Fill="#808080" Segments="{Binding Path=Segments}" StartCorner="{Binding Path=Corner}"><Border.BitmapEffect><BlurBitmapEffect Radius="2"></BlurBitmapEffect></Border.BitmapEffect></Border><Border BorderBrush="#C6C6C6" BorderThickness="1" Background="{Binding Path=Fill}" Opacity="1" CornerPercent="0.4" CornerRadius="12" Segments="{Binding Path=Segments}" StartCorner="{Binding Path=Corner}" Padding="26,8,26,6"><DockPanel x:Name="container" Orientation="Vertical"><TextBlock Text="{Binding Path=Title, Converter={StaticResource titleConverter},ConverterParameter=%u}}" FontSize="{Binding Path=FontSize, Converter={StaticResource multConverter},ConverterParameter=1}" Visible="{Binding Path=TitleVisible}" HorizontalAlignment="Center" Foreground="#3D3D3D" Margin="3,0,3,6"></TextBlock></DockPanel></Border></Canvas></DataTemplate>';   //var tooltips = chart4.getToolTips();   //tooltips.setBorderTemplate(template);   //tooltips.setEnabled(true);       chart4.getToolTips().setEnabled(true);       chart4.getToolTips().setFormat("%l%");       //chart4.getAllSeries().getPointLabels().setVisible(true);   //chart4.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);       chart4.getLegendBox().setVisible(false);   //chart4.getLegendBox().setWidth(500);   //chart4.getLegendBox().setDock(cfx.DockArea.Top);   //chart4.getLegendBox().setContentLayout(cfx.ContentLayout.Center);               var divHolder = document.getElementById('ChartDiv');   chart4.create(divHolder);   }       $(function() {   LoadPieChart();   });       //$(window).resize(function() {   function ResizeChart()   {   if (chart4 != null)   chart4.doUpdate(true);   };       </script>       </li>   </ul>       </div>   </div>           </div>   <hr />   <footer>   <p>© 2014~2015 - Statement Solutions, LLC.</p>   </footer>   </div>   </div>   </div>   <div id="menu">   <nav >   <h2><i class="fa fa-reorder" ></i>Menu</h2>   <ul>   <li>   <a href="/DashBoard">Dashboard</a>   </li>   <li>   <a href="#"><i class="fa fa-user"></i>Accounts</a>   <h2><i class="fa fa-user"></i>Accounts</h2>   <ul>   <li>   <a href="#"><i class="fa fa-wrench"></i>Account Maintenace</a>   <h2><i class="fa fa-wrench"></i>Account Maintenace</h2>   <ul>   <li>   <a href="#">General</a>   </li>   <li>   <a href="#">Joint Acct Info</a>   </li>   <li>   <a href="#">Interested Party Info</a>   </li>   <li>   <a href="#">Investment Objectives</a>   </li>   </ul>   </li>   <li>   <a href="/Aggregates">Aggregates</a>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-book"></i>Account Detail</a>   <h2><i class="fa fa-book"></i>Account Detail</h2>   <ul>   <li>   <a href="/Transactions">Transactions</a>   </li>   <li>   <a href="/Positions">Positions</a>   </li>   <li>   <a href="/Benchmarks/Yields">Benchmark Yields</a>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-paperclip"></i>Reporting</a>   <h2><i class="fa fa-paperclip"></i>Reporting</h2>   <ul>   <li>   <a href="#"><i class="fa fa-calendar"></i>Management Reporting</a>   <h2><i class="fa fa-calendar"></i>Management Reporting</h2>   <ul>   <li>   <a href="#">Acct Transaction Journal</a>   </li>   <li>   <a href="#">Acct Valuation Summary</a>   </li>   <li>   <a href="#">Client Master</a>   </li>   <li>   <a href="#">Client Portfolio by Lot</a>   </li>   <li>   <a href="#">Commission Report</a>   </li>   <li>   <a href="#">Margin Report</a>   </li>   <li>   <a href="#">Money Line Report</a>   </li>   <li>   <a href="#">Security Master</a>   </li>   <li>   <a href="#">Unrealized G/L Report</a>   </li>   </ul>   </li>   <li>   <a href="/Reports/Performance">Performance Report</a>   </li>   <li>   <a href="/ReportBatches">Report Batches</a>   </li>   <li>   <a href="#">Historical Pricing</a>   </li>   <li>   <a href="#">Customer Statements</a>   </li>   <li>   <a href="#">Customer Billing</a>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-gear"></i>System Maintenance</a>   <h2><i class="fa fa-gear"></i>System Maintenance</h2>   <ul>   <li>   <a href="/UserAdministration">User Administration</a>   </li>   <li>   <a href="#"><i class="fa fa-group"></i>Client Administration</a>   <h2><i class="fa fa-group"></i>Client Administration</h2>   <ul>   <li><a href="#">Mgmt Fee Schedule</a></li>   <li>   <a href="/TransTypes">Transaction Type</a>   </li>   <li>   <a href="/Client/Details">Firm Record Setup</a>   </li>   <li>   <a href="/Advisors">Investment Reps</a>   </li>   <li><a href="#">Rep Maintenance</a></li>   <li>   <a href="/AssetTypes">Asset Categorization</a>   </li>   <li>   <a href="/Benchmarks">Benchmark Maintenance</a>   </li>   <li><a href="#">Currency Listings</a></li>   </ul>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-save"></i>My Profile</a>   <h2><i class="fa fa-save"></i>My Profile</h2>   <ul>   <li>   <a href="/Manage/ChangePassword">Change Password</a>   </li>   </ul>   </li>   </ul>   </nav>       </div>   </div>   </div>   </div>       <script src="/Scripts/jquery.multilevelpushmenu.min.js"></script>   <script src="/Scripts/bootstrap_integration.js"></script>       <script src="/Scripts/Gridster/jquery.gridster.js"></script>   <script src="/Scripts/Gridster/gridster-bootstrap.js"></script>   <script src="/Scripts/Gridster/underscore.js"></script>       <script type="text/javascript">   function updateWidget(widget) {   $.ajax({   url: "/Dashboard/UpdateWidget/2" + "?jsonData=" + JSON.stringify(widget),   type: "GET",   dataType: "json",   contentType: 'application/json; charset=utf-8',   cache: false,   processData: false,   success: function (data) {   // success code here   }   });   }       var gridster;       $(function () {   gridster = $(".gridster ul").gridster({   widget_base_dimensions: [160, 155],   widget_margins: [10, 11],       max_cols: 6,   min_cols: 6,       serialize_params: function ($w, wgd) {   return {   x: wgd.col,   y: wgd.row,   width: wgd.size_x,   height: wgd.size_y,   id: $($w).attr('id'),   class: $($w).attr('class'),   htmlContent: $($w).html()   };   },   resize: {   enabled: true,   max_size: [6, 6],   min_size: [2, 2],   stop: function (e, ui, $widget) {   $(".gridster ul li").each(function (index) {   var widget = {   id: $(this).attr("id"),   xaxisval: $(this).attr("data-sizex"),   yaxisval: $(this).attr("data-sizey"),   datarow: $(this).attr('data-row'),   datacol: $(this).attr('data-col')   }       updateWidget(widget);   ResizeChart()   })   }   },   draggable: {   max_size: [6, 6],   min_size: [2, 2],   stop: function (event, ui) {   $(".gridster ul li").each(function (index) {   var widget = {   id: $(this).attr("id"),   xaxisval: $(this).attr("data-sizex"),   yaxisval: $(this).attr("data-sizey"),   datarow: $(this).attr('data-row'),   datacol: $(this).attr('data-col')   }       updateWidget(widget);   })   }   }       }).data('gridster');   });   </script>       <script type="text/javascript" language="javascript">   $(function () {   // TODO: find out which widget has a jChart   chart4.doUpdate(true);   });   </script>       </body>   </html>    

_EmptyLaylout.cshtml:

<!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!-->

<html class="no-js">

<!--<![endif]-->

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@Page.Title - ePortfolio Manager</title>

    <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">

    @RenderSection("styles", required: false)

    <link rel="stylesheet" type="text/css" href="~/Content/jChartfx/Attributes/jchartfx.attributes.css" />

    <link rel="stylesheet" type="text/css" href="~/Content/jChartfx/Palettes/jchartfx.palette.css" />

    @Styles.Render("~/Content/gridster/css")

    <style>

        .gridster * {

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

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")

    @Scripts.Render("~/bundles/jchartfx")

</head>

<body>

    <!--[if lt IE 7]>

        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="//browsehappy.com/">upgrade your browser</a> to improve your experience.</p>

    <![endif]-->

    <div class="container">

        <div id="bodyDiv">

            <div class="row">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                    <div id="pushobj">

                        <div class="navbar-header" style="height:100px">

                            @Html.Partial("_LogoPartial")

                        </div>

                        <div class="navbar-collapse collapse">

                            @Html.Partial("_LoginPartial")

                        </div>

                        <div class="body-content">

                            @Html.Partial("_DashboardTabsPartial")

                            <div class="container tab-content">

                                @RenderBody()

                            </div>

                            <hr />

                            <footer>

                                <p>© 2014~@DateTime.Now.Year - Statement Solutions, LLC.</p>

                            </footer>

                        </div>

                    </div>

                </div>

                <div id="menu">

                    @Html.Partial("_MenuPartial")

                </div>

            </div>

        </div>

    </div>

    @Scripts.Render("~/bundles/multilevelpushmenu")

    @Scripts.Render("~/bundles/gridster")

    <script type="text/javascript">

        function updateWidget(widget) {

            $.ajax({

                url: "@Html.Raw(Url.Action("UpdateWidget", new { id = @ViewBag.DashboardPageId }))" + "?jsonData=" + JSON.stringify(widget),

                type: "GET",

                dataType: "json",

                contentType: 'application/json; charset=utf-8',

                cache: false,

                processData: false,

                success: function (data) {

                    // success code here

                  }

            });

        }

        var gridster;        

        $(function () {

            gridster = $(".gridster ul").gridster({

                widget_base_dimensions: [160, 155],

                widget_margins: [10, 11],

                max_cols: 6,

                min_cols: 6,

                serialize_params: function ($w, wgd) {

                    return {

                        x: wgd.col,

                        y: wgd.row,

                        width: wgd.size_x,

                        height: wgd.size_y,

                        id: $($w).attr('id'),

                        class: $($w).attr('class'),

                        htmlContent: $($w).html()

                    };

                },

                resize: {

                    enabled: true,

                    max_size: [6, 6],

                    min_size: [2, 2],

                    stop: function (e, ui, $widget) {

                        $(".gridster ul li").each(function (index) {

                            var widget = {

                                id: $(this).attr("id"),

                                xaxisval: $(this).attr("data-sizex"),

                                yaxisval: $(this).attr("data-sizey"),

                                datarow: $(this).attr('data-row'),

                                datacol: $(this).attr('data-col')

                            }

                            updateWidget(widget);

                           ResizeChart()      

                        })

                    }

                },

                draggable: {

                    max_size: [6, 6],

                    min_size: [2, 2],

                    stop: function (event, ui) {

                        $(".gridster ul li").each(function (index) {

                            var widget = {

                                id: $(this).attr("id"),

                                xaxisval: $(this).attr("data-sizex"),

                                yaxisval: $(this).attr("data-sizey"),

                                datarow: $(this).attr('data-row'),

                                datacol: $(this).attr('data-col')

                            }

                            updateWidget(widget);

                        })

                    }

                }

            }).data('gridster');

        });

    </script>

    @RenderSection("scripts", required: false)

</body>

</html>

 

AssetAllocation.cshtml:

@model ePortfolio.Models.WidgetViewModel

@using System.Web.Script.Serialization;

<div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">

    <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div>

    <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div>

    @*<div id="header">

        <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%">

            <tr>

                <th class="wdgcenter" style="width:50px">Qty/Shares</th>

                <th class="wdgcenter" style="width:50px">Account #</th>

                <th class="wdgcenter" style="width:50px">% of Portfolio</th>

            </tr>

        </table>

    </div>*@

</div>

<div class="widget-body" style="display:block;overflow:auto;height:90%;width:100%;">

    <div class="widget-content" id="ChartDiv" style="overflow: auto;height:100%;width:100%;"></div>

</div>

   

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

    var chart@(Model.Widget.Id);

    function LoadPieChart() {

        chart@(Model.Widget.Id) = new cfx.Chart();

        chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie);

        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes();

        pieAttr.setLabelsInside(true);

        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%");

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%");

        // chart@(Model.Widget.Id).getLegendBox().setVisible(false);

        var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

        chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2);

        chart@(Model.Widget.Id).getView3D().setEnabled(true);

        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        chart@(Model.Widget.Id).setDataSource(str);

        var data = chart@(Model.Widget.Id).getData();

        data.setSeries(1);

        data.setPoints(10);

        //var template = '<DataTemplate xmlns:x="a"><DataTemplate.Resources><MultiplyConverter x:Key="multConverter"></MultiplyConverter><StringConverter x:Key="titleConverter"></StringConverter><Thickness x:Key="padding">7</Thickness></DataTemplate.Resources><Canvas Padding="{Binding Path=Padding}"><Border Margin="0,0,0,0" Stroke="#808080" StrokeThickness="2" CornerRadius="12" CornerPercent="0.4" Canvas.Left="0" Canvas.Top="0" Fill="#808080" Segments="{Binding Path=Segments}" StartCorner="{Binding Path=Corner}"><Border.BitmapEffect><BlurBitmapEffect Radius="2"></BlurBitmapEffect></Border.BitmapEffect></Border><Border BorderBrush="#C6C6C6" BorderThickness="1" Background="{Binding Path=Fill}" Opacity="1" CornerPercent="0.4" CornerRadius="12" Segments="{Binding Path=Segments}" StartCorner="{Binding Path=Corner}"  Padding="26,8,26,6"><DockPanel x:Name="container" Orientation="Vertical"><TextBlock Text="{Binding Path=Title, Converter={StaticResource titleConverter},ConverterParameter=%u}}" FontSize="{Binding Path=FontSize, Converter={StaticResource multConverter},ConverterParameter=1}" Visible="{Binding Path=TitleVisible}" HorizontalAlignment="Center" Foreground="#3D3D3D" Margin="3,0,3,6"></TextBlock></DockPanel></Border></Canvas></DataTemplate>';

        //var tooltips = chart@(Model.Widget.Id).getToolTips();

        //tooltips.setBorderTemplate(template);

        //tooltips.setEnabled(true);

        chart@(Model.Widget.Id).getToolTips().setEnabled(true);

        

        chart@(Model.Widget.Id).getToolTips().setFormat("%l%");

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

        chart@(Model.Widget.Id).getLegendBox().setVisible(false);

        //chart@(Model.Widget.Id).getLegendBox().setWidth(500);

        //chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Top);

        //chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Center);

        @*chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0);

        chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0);

        chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0);

        chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0);*@

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

        chart@(Model.Widget.Id).create(divHolder);

    }

    $(function() {

        LoadPieChart();

    });

    //$(window).resize(function() {

    function ResizeChart()

    {

        if (chart@(Model.Widget.Id) != null)

            chart@(Model.Widget.Id).doUpdate(true);

    };

</script>

 

Share this post


Link to post
Share on other sites
  • 0

view page source:

 

      <!DOCTYPE html>   <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->   <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->   <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->   <!--[if gt IE 8]><!-->   <html class="no-js">   <!--<![endif]-->   <head>   <meta charset="utf-8" />   <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title> - ePortfolio Manager</title>   <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">       <link rel="stylesheet" type="text/css" href="/Content/jChartfx/Attributes/jchartfx.attributes.css" />   <link rel="stylesheet" type="text/css" href="/Content/jChartfx/Palettes/jchartfx.palette.css" />   <link href="/Content/gridster/app.css" rel="stylesheet"/>   <link href="/Content/gridster/jquery.gridster.css" rel="stylesheet"/>       <style>   .gridster * {   -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>       <link href="/Content/jquery.multilevelpushmenu.css" rel="stylesheet"/>   <link href="/Content/bootstrap_integration.css" rel="stylesheet"/>   <link href="/Content/bootstrap.css" rel="stylesheet"/>   <link href="/Content/bootstrap-theme.css" rel="stylesheet"/>   <link href="/Content/site.css" rel="stylesheet"/>       <script src="/Scripts/modernizr-2.6.2.js"></script>       <script src="/Scripts/jquery-1.10.2.js"></script>       <script src="/Scripts/bootstrap.js"></script>   <script src="/Scripts/respond.js"></script>   <script src="/Scripts/bootstrap-paginator.js"></script>       <script src="/Scripts/jChartFx/jchartfx.system.js"></script>   <script src="/Scripts/jChartFx/jchartfx.coreBasic.js"></script>       </head>   <body>   <!--[if lt IE 7]>   <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="//browsehappy.com/">upgrade your browser</a> to improve your experience.</p>   <![endif]-->       <div class="container">   <div id="bodyDiv">   <div class="row">   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">   <div id="pushobj">   <div class="navbar-header" style="height:100px">   <div class="navbar-brand" style="padding-left: 30px; padding-top: 5px;">   <a class="site-title" href="/">   <img src="/Content/unensjg2.ooq.jpg" alt="Logo" style="height: 90px;">   </a>   <span class="site-desc"></span>   </div>           </div>   <div class="navbar-collapse collapse">   <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="CE6-dSYoVqmUBkDe7nZhAxKA4SmpaF865UnS8Mg2jKYznx_b5rJAqn2b8otByDrWmtlVHRuS6cMcGd6kRzUtJwGHBIIxTnxVu6TJQb1CboMe5bdPME8FNv0gHwLsPyXt_Wr8B4q7BiLfCmYSEwLFzQ2" /> <ul class="nav navbar-nav navbar-right">   <li>   <a href="/Manage" title="Manage">Hello wleung!</a>   </li>   <li>   <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>   </li>   </ul>   </form>       </div>   <div class="body-content">       <ul class="nav nav-tabs">   <li class=""><a href="/Dashboard">HOME</a></li>   <li class="active"><a href="/Dashboard/Aggregate/351">AGGREGATE</a></li>   <li class="disabledTab"><a href="/Dashboard/Account">ACCOUNT</a></li>   <li class=""><a href="/Dashboard/Security">SECURITIES</a></li>   </ul>       <div class="container tab-content">               <div style="text-align: center;vertical-align:middle; width: 100%;">   <br />   <b><span>Title: Wiley, Mary Glenn Moss</span></b>   </div>       <div style="position: relative;height: 100%; width: 100%;">   <div id="columns" class="gridster ready">       <ul style="position: relative;height: 100%; width: 100%;">           <li data-row="1" data-col="4" data-sizex="3" data-sizey="2" id="3" style="border:1px solid;">       <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">   <div class="widget-title text-center" style="padding-top:10px;"><label>ASSET BREAKDOWN</label></div>   <div id="id-refresh-3" class="wdgbkg"> </div>   <div id="header">   <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%">   <tr>   <th class="wdglabel" style="width:65px">Account #</th>   <th class="wdgcenter" style="width:150px">Cash &<br/>Cash Equivalents</th>   <th class="wdgcenter" style="width:65px">Equities</th>   <th class="wdgcenter" style="width:125px">Taxable<br />Fixed Income</th>   <th class="wdgcenter" style="width:150px">Non Taxable<br />Fixed Income</th>   <th class="wdgcenter" style="width:65px">Other</th>   <th class="wdgcenter" style="width:65px">Total</th>   </tr>   </table>   </div>   </div>       <br/>   <br />       <div class="widget-body" style="display:block;overflow:auto;height:85%;width:100%;">   <div class="widget-content">   <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%">   <tfoot>   <tr>   <td class="wdgridge2" colspan="7"></td>   </tr>   </tfoot>   <tbody>   <tr>   <td class="wdglabel wdgridge" style="width:65px">   <a href="/Dashboard/Account/351?AcctNo=011800288%20%20%20">   11800288   </a>   </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $49,979.00       </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $667,228.67   </td>       <td class="wdgnumeric wdgridge" style="width:125px">   $24,264.05       </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $574,540.03   </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $0.00   </td>   <td class="wdgnumeric" style="width:65px">   $1,316,011.75   </td>   </tr>   <tr>   <td class="wdglabel wdgridge" style="width:65px">   <a href="/Dashboard/Account/351?AcctNo=055707243%20%20%20">   55707243   </a>   </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $12,990.00       </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $164,796.30   </td>       <td class="wdgnumeric wdgridge" style="width:125px">   $68,127.45       </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $138,434.95   </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $0.00   </td>   <td class="wdgnumeric" style="width:65px">   $384,348.70   </td>   </tr>       </tbody>   </table>   </div>   </div>       </li>           <li data-row="1" data-col="1" data-sizex="3" data-sizey="2" id="4" style="border:1px solid;">       <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">   <div class="widget-title text-center" style="padding-top:10px;"><label>ASSET ALLOCATION</label></div>   <div id="id-refresh-4" class="wdgbkg"> </div>           </div>       <div class="widget-body" style="display:block;overflow:auto;height:90%;width:100%;">   <div class="widget-content" id="ChartDiv" style="overflow: auto;height:100%;width:100%;"></div>       </div>           <script type="text/javascript" language="javascript">   var chart4;       function LoadPieChart() {       chart4 = new cfx.Chart();       chart4.setGallery(cfx.Gallery.Pie);   chart4.getAllSeries().getPointLabels().setVisible(true);       var pieAttr = chart4.getAllSeries().getGalleryAttributes();       pieAttr.setLabelsInside(true);       //chart4.getAllSeries().getPointLabels().setFormat("%l %p%%");   chart4.getAllSeries().getPointLabels().setFormat("%p%%");       var str = [{"AssetTypeDesc":"Cash \u0026 Cash Equivalents","EndMarketValue":62969.00},{"AssetTypeDesc":"Equities","EndMarketValue":832024.97},{"AssetTypeDesc":"Taxable Fixed Income","EndMarketValue":92391.50},{"AssetTypeDesc":"Non Taxable Fixed Income","EndMarketValue":712974.98},{"AssetTypeDesc":"Other Securities","EndMarketValue":0.00}];       chart4.getAxisY().getDataFormat().setDecimals(2);   chart4.getView3D().setEnabled(true);   chart4.getAllSeries().getPointLabels().setVisible(true);       chart4.setDataSource(str);       var data = chart4.getData();   data.setSeries(1);   data.setPoints(10);       chart4.getToolTips().setEnabled(true);   chart4.getToolTips().setFormat("%l%");       //chart4.getAllSeries().getPointLabels().setVisible(true);   //chart4.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);       chart4.getLegendBox().setVisible(true);   chart4.getLegendBox().setWidth(175);   chart4.getLegendBox().setDock(cfx.DockArea.Right);   chart4.getLegendBox().setContentLayout(cfx.ContentLayout.Near);               var divHolder = document.getElementById('ChartDiv');   chart4.create(divHolder);   }       $(function() {   LoadPieChart();   });       //$(window).resize(function() {   function ResizeChart()   {   if (chart4 != null)   chart4.doUpdate(true);   };       </script>       </li>   </ul>       </div>   </div>           </div>   <hr />   <footer>   <p>© 2014~2015 - Statement Solutions, LLC.</p>   </footer>   </div>   </div>   </div>   <div id="menu">   <nav >   <h2><i class="fa fa-reorder" ></i>Menu</h2>   <ul>   <li>   <a href="/DashBoard">Dashboard</a>   </li>   <li>   <a href="#"><i class="fa fa-user"></i>Accounts</a>   <h2><i class="fa fa-user"></i>Accounts</h2>   <ul>   <li>   <a href="#"><i class="fa fa-wrench"></i>Account Maintenace</a>   <h2><i class="fa fa-wrench"></i>Account Maintenace</h2>   <ul>   <li>   <a href="#">General</a>   </li>   <li>   <a href="#">Joint Acct Info</a>   </li>   <li>   <a href="#">Interested Party Info</a>   </li>   <li>   <a href="#">Investment Objectives</a>   </li>   </ul>   </li>   <li>   <a href="/Aggregates">Aggregates</a>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-book"></i>Account Detail</a>   <h2><i class="fa fa-book"></i>Account Detail</h2>   <ul>   <li>   <a href="/Transactions">Transactions</a>   </li>   <li>   <a href="/Positions">Positions</a>   </li>   <li>   <a href="/Benchmarks/Yields">Benchmark Yields</a>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-paperclip"></i>Reporting</a>   <h2><i class="fa fa-paperclip"></i>Reporting</h2>   <ul>   <li>   <a href="#"><i class="fa fa-calendar"></i>Management Reporting</a>   <h2><i class="fa fa-calendar"></i>Management Reporting</h2>   <ul>   <li>   <a href="#">Acct Transaction Journal</a>   </li>   <li>   <a href="#">Acct Valuation Summary</a>   </li>   <li>   <a href="#">Client Master</a>   </li>   <li>   <a href="#">Client Portfolio by Lot</a>   </li>   <li>   <a href="#">Commission Report</a>   </li>   <li>   <a href="#">Margin Report</a>   </li>   <li>   <a href="#">Money Line Report</a>   </li>   <li>   <a href="#">Security Master</a>   </li>   <li>   <a href="#">Unrealized G/L Report</a>   </li>   </ul>   </li>   <li>   <a href="/Reports/Performance">Performance Report</a>   </li>   <li>   <a href="/ReportBatches">Report Batches</a>   </li>   <li>   <a href="#">Historical Pricing</a>   </li>   <li>   <a href="#">Customer Statements</a>   </li>   <li>   <a href="#">Customer Billing</a>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-gear"></i>System Maintenance</a>   <h2><i class="fa fa-gear"></i>System Maintenance</h2>   <ul>   <li>   <a href="/UserAdministration">User Administration</a>   </li>   <li>   <a href="#"><i class="fa fa-group"></i>Client Administration</a>   <h2><i class="fa fa-group"></i>Client Administration</h2>   <ul>   <li><a href="#">Mgmt Fee Schedule</a></li>   <li>   <a href="/TransTypes">Transaction Type</a>   </li>   <li>   <a href="/Client/Details">Firm Record Setup</a>   </li>   <li>   <a href="/Advisors">Investment Reps</a>   </li>   <li><a href="#">Rep Maintenance</a></li>   <li>   <a href="/AssetTypes">Asset Categorization</a>   </li>   <li>   <a href="/Benchmarks">Benchmark Maintenance</a>   </li>   <li><a href="#">Currency Listings</a></li>   </ul>   </li>   </ul>   </li>   <li>   <a href="#"><i class="fa fa-save"></i>My Profile</a>   <h2><i class="fa fa-save"></i>My Profile</h2>   <ul>   <li>   <a href="/Manage/ChangePassword">Change Password</a>   </li>   </ul>   </li>   </ul>   </nav>       </div>   </div>   </div>   </div>       <script src="/Scripts/jquery.multilevelpushmenu.min.js"></script>   <script src="/Scripts/bootstrap_integration.js"></script>       <script src="/Scripts/Gridster/jquery.gridster.js"></script>   <script src="/Scripts/Gridster/gridster-bootstrap.js"></script>   <script src="/Scripts/Gridster/underscore.js"></script>       <script type="text/javascript">   function updateWidget(widget) {   $.ajax({   url: "/Dashboard/UpdateWidget/2" + "?jsonData=" + JSON.stringify(widget),   type: "GET",   dataType: "json",   contentType: 'application/json; charset=utf-8',   cache: false,   processData: false,   success: function (data) {   // success code here   }   });   }       var gridster;       $(function () {   gridster = $(".gridster ul").gridster({   widget_base_dimensions: [160, 155],   widget_margins: [10, 11],       max_cols: 6,   min_cols: 6,       serialize_params: function ($w, wgd) {   return {   x: wgd.col,   y: wgd.row,   width: wgd.size_x,   height: wgd.size_y,   id: $($w).attr('id'),   class: $($w).attr('class'),   htmlContent: $($w).html()   };   },   resize: {   enabled: true,   max_size: [6, 6],   min_size: [2, 2],   stop: function (e, ui, $widget) {   $(".gridster ul li").each(function (index) {   var widget = {   id: $(this).attr("id"),   xaxisval: $(this).attr("data-sizex"),   yaxisval: $(this).attr("data-sizey"),   datarow: $(this).attr('data-row'),   datacol: $(this).attr('data-col')   }       updateWidget(widget);   ResizeChart()   })   }   },   draggable: {   max_size: [6, 6],   min_size: [2, 2],   stop: function (event, ui) {   $(".gridster ul li").each(function (index) {   var widget = {   id: $(this).attr("id"),   xaxisval: $(this).attr("data-sizex"),   yaxisval: $(this).attr("data-sizey"),   datarow: $(this).attr('data-row'),   datacol: $(this).attr('data-col')   }       updateWidget(widget);   })   }   }       }).data('gridster');   });   </script>       <script type="text/javascript" language="javascript">   $(function () {   // TODO: find out which widget has a jChart   chart4.doUpdate(true);   });   </script>       </body>   </html>  

 

AssetAllocation.cshtml:

@model ePortfolio.Models.WidgetViewModel
@using System.Web.Script.Serialization;

<div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">
    <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div>
    <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div>

    @*<div id="header">
        <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%">
            <tr>

                <th class="wdgcenter" style="width:50px">Qty/Shares</th>
                <th class="wdgcenter" style="width:50px">Account #</th>
                <th class="wdgcenter" style="width:50px">% of Portfolio</th>

            </tr>
        </table>
    </div>*@
</div>

<div class="widget-body" style="display:block;overflow:auto;height:90%;width:100%;">
    <div class="widget-content" id="ChartDiv" style="overflow: auto;height:100%;width:100%;"></div>

</div>  


    <script type="text/javascript" language="javascript">
    var chart@(Model.Widget.Id);

    function LoadPieChart() {

        chart@(Model.Widget.Id) = new cfx.Chart();
       
        chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie);
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes();

        pieAttr.setLabelsInside(true);

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%");
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%");

        var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

        chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2);
        chart@(Model.Widget.Id).getView3D().setEnabled(true);
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        chart@(Model.Widget.Id).setDataSource(str);

        var data = chart@(Model.Widget.Id).getData();
        data.setSeries(1);
        data.setPoints(10);

        chart@(Model.Widget.Id).getToolTips().setEnabled(true);
        chart@(Model.Widget.Id).getToolTips().setFormat("%l%");

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);
        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

        chart@(Model.Widget.Id).getLegendBox().setVisible(true);
        chart@(Model.Widget.Id).getLegendBox().setWidth(175);
        chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right);
        chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);

        @*chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0);*@

        var divHolder = document.getElementById('ChartDiv');
        chart@(Model.Widget.Id).create(divHolder);
    }

    $(function() {
        LoadPieChart();
    });

    //$(window).resize(function() {
    function ResizeChart()
    {
        if (chart@(Model.Widget.Id) != null)
            chart@(Model.Widget.Id).doUpdate(true);
    };

</script>
 

_EmptyLayout.cshtml:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@Page.Title - ePortfolio Manager</title>
    <link href='//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
    @RenderSection("styles", required: false)
    <link rel="stylesheet" type="text/css" href="~/Content/jChartfx/Attributes/jchartfx.attributes.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/jChartfx/Palettes/jchartfx.palette.css" />
    @Styles.Render("~/Content/gridster/css")
    <style>
        .gridster * {
            -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>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jchartfx")
</head>
<body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="//browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="container">
        <div id="bodyDiv">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div id="pushobj">
                        <div class="navbar-header" style="height:100px">
                            @Html.Partial("_LogoPartial")
                        </div>
                        <div class="navbar-collapse collapse">
                            @Html.Partial("_LoginPartial")
                        </div>
                        <div class="body-content">
                            @Html.Partial("_DashboardTabsPartial")
                            <div class="container tab-content">
                                @RenderBody()
                            </div>
                            <hr />
                            <footer>
                                <p>© 2014~@DateTime.Now.Year - Statement Solutions, LLC.</p>
                            </footer>
                        </div>
                    </div>
                </div>
                <div id="menu">
                    @Html.Partial("_MenuPartial")
                </div>
            </div>
        </div>
    </div>
    
    @Scripts.Render("~/bundles/multilevelpushmenu")
    @Scripts.Render("~/bundles/gridster")
    <script type="text/javascript">
        function updateWidget(widget) {
            $.ajax({
                url: "@Html.Raw(Url.Action("UpdateWidget", new { id = @ViewBag.DashboardPageId }))" + "?jsonData=" + JSON.stringify(widget),
                type: "GET",
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                cache: false,
                processData: false,
                success: function (data) {
                    // success code here
                  }
            });
        }

        var gridster;        

        $(function () {
            gridster = $(".gridster ul").gridster({
                widget_base_dimensions: [160, 155],
                widget_margins: [10, 11],

                max_cols: 6,
                min_cols: 6,

                serialize_params: function ($w, wgd) {
                    return {
                        x: wgd.col,
                        y: wgd.row,
                        width: wgd.size_x,
                        height: wgd.size_y,
                        id: $($w).attr('id'),
                        class: $($w).attr('class'),
                        htmlContent: $($w).html()
                    };
                },
                resize: {
                    enabled: true,
                    max_size: [6, 6],
                    min_size: [2, 2],
                    stop: function (e, ui, $widget) {
                        $(".gridster ul li").each(function (index) {
                            var widget = {
                                id: $(this).attr("id"),
                                xaxisval: $(this).attr("data-sizex"),
                                yaxisval: $(this).attr("data-sizey"),
                                datarow: $(this).attr('data-row'),
                                datacol: $(this).attr('data-col')
                            }

                            updateWidget(widget);
                           ResizeChart()      
                        })
                    }
                },
                draggable: {
                    max_size: [6, 6],
                    min_size: [2, 2],
                    stop: function (event, ui) {
                        $(".gridster ul li").each(function (index) {
                            var widget = {
                                id: $(this).attr("id"),
                                xaxisval: $(this).attr("data-sizex"),
                                yaxisval: $(this).attr("data-sizey"),
                                datarow: $(this).attr('data-row'),
                                datacol: $(this).attr('data-col')
                            }

                            updateWidget(widget);
                        })
                    }
                }

            }).data('gridster');
        });
    </script>
    @RenderSection("scripts", required: false)
</body>
</html>
 

Share this post


Link to post
Share on other sites
  • 0

In order to try to fix the bug or provide a workaround, we have to be able to recreate the problem, please post (or email if to products at softwarefx dot com if sensitive) a zip file containing the CSS files used in your page as well as the Scripts (javascript) used by the page.

 

JuanC

Share this post


Link to post
Share on other sites
  • 0

it seems when I added opacity to  jchartfx.attribute.css

 

.jchartfx {
    font-family: Arial;
    font-size: 8pt;
    line-height: normal;
    opacity: .85;
}

 

The tooltip appears but the chart is not as clear.  How can I make both the jChartFx pie chart clear and the tooltip appear clear when move is hovering over it.
 

Share this post


Link to post
Share on other sites
  • 0

By modifying .jchartfx you are modifying the opacity of every drawing, text, etc. for both the chart and tooltip. Please set the fill-opacity for the .jChartFX .Border as suggested in my post.

 

JuanC

Share this post


Link to post
Share on other sites
  • 0

I added  fill-opacity: 0 to the jChartFx CSS file. Below is the CSS file with the changes you recommended.  The tooltip is displayed behind the pie chart.  Please advise.

 

jchartfx.attributes.css:

 

.jchartfx {
    font-family: Arial;
    font-size: 8pt;
    line-height: normal;   
}

.jchartfxToolTip {
    padding: 3px;
    font-size: 9pt;
    font-family: Arial;
    font-weight: bold;
    -moz-border-radius: 3px;
    border-radius: 3px;
    pointer-events: none;
    border-style: solid;
    border-width: 1px;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
     
}

.jchartfxToolTipVisible {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfxToolTipHidden {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfxToolTip2 {
    pointer-events: none;
}

.jchartfxToolTip2Visible {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfxToolTip2Hidden {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfx .Attribute {
    stroke-width: 1;
}

.jchartfx .AttributeLine {
    stroke-width: 3;
}

.jchartfx .MarkerHollow {
    stroke-width: 2;
}

.jchartfx .Marker {
    stroke-width: 2;
}

.jchartfx .Border {
    stroke-width: 1;
    fill-opacity: 0;

}


.jchartfx .PlotArea {
    stroke-width: 1;
}

.jchartfx .PlotArea3D {
    stroke-width: 1;
}

.jchartfx .Title {
    stroke-width: 1;
}

.jchartfx .AxisLine {
    stroke-width: 2;
}

.jchartfx .Title {
    font-size: 11pt;
}

.jchartfx .LegendBox {
    stroke-width: 1;
}

.jchartfx .ScrollBar {
    stroke-width: 1;
}

.jchartfx .LoopMarker {
    stroke-width: 2;
}

.jchartfx .EqualizerTop0 {
    stroke-width: 1;
}

.jchartfx .EqualizerTop1 {
    stroke-width: 1;
}

.jchartfx .EqualizerOff {
    stroke-width: 1;
}

.jchartfx .MapContext {
    stroke-width: 1;
}

.jchartfx .MapWater {
    stroke-width: 1;
}

.jchartfx .MapAttribute {
    stroke-width: 1;
}

.jchartfx .MapRoad {
    stroke-width: 1;
}

.jchartfx .MapRoadBack {
    stroke-width: 3;
}

.jchartfx .MapRoad0 {
    stroke-width: 1;
}

.jchartfx .MapRoad0Back {
    stroke-width: 3;
}

.jchartfx .MapRoad1 {
    stroke-width: 1;
}

.jchartfx .MapRoad1Back {
    stroke-width: 0;
}

.jchartfx .MapTranslationArea {
    stroke-width: 1;
}

.jchartfx .GaugeText {
    font-family: Arial;
    font-size: 8pt;
}

.jchartfx .GaugeTitle {
    font-family: Arial;
    font-size: 10pt;
}

.jchartfx .GaugeTitleLarge {
    font-family: Arial;
    font-size: 40pt;
}

.jchartfx .Separator {
    stroke-width: 1;
}

.jchartfx .DashboardTitle {
    font-family: Arial;
    font-size: 11pt;
}

.jchartfx_container, .jchartfx_container *
{  
    font-family: Arial, sans-serif;
}

.jchartfx_container table {
    border:1px solid;
    font-size:8pt;
    margin:45px 5%;  
    width:90%;
    border-spacing: 0px;
    box-shadow: none !important;
}

.jchartfx_container table thead tr th {
    border:1px solid;  
    border-bottom:1px solid;
    text-align: left;
    padding:5px;
    font-weight: normal;
}

.jchartfx_container table tbody tr td {
    padding:5px;
    border:1px solid;
}

.jchartfx_container .labelIndicator {
    text-align:center;
    margin-top: 48px;
    font-size:18pt;
    line-height:1em;
}

.jchartfx_container .label {
    text-align: center;
    font-size: 14pt;
    line-height:1em;
    display: table !important;   
}

.jchartfx_container .smallLabel {
    font-size: 8pt;
    text-align: center;
    vertical-align:middle;
    line-height:1em;
}

.jchartfx .BorderMedium {
    stroke-width: 4;
}

.jchartfx .BorderThick {
    stroke-width: 8;
}

.jchartfx .Border0 {
    stroke-width: 1;
}

.jchartfx .Border1 {
    stroke-width: 1;
}

.jchartfx .Border2 {
    stroke-width: 1;
}

.jchartfx .Border3 {
    stroke-width: 1;
}

.jchartfx .Border4 {
    stroke-width: 1;
}

.jchartfx .Border5 {
    stroke-width: 1;
}

.jchartfx .Border6 {
    stroke-width: 1;
}

.jchartfx .Border7 {
    stroke-width: 1;
}

.jchartfx .StackedLabel {
    font-family: Arial;
    font-size: 8pt;
}

Share this post


Link to post
Share on other sites
  • 0

Below is the code to render the jChartfx pie chart. Please advise why the tooltip is behind the chart.

 

function LoadPieChart() {

        chart@(Model.Widget.Id) = new cfx.Chart();

        chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie);
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes();

        pieAttr.setLabelsInside(true);
        pieAttr.setExplodingMode(cfx.ExplodingMode.First);

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%");
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%");

        var str = @Html.Raw(Json.Encode(ViewData["Account Asset Allocations Chart"]));

        chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2);
        chart@(Model.Widget.Id).getView3D().setEnabled(true);
        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        chart@(Model.Widget.Id).setDataSource(str);

        @*
        var fields = chart@(Model.Widget.Id).getDataSourceSettings().getFields();
        var fieldVal = new cfx.FieldMap();
        fieldVal.setName("%l%");
        fieldVal.setUsage(cfx.FieldUsage.Value);
        fields.add(fieldVal);
        *@

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var data = chart@(Model.Widget.Id).getData();
        data.setSeries(1);
        data.setPoints(10);

        chart@(Model.Widget.Id).getToolTips().setEnabled(true);
        chart@(Model.Widget.Id).getToolTips().setAlignment("near");
        chart@(Model.Widget.Id).getToolTips().setFormat("%l%");

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);
        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

        chart@(Model.Widget.Id).getLegendBox().setVisible(true);
        chart@(Model.Widget.Id).getLegendBox().setWidth(175);
        chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right);
        chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);

        chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0);


        var divHolder = document.getElementById('ChartDiv');
        chart@(Model.Widget.Id).create(divHolder);
    }

    $(function() {
        LoadPieChart();
    });

    //$(window).resize(function() {
    function ResizeChart()
    {
        if (chart@(Model.Widget.Id) != null)
            chart@(Model.Widget.Id).doUpdate(true);
    };

Share this post


Link to post
Share on other sites
  • 0

Below is the page:

 

@model ePortfolio.Models.WidgetViewModel
@using System.Web.Script.Serialization;

<div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">
    <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div>
    <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div>

    @*<div id="header">
            <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%">
                <tr>

                    <th class="wdgcenter" style="width:50px">Qty/Shares</th>
                    <th class="wdgcenter" style="width:50px">Account #</th>
                    <th class="wdgcenter" style="width:50px">% of Portfolio</th>

                </tr>
            </table>
        </div>*@
</div>

<div class="widget-body" style="display:block;overflow: visible;height:100%;width:100%;">
    <div class="widget-content" id="ChartDiv" style="overflow: visible;height:90%;width:100%;"></div>

</div>


<script type="text/javascript" language="javascript">
    var chart@(Model.Widget.Id);

    function LoadPieChart() {

        chart@(Model.Widget.Id) = new cfx.Chart();

        chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie);
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes();

        pieAttr.setLabelsInside(true);
        pieAttr.setExplodingMode(cfx.ExplodingMode.First);

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%");
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%");

        var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

        chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2);
        chart@(Model.Widget.Id).getView3D().setEnabled(true);
        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        chart@(Model.Widget.Id).setDataSource(str);      

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var data = chart@(Model.Widget.Id).getData();
        data.setSeries(1);
        data.setPoints(10);

        chart@(Model.Widget.Id).getToolTips().setEnabled(true);
        chart@(Model.Widget.Id).getToolTips().setAlignment("near");
        chart@(Model.Widget.Id).getToolTips().setFormat("%l%");

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);
        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR);

        chart@(Model.Widget.Id).getLegendBox().setVisible(true);
        chart@(Model.Widget.Id).getLegendBox().setWidth(175);
        chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right);
        chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);

        chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0);

        var divHolder = document.getElementById('ChartDiv');
        chart@(Model.Widget.Id).create(divHolder);
    }

    $(function() {
        LoadPieChart();
    });

    //$(window).resize(function() {
    function ResizeChart()
    {
        if (chart@(Model.Widget.Id) != null)
            chart@(Model.Widget.Id).doUpdate(true);
    };

</script>
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×