Tooltip on chart not shows

[GandalvParticipant]

Hi. Iam new in jqwidjets.
I create chart in div(position: relative; float: left; width: 100%; height: 500px;)
Chart settings:
var settings = {
title: sensor.Name,
description: “”,
showToolTips:true,
enableAnimations: true,
showLegend: true,
padding: { left: 15, top: 5, right: 20, bottom: 5 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
source: source,
xAxis:
{
dataField: ‘Date’,
//minValue: source[0].Date,
//maxValue: source[source.length-1].Date,
//unitInterval: 3600000,
valuesOnTicks: true,
type:’date’,
baseUnit:’minute’
},
colorScheme: ‘scheme05’,
seriesGroups:
[
{
alignEndPointsWithIntervals: false,
type: ‘area’,
toolTipFormatFunction: toolTipCustomFormatFn,
valueAxis:
{
visible: true,
unitInterval: 1,
minValue: min,
maxValue: max,
title: {text: ‘Температура’},
labels: {
horizontalAlignment: ‘right’,
formatSettings: {decimalPlaces: 0}
}
},
series: [
{ dataField: ‘Temp’, displayText: ‘Температура’, opacity: 0.7 }
]
}
]
};
// setup the chart
$(graph).jqxChart(settings);

Chart draws and works, but tooltip not shown, only arrow visible.
Div with tooltip has always style <div class=”jqx-rc-all jqx-button” style=”position: absolute; cursor: default; overflow: hidden; display: none;”><span class=”jqx-chart-tooltip-text”>ghfghh</span></div>

I don’t know why it’s always display:none.
JQW version 4.0.0

[GandalvParticipant]

[HristoParticipant]

Hello Gandalv,

This part of Your code looks good.
Is it possible some settings in Your ‘toolTipCustomFormatFn’ function to affect on this way.
Please take a look this article could be useful:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-getting-started.htm?search=
If you still have same issue please try to provide us some examples which demonstrate this or whole code for better analyze.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[GandalvParticipant]

Custom function code:
function toolTipCustomFormatFn(value, itemIndex, serie, group, xAxisValue, xAxis) {
return ‘ghfghh’;
};

And if i remove this function from settings result not changes. It’s magic

[GandalvParticipant]

My steps for building chart:
1. create div

var graph = document.createElement('div');
        $(graph).addClass('ExtendedWidgetGraph');        
        edit.appendChild(graph);

2. prepare data

var source = [];
            var min,max;
            for(var i=0;i<data.length;i++)
            {
                if((data[i][1]>=range.min) &&(data[i][1]<=range.max)) {
                    source.push({Date: data[i][1], Temp: data[i][0]});
                    if (min == undefined)
                        min = data[i][0];
                    else if (min > data[i][0])
                        min = data[i][0];
                    if (max == undefined)
                        max = data[i][0];
                    else if (max < data[i][0])
                        max = data[i][0];
                }
            }
            if(min == undefined)min = 0;else min--;
            if(max == undefined)max = 2;else max++;

3. prepare settings

var settings = {
                title: sensor.Name,
                description: "",
                showToolTips:true,
                enableAnimations: true,
                showLegend: true,
                padding: { left: 15, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                source: source,
                xAxis:
                {
                    dataField: 'Date',
                    //minValue: source[0].Date,
                    //maxValue: source[source.length-1].Date,
                    unitInterval: 18000000,
                    valuesOnTicks: true,
                    //type:'date',
                    //baseUnit:'minute',
                    labels:
                    {
                        formatFunction:FormatDateToChart
                    }
                },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            alignEndPointsWithIntervals: false,
                            type: 'area',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                visible: true,
                                unitInterval: 1,
                                minValue: min,
                                maxValue: max,
                                title: {text: 'Температура'},
                                labels: {
                                    horizontalAlignment: 'right',
                                    formatSettings: {decimalPlaces: 0}
                                }
                            },
                            series: [
                                { dataField: 'Temp', displayText: 'Температура', opacity: 0.7 }
                            ]
                        }
                    ]
            };

4. Draw chart

 // setup the chart
            $(graph).jqxChart(settings);

[HristoParticipant]

Hello Gandalv,

Thank you for using our product.
Better way to create the Chart is to create a DIV element inside the body of your page.
Give the DIV element an ID like ‘chartContainer’ or something that you like.
In Your code have some elements with classes from our library but they are used to make fine CSS settings.
Please take a look this example: http://jsfiddle.net/txhi/bfqxb2bq/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[milesdParticipant]

I have the same issue in a dynamically created chart in a jqxwindow. Just shows the arrow and not the tooltip bubble. Just like the image above. Was this ever resolved?

[HristoParticipant]

Hello milesd,

Please provide Your code for better analyze. (better in https://www.jseditor.io/)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts