Jump to content
JChartFX Community
  • 0

Tooltip when hovering an area of the chart


Go to solution Solved by JuanC,

Question

6 answers to this question

Recommended Posts

  • 0

Can you describe what you mean by "an area of a chart"?

 

If you mean one of the chart markers (bars, pie slices, etc.) we should already be displaying a tooltip when you hover.

 

If you mean a separate "custom" area, you should be able to create an annotation and attach a tooltip to it, provided that the annotations we support allow you to define your area.

 

Please post or send an image to understand your scenario better.

 

Regards,

 

JuanC

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="iti9p8tgcfZUcbpg9hveUqKEDmvZ_rqB1JLtgImHZ3uoU1JlzTqik5jMYTgDiZ3Z71DLOEqX0_9IjJM9n85dCYtBDBps1EWAXLcbhtdeSjGjMhfTEhuI9l5Jjz7X2QBMFKNkylOj9NJaSEf6oRemnA2" /> <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="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/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">

 

$87,880.80

 

</td>

 

 

 

<td class="wdgnumeric wdgridge" style="width:125px">

 

$31,034.10

 

 

 

</td>

 

<td class="wdgnumeric wdgridge" style="width:150px">

 

$46,609.05

 

</td>

 

<td class="wdgnumeric wdgridge" style="width:65px">

 

$0.00

 

</td>

 

<td class="wdgnumeric" style="width:65px">

 

$212,733.95

 

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

 

$20,381.00

 

 

 

</td>

 

<td class="wdgnumeric wdgridge" style="width:65px">

 

$339,288.99

 

</td>

 

 

 

<td class="wdgnumeric wdgridge" style="width:125px">

 

$120,312.73

 

 

 

</td>

 

<td class="wdgnumeric wdgridge" style="width:150px">

 

$50,974.19

 

</td>

 

<td class="wdgnumeric wdgridge" style="width:65px">

 

$0.00

 

</td>

 

<td class="wdgnumeric" style="width:65px">

 

$530,956.91

 

</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":67591.00},{"AssetTypeDesc":"Equities","EndMarketValue":427169.79},{"AssetTypeDesc":"Taxable Fixed Income","EndMarketValue":151346.83},{"AssetTypeDesc":"Non Taxable Fixed Income","EndMarketValue":97583.24},{"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>

 

 

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="iti9p8tgcfZUcbpg9hveUqKEDmvZ_rqB1JLtgImHZ3uoU1JlzTqik5jMYTgDiZ3Z71DLOEqX0_9IjJM9n85dCYtBDBps1EWAXLcbhtdeSjGjMhfTEhuI9l5Jjz7X2QBMFKNkylOj9NJaSEf6oRemnA2" /> <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="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/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">   $87,880.80   </td>       <td class="wdgnumeric wdgridge" style="width:125px">   $31,034.10       </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $46,609.05   </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $0.00   </td>   <td class="wdgnumeric" style="width:65px">   $212,733.95   </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">   $20,381.00       </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $339,288.99   </td>       <td class="wdgnumeric wdgridge" style="width:125px">   $120,312.73       </td>   <td class="wdgnumeric wdgridge" style="width:150px">   $50,974.19   </td>   <td class="wdgnumeric wdgridge" style="width:65px">   $0.00   </td>   <td class="wdgnumeric" style="width:65px">   $530,956.91   </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":67591.00},{"AssetTypeDesc":"Equities","EndMarketValue":427169.79},{"AssetTypeDesc":"Taxable Fixed Income","EndMarketValue":151346.83},{"AssetTypeDesc":"Non Taxable Fixed Income","EndMarketValue":97583.24},{"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>    

 

Link to post
Share on other sites
  • 0

I can't attach an image of the website with the jChartFx pie chart which I want to add a tooltip.  This JChartFx pie chart is on a widget that is draggable and resizeable.  I should be able to hoveer the mouse over an area of the jChartFx pie chart and the tooltip should appear but it seems that the tooltip is appearing behind the widget.

Link to post
Share on other sites
  • 0

I want to get the tooltip to appear on top of the jChartFX pie chart not behind it.  I created a draggable and resizeable widget.  It seems that the tooltip appears behind the page where I have the jChartFx pie chart at..

 

Code:

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...