Jump to content
JChartFX Community
  • 0

Tooltip for Pie chart does not work

StatementSolutions

Asked by StatementSolutions,

 Share

Question

StatementSolutions Newbie

StatementSolutions

Posted
Posted

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

 

 

 

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
JuanC Newbie

JuanC

Posted
Posted

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

Link to comment
Share on other sites
  • 0
JuanC Newbie

JuanC

Posted
Posted

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

Link to comment
Share on other sites
  • 0
StatementSolutions Newbie

StatementSolutions

Posted
  • Author
Posted

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>
 

Link to comment
Share on other sites
  • 0
JuanC Newbie

JuanC

Posted
Posted

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

Link to comment
Share on other sites
  • 0
StatementSolutions Newbie

StatementSolutions

Posted
  • Author
Posted

  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>

 

Link to comment
Share on other sites
  • 0
StatementSolutions Newbie

StatementSolutions

Posted
  • Author
Posted

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>
 

Link to comment
Share on other sites
  • 0
JuanC Newbie

JuanC

Posted
Posted

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

Link to comment
Share on other sites
  • 0
StatementSolutions Newbie

StatementSolutions

Posted
  • Author
Posted

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.
 

Link to comment
Share on other sites
  • 0
StatementSolutions Newbie

StatementSolutions

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
StatementSolutions Newbie

StatementSolutions

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
StatementSolutions Newbie

StatementSolutions

Posted
  • Author
Posted

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>
 

Link to comment
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...
×
 Share
Go to question listing
×
×
  • Create New...