jQWidgets Forums

Tagged: chart, hover, jqxChart, showToolTip, Tooltip

This topic contains 4 replies, has 3 voices, and was last updated by Nadezhda 10 years, 1 month ago.

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

Author

Permanent Tooltips Posts

April 8, 2015 at 8:56 pm Permanent Tooltips #69693

Participant

Is it possible to automatically display a (all of / a subsection) of the tool-tips on a scatter chart permanently when the chart loads so that a user doesn’t have to hover over the points to see each points tool-tip?

Or is there any other way to place a box of text next to each scatter point with information?

I’d like to display this sort of information on a scatter chart such as the one below:
http://jsfiddle.net/vn5x1w3q/

Thanks

April 9, 2015 at 2:37 pm Permanent Tooltips #69715

Nadezhda

Participant

Hello DavidRogers,

You can use ‘showToolTip’ method to make tooltip visible without hover. In order to achieve it you should include jqxchart.api.js to access this API function.

Best Regards,
Nadezhda

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

April 9, 2015 at 4:19 pm Permanent Tooltips #69720

DavidRogers

Participant

It doesn’t appear that the JQWidget Chart’s “showToolTip” property is any more than a Boolean variable:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-tooltips-documentation.htm
http://jsfiddle.net/95h0kee1/

Feeding true or false to this value doesn’t produce the required results. Could provide a example of this/or a similar implementation?

I’m am using “jqx-all.js” version “3.7.1”, I assume that has included within it “jqxchart.api.js”, is that a correct assumption?

April 10, 2015 at 5:09 am Permanent Tooltips #69730

yoda

Participant

Hi David,

Are you actually looking for labels and not tooltips?

See the example below or just add the following to your series: labels: {visible: true}

Code:

  $('#chartContainer').jqxChart({
        title: false,
        description: false,
        showBorderLine: false,
        padding: {
            left: 5,
            top: 5,
            right: 5,
            bottom: 5
        },
        showToolTips: true,
        toolTipShowDelay: 0,
        toolTipHideDelay: 2000,
        xAxis: {
            dataField: "X",
            valuesOnTicks: false,
            gridLines: {
                visible: true
            },
            title: {text: "XXXX"}
        },
        colorScheme: "scheme01",
        seriesGroups: [
            {
                type: "scatter",
                valueAxis: {
                    minValue: 0,
                    maxValue: 105.60000000000001,
                    visible: false
                },
                series: [
                    {
                        dataField: "Event",
                        displayText: "Event",
                        labels: {
                            visible: true   
                        }
                    }
                ]
            }
        ],
        source: [
            {
                "Event": "50"
            },
            {
                "Event": "154"
            },
            {
                "Event": "96"
            },
            {
                "Goal": "90.0"
            },
            {
                "Event": "45"
            },
            {
                "Goal": "90.0"
            }
        ]
    });

April 14, 2015 at 6:24 am Permanent Tooltips #69833

Nadezhda

Participant

Hi DavidRogers,

Please, find the following example and try ‘showToolTip’ method instead ‘showToolTip’ property. I hope it would be helpful to you.

<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.api.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data
            var sampleData = [
                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
            ];

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        gridLines: { visible: false }
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                            ]
                        }
                    ]
            };

            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);

            var chartInstance = $('#chartContainer').jqxChart('getInstance');
            chartInstance.showToolTip(
                0,    /* first seriesGroup */
                1,    /* second serie */
                0,    /* x-th item */
                100, /* 1s show delay, optional parameter */
                100000  /* 5s hide delay, optional parameter */
                );
        });
    </script>
</head>
<body style="background: white;">
    <div id='chartContainer' style="width: 600px; height: 400px" />
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.