jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
73 lines (69 loc) • 3.97 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title id="Description">This demo shows how to display a bullet chart with five ranges.
Additionaly, it showcases the tooltipFormatFunction callback function.</title>
<meta name="keywords" content="bullet chart, bullet graph, BulletChart, chart, jQuery bullet graph, jQuery bullet chart, jQWidgets, jqxBulletChart, ranges, tooltip" />
<meta name="description" content="This demo shows how to display a bullet chart with five ranges. Additionaly, it showcases the tooltipFormatFunction callback function." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbulletchart.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var pointsToGrade = function (points) {
var grade;
if (points < 60) {
grade = "E";
} else if (points < 70) {
grade = "D";
} else if (points < 80) {
grade = "C";
} else if (points < 90) {
grade = "B";
} else {
grade = "A";
}
return grade;
};
$("#bulletChart").jqxBulletChart({
width: getWidth('bulletChart'),
height: 100,
barSize: "50%",
title: "Student grade",
description: "(in points)",
ranges: [
{ startValue: 0, endValue: 60, color: "#191970" },
{ startValue: 60, endValue: 70, color: "#191970" },
{ startValue: 70, endValue: 80, color: "#191970" },
{ startValue: 80, endValue: 90, color: "#191970" },
{ startValue: 90, endValue: 100, color: "#191970" }
],
pointer: { value: 83, label: "Grade", size: "25%", color: "#1E90FF" },
target: { value: 75, label: "Average grade", size: 4, color: "#00FFFF" },
ticks: { position: "far", interval: 10, size: 10 },
showTooltip: true,
tooltipFormatFunction: function (value, target) {
var currentGrade = pointsToGrade(value);
var averageGrade = pointsToGrade(target);
return "<div>Grade: <strong>" + currentGrade + "</strong> (" + value + " points)</div><div>Average grade: <strong>" + averageGrade + "</strong> (" + target + " points)</div>";
}
});
});
</script>
</head>
<body>
<label style="font-size: 13px; font-family: Verdana;">
Hover over the pointer or target for more information.</label>
<div id="bulletChart">
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>