This is a migrated thread and some comments may be shown as answers.

Mobile Chart ToolTip Click

4 Answers 116 Views
Charts
This is a migrated thread and some comments may be shown as answers.
ISEEUGlobal
Top achievements
Rank 1
ISEEUGlobal asked on 25 Aug 2014, 12:13 AM
Hello,

I am trying to find a way to show the tooltip for a chart on click, instead of hover. The reason is using the chart on a mobile device removes the ability to "hover".

From the source it appears there is a 'showOn' field in the options, however on your documentation does not have this field and doesn't appear to be used during tooltip display.

Is there a way to display the tooltip on click and not on hover? 

4 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 26 Aug 2014, 03:49 PM
Hello,

By design on mobile device chart tooltip is displayed on click. Please test this behaviour and let us know if you observe any problems.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ISEEUGlobal
Top achievements
Rank 1
answered on 27 Aug 2014, 10:44 PM
Hello,

Using the WebView on Android mobile (app) does not allow for click event. If I hold down on the series I am shown the tool tip. Is there an override that I could change to modify this behavior?
0
ISEEUGlobal
Top achievements
Rank 1
answered on 27 Aug 2014, 11:25 PM
For reference here is the Html and Javascript components.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Blood Pressure Resu;ts</title>
    <link type="text/css" href="styles/global.css" rel="stylesheet" />
    <link type="text/css" href="styles/kendo.dataviz.mobile.min.css" rel="stylesheet" />
    <link type="text/css" href="styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/kendo.dataviz.mobile.min.js"></script>
</head>
<body>
    <div>
        <div class="demo-section k-content">
            <div id="chart" style="position:relative;"></div>
            <div id="loading"></div>
        </div>
    </div>
    <script type="text/javascript" src="js/bp.js"></script>
</body>
</html>

var chart = null, dataSource = null;
 
function createChart() {
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://localhost:8001/getbpdata",
                dataType: "json"
            }
        },
        schema: {
            sort: {
                field: 'date',
                dir: 'asc'
            },
            model: {
                date: {
                    type: 'date'
                },
                sys: {
                    type: 'number'
                },
                dia: {
                    type: 'number'
                },
                pulse: {
                    type: 'number'
                }
            }
        }, error: function (e) {
            var txt = e.xhr.responseText
            console.log(e.status + ' ' + e.errorThrown + ' ' + txt);
        }
    });
 
    chart = $("#chart").kendoChart({
        theme: 'silver',
        chartArea: {
            background: "#FFFFFF"
        },
        dataSource: dataSource,
        legend: {
            position: "bottom"
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            type: "line",
            style: "smooth",
            categoryField: "date",
            labels: {
                visible: false
            }
 
        },
        series: [{
            field: "sys",
            name: "Systolic"
        }, {
            field: "dia",
            name: "Diastolic"
        }, {
            field: "pulse",
            name: "Pulse"
        }],
        valueAxis: {
            labels: {
                format: "{0}"
            },
            line: {
                visible: false
            }
        },
        categoryAxis: {
            field: 'date',
            type: 'date',
            baseUnit: 'days',
            labels: {
                rotation: 315,
                dateFormats: {
                    days: 'MMM d'
                }
            },
            majorGridLines: {
                visible: false
            },
        },
        tooltip: {
            visible: true,
            shared: true
        },
        dataBound: function (e) {
            $('#chart').show();
            $('#loading').hide();
        }
    }).data('kendoChart');
}
$(document).ready(createChart);
 
function redrawChart() {
    chart.redraw();
}
0
Iliana Dyankova
Telerik team
answered on 29 Aug 2014, 11:45 AM
Hi,

I am not quite sure if I understand correctly what the actual issue is - could you please elaborate a bit more? Also could you share more details about the Android device you are using? Thank you in advance for your cooperation.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
ISEEUGlobal
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
ISEEUGlobal
Top achievements
Rank 1
Share this question
or