jQWidgets Forums

jQuery UI Widgets Forums Chart multiple tooltip in charts

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 10 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • multiple tooltip in charts #69014

    vinodn
    Participant

    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/

    multiple tooltip

    multiple tooltip in charts #69039

    Dimitar
    Participant

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

    jQWidgets team
    http://www.jqwidgets.com/

    multiple tooltip in charts #69078

    vinodn
    Participant

    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.

    multiple tooltip in charts #69088

    Dimitar
    Participant

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

    jQWidgets team
    http://www.jqwidgets.com/

    multiple tooltip in charts #69165

    vinodn
    Participant

    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) + ‘%’; } } }
    ]
    }
    ];
    =====================================

    multiple tooltip in charts #69184

    Dimitar
    Participant

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

    jQWidgets team
    http://www.jqwidgets.com/

    multiple tooltip in charts #69375

    vinodn
    Participant

    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) + '%'; } } }
    ]
    }
    ];
    
    multiple tooltip in charts #69413

    Dimitar
    Participant

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

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.