jQWidgets Forums
jQuery UI Widgets › Forums › Chart › multiple tooltip in charts
Tagged: 100%, 100percent stacked, Angular, angularjs, chart, IE8, Internet Explorer 8, jqxChart, multiple tooltip, stacked column, stackedcolumn100, Tooltip
This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 10 years, 1 month ago.
-
Author
-
Hi,
There are time in IE8 that in my 100% stacked column chart the tooltip gets freezed. Thus, it so happens that the client sees 2 tooltips at a same given point of time.
Please advise as to how this can be avoided.
Image URL: http://postimg.org/image/3x888x64d/
Hi vinodn,
We tested the demo 100% Stacked Columns with Internet Explorer 8 but did not experience this issue. Please make sure you are using the latest version of jQWidgets (3.7.1).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/We are using version 3.6.0 and the product for which we are using is under last phase of UAT signoff. So it will be kind if you let us know the difference between version 3.6.0 so we can be better prepared for the upgrade.
Hi vinodn,
We suggest you check for any breaking changes since version 3.6.0 in the Release History and the API Documentation and demos for the latest API changes and functionalities of jqxChart.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Sure, will do that.
In the meantime, could you please have a look at the below snippet and let us know if we are doing something wrong? We are using jqxchart along with angular js.
=====================================
p_ObjScope.Asset_data = p_ObjRootItem;
p_ObjScope.Asset_title = “”;
p_ObjScope.Asset_description = “”;
p_ObjScope.Asset_enableAnimations = true;
p_ObjScope.Asset_showLegend = true;
p_ObjScope.Asset_toolTipShowDelay = 100;
p_ObjScope.Asset_toolTipHideDelay = 2000;
p_ObjScope.Asset_borderLineColor = ‘White’;
p_ObjScope.Asset_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
p_ObjScope.Asset_padding = { left: 0, top: 10, right: 120, bottom: 0 };
p_ObjScope.Asset_legendLayout = { left: 540, top: 0, width: 300, height: 200, flow: ‘vertical’ };
p_ObjScope.Asset_categoryAxis =
{
dataField: ‘aum_date’,
displayText: ‘AUM Date’,
showGridLines: false,
showTickMarks: false,
formatFunction: function (value) {
if (isNaN(value)) {
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
var l_StrDateArray = value.split(“-“);
return l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-‘ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-‘ + l_StrDateArray[0];
}
}
};
p_ObjScope.Asset_colorScheme = ‘myScheme’;p_ObjScope.Asset_seriesGroups =
[
{
type: ‘stackedcolumn100’,
columnsGapPercent: 100,
seriesGapPercent: 5,
skipOverlappingPoints: false,
enableSeriesToggle: false,
valueAxis:
{
unitInterval: 20,
minValue: 0,
maxValue: 120,
showTickMarks: false
},
toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
var l_StrDateArray = categoryValue.split(“-“);
return ‘<DIV style=”text-align:center;padding:1px”>AUM Date: ‘ + l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-‘ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-‘ + l_StrDateArray[0] + ‘<br /> Asset Class: ‘ + serie.displayText + ‘<br />’ + parseFloat(value).toFixed(1) + ‘% </DIV>’;
},
series: [
{ dataField: ‘Alternate’, displayText: ‘Alternate’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Cash’, displayText: ‘Cash’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Debt’, displayText: ‘Debt’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Equity’, displayText: ‘Equity’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Real Estate’, displayText: ‘Real Estate’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } }
]
}
];
=====================================Hi vinodn,
Is the chart not displayed or is there some error thrown in your browser console? Please clarify this. Make sure you check out the AngularJS chart demo, too.
If you need further assistance, please share a complete example we can test locally to determine the source of the issue. Remember to format your code by selecting it and clicking the
code
button in the toolbar.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/No. The renders just fine. No error in the browser console too. It’s just that when user hovers on a particular bar the tooltip shows up just fine. But when user hovers over another bar, the old tooltip doesn’t fade away and the new tooltip also shows up. So now the user sees 2 tooltips at a same time.
Please find the formatted code below.
p_ObjScope.Asset_data = p_ObjRootItem; p_ObjScope.Asset_title = “”; p_ObjScope.Asset_description = “”; p_ObjScope.Asset_enableAnimations = true; p_ObjScope.Asset_showLegend = true; p_ObjScope.Asset_toolTipShowDelay = 100; p_ObjScope.Asset_toolTipHideDelay = 2000; p_ObjScope.Asset_borderLineColor = ‘White’; p_ObjScope.Asset_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 }; p_ObjScope.Asset_padding = { left: 0, top: 10, right: 120, bottom: 0 }; p_ObjScope.Asset_legendLayout = { left: 540, top: 0, width: 300, height: 200, flow: ‘vertical’ }; p_ObjScope.Asset_categoryAxis = { dataField: ‘aum_date’, displayText: ‘AUM Date’, showGridLines: false, showTickMarks: false, formatFunction: function (value) { if (isNaN(value)) { var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var l_StrDateArray = value.split(“-”); return l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-’ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-’ + l_StrDateArray[0]; } } }; p_ObjScope.Asset_colorScheme = ‘myScheme’; p_ObjScope.Asset_seriesGroups = [ { type: 'stackedcolumn100', columnsGapPercent: 100, seriesGapPercent: 5, skipOverlappingPoints: false, enableSeriesToggle: false, valueAxis: { unitInterval: 20, minValue: 0, maxValue: 120, showTickMarks: false }, toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) { var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var l_StrDateArray = categoryValue.split(“-”); return ‘<DIV style=”text-align:center;padding:1px”>AUM Date: ‘ + l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-’ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-’ + l_StrDateArray[0] + ‘<br /> Asset Class: ‘ + serie.displayText + ‘<br />’ + parseFloat(value).toFixed(1) + ‘% </DIV>’; }, series: [ { dataField: 'Alternate', displayText: 'Alternate', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } }, { dataField: 'Cash', displayText: 'Cash', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } }, { dataField: 'Debt', displayText: 'Debt', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } }, { dataField: 'Equity', displayText: 'Equity', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } }, { dataField: 'Real Estate', displayText: 'Real Estate', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } } ] } ];
Hi vinodn,
The provided code is not a complete example including the HTML and chart data source. It is also not correctly formatted (with indentations, as appears in your development environment). Please provide us with such an example. Please also test your code with the latest version and share if the issue occurs with it, too.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.