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.

4 Answers, 1 is accepted

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>

<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();

}