Tooltip when hovering an area of the chart

StatementSolutions · November 4, 2015

Is there a way to when hovering a cursor over an area of a chart it displays a text descipton of that area?

JuanC · November 9, 2015

See answer at http://community.jchartfx.com/topic/453-tooltip-for-pie-chart-does-not-work/

We need CSS and Scripts files in order to recreate issue so that we can try to fix it or provide a workaround.

JuanC

JuanC · November 5, 2015

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

StatementSolutions · November 9, 2015

View Page Source:

<!DOCTYPE html>

<head>

<title> - ePortfolio Manager</title>

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

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

</a>

</div>

<li>

<a href="/Manage" title="Manage">Hello wleung!</a>

</li>

<li>

</li>

</ul>

</form>

</div>

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

<br />

<b><span>Title: Steel, Joan </span></b>

</div>

<div class="widget-title text-center" style="padding-top:10px;"><label>ASSET BREAKDOWN</label></div>

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

<br/>

<br />

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

52258649

</a>

</td>

$47,210.00

</td>

$87,880.80

</td>

$31,034.10

</td>

$46,609.05

</td>

$0.00

</td>

$212,733.95

</td>

</tr>

<tr>

86318467

</a>

</td>

$20,381.00

</td>

$339,288.99

</td>

$120,312.73

</td>

$50,974.19

</td>

$0.00

</td>

$530,956.91

</td>

</tr>

</tbody>

</table>

</div>

</li>

<div class="widget-title text-center" style="padding-top:10px;"><label>ASSET ALLOCATION</label></div>

</div>

</div>

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>

<hr />

</footer>

</div>

<nav >

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

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>

$(function () {

// TODO: find out which widget has a jChart

chart4.doUpdate(true);

});

</script>

</body>

</html>

StatementSolutions · November 9, 2015

View Page Source: <!DOCTYPE html>     <html class="no-js">  <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>  <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>

StatementSolutions · November 9, 2015

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.

StatementSolutions · November 9, 2015

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>

Sign In

Tooltip when hovering an area of the chart

Question

StatementSolutions

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

JuanC

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

StatementSolutions

Link to comment

Share on other sites

StatementSolutions

Link to comment

Share on other sites

StatementSolutions

Link to comment

Share on other sites

StatementSolutions

Link to comment

Share on other sites

Join the conversation

Browse

Activity