jQuery UI Widgets Forums Chart There is a phenomenon that the tooltip remains when moving the wheel with the mo

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  svetoslav_borislavov 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • jmshim
    Participant

    hello i have problem

    There is a phenomenon that the tooltip remains when moving the wheel with the mouse on one of the values ​​of the chart x-axis.

    Take a look at Figure 1 below, I hovered over the chart as shown in the picture.

    step1

    If you look at Figure 2, there is a phenomenon that the tooltip remains as it is when scrolling. What should I do to correct this phenomenon?

    step2

    Any help would be greatly appreciated.

    • This topic was modified 10 months ago by  jmshim.

    Hi,

    Can you please, share your chart settings?
    It would be easier for us to reproduce the problem!

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/


    jmshim
    Participant

    Even in the demo this is implemented. If you hover the mouse over the chart and scroll down, the tooltip stays there and disappears after 3 seconds.
    Below is the setting.

    function drawPopupChart(vData){

    let otel = [
    {
    type: “line”,
    series: [
    {
    dataField: ‘HPRICE’,
    displayText: ‘부동산114시세(상한)’,
    color: ‘#009688’,
    toolTipFormatFunction:function(value, itemIndex) {
    return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
    ‘ 부동산114시세(상한) : ‘ + Math.round(vData[itemIndex].HPRICE).toLocaleString(‘ko-KR’);
    },
    toolTipFormatSettings: {
    thousandsSeparator: “,”
    },
    opacity: 0.7
    },
    {
    dataField: ‘LPRICE’,
    displayText: ‘부동산114시세(하한)’,
    color: ‘#F2B53F’,
    toolTipFormatFunction:function(value, itemIndex) {
    return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
    ‘ 부동산114시세(하한) : ‘ + Math.round(vData[itemIndex].LPRICE).toLocaleString(‘ko-KR’);
    },
    toolTipFormatSettings: {
    thousandsSeparator: “,”
    },
    opacity: 0.7
    },
    {
    dataField: ‘APRICE’,
    displayText: ‘시세 평균’,
    color: ‘#FF5252’,
    toolTipFormatFunction:function(value, itemIndex) {
    return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
    ‘ 시세 평균 : ‘ + Math.round(vData[itemIndex].APRICE).toLocaleString(‘ko-KR’);
    },
    toolTipFormatSettings: {
    thousandsSeparator: “,”
    },
    opacity: 0.7
    }
    ]
    }
    ];

    let apt =[
    {
    type: “line”,
    series: [
    {
    dataField: ‘HPRICE’,
    displayText: ‘부동산114시세(상한)’,
    color: ‘#009688’,
    toolTipFormatFunction:function(value, itemIndex) {
    return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
    ‘ 부동산114시세(상한) : ‘ + Math.round(vData[itemIndex].HPRICE).toLocaleString(‘ko-KR’);
    },
    toolTipFormatSettings: {
    thousandsSeparator: “,”
    },
    opacity: 0.7
    },
    {
    dataField: ‘LPRICE’,
    displayText: ‘부동산114시세(하한)’,
    color: ‘#F2B53F’,
    toolTipFormatFunction:function(value, itemIndex) {
    return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
    ‘ 부동산114시세(하한) : ‘ + Math.round(vData[itemIndex].LPRICE).toLocaleString(‘ko-KR’);
    },
    toolTipFormatSettings: {
    thousandsSeparator: “,”
    },
    opacity: 0.7
    },
    {
    dataField: ‘APRICE’,
    displayText: ‘시세 평균’,
    color: ‘#FF5252’,
    toolTipFormatFunction:function(value, itemIndex) {
    return ‘ 시점 : ‘ + vData[itemIndex].TD + ‘</br>’ +
    ‘ 시세 평균 : ‘ + Math.round(vData[itemIndex].APRICE).toLocaleString(‘ko-KR’);
    },
    toolTipFormatSettings: {
    thousandsSeparator: “,”
    },
    opacity: 0.7
    }
    ]
    },
    {
    type: “scatter”,
    series: [
    {
    dataField: ‘PRICE’
    ,symbolSize: 4
    ,color: ‘#FC6A08’
    ,symbolType: ‘diamond’
    ,displayText: ‘국토교통부 실거래가격’
    ,toolTipFormatFunction:function(value, itemIndex) {
    return vData[itemIndex].FLR ;
    }
    }
    ]
    }
    ];

    var settings = {
    title: ”,
    description: null,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 20, top: 20, right: 20, bottom: 20 },
    titlePadding: { left: 10, top: 0, right: 0, bottom: 0 },
    source: null,
    xAxis: {
    dataField: ‘TD’,
    displayText: ‘시점’,
    type: ‘date’, //date, basic, linear
    baseUnit: ‘month’,
    dateFormat: “yyyy.MM.dd”,
    toolTipFormatSettings: {
    dateFormat: “yyyy.MM.dd”
    },
    logarithmicScale: false,
    logarithmicScaleBase: 2
    },
    valueAxis: {
    position : ‘left’,
    gridLines: {
    visible: false
    },
    axisSize: “auto”,
    position: “left”,
    formatSettings: { thousandsSeparator: “,” }
    },
    seriesGroups: []
    };

    if(!isEmpty(vData)){
    var dataAdapter = new $.jqx.dataAdapter({
    localdata: vData,
    datafields: [
    {name: “TD”, type: “date”},
    {name: “HPRICE”, type: “number”},
    {name: “LPRICE”, type: “number”},
    {name: “APRICE”, type: “number”},
    {name: “PRICE”, type: “number”},
    ]
    });

    settings.source = dataAdapter;
    }

    let chartId = ”;

    switch(vGbId){
    case ‘OTEL’:
    settings.seriesGroups = otel;
    chartId = ‘#otelPriceCht’;
    break;
    case ‘APT’:
    settings.seriesGroups = apt;
    chartId = ‘#aptPriceCht’;

    break;
    }
    $(chartId).jqxChart(settings);

    }

    Hi,

    Please provide us with a working demo in jsfiddle.
    You can edit the following one: http://jsfiddle.net/7hxq9ty2/4/

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

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

You must be logged in to reply to this topic.