sense-funnel-chart
Version:
Funnel Chart for Qlik Sense.
168 lines (160 loc) • 4.36 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D3 Funnel</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>D3 Funnel</h1>
<div class="example">
<form class="form-inline">
<select class="form-control" id="picker">
<option value="basic">No options</option>
<option value="formatted">Formatted values</option>
<option value="curved">Curved</option>
<option value="pinch">Pinched</option>
<option value="gradient">Gradient</option>
<option value="inverted">Inverted</option>
<option value="hover">Hover effects</option>
<option value="dynamic">Dynamic area</option>
<option value="minHeight">Minimum height</option>
<option value="animation">Animation</option>
<option value="label">Styling labels</option>
<option value="color">Custom colors</option>
<option value="labelsColor">Custom label colors</option>
<option value="works">The Works</option>
</select>
</form>
<!-- Funnel container -->
<div id="funnel"></div>
</div>
</div>
<!-- Required D3 library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<!-- D3Funnel source file -->
<script src="../src/d3-funnel/d3-funnel.js"></script>
<!-- Just for the example -->
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(function() {
$("#picker").change(function() {
var index = $("#picker").val();
var data = {
normal: [
["Applicants", 12000],
["Pre-screened", 4000],
["Interviewed", 2500],
["Hired", 1500]
],
formattedValues: [
["Applicants", [12000, "$ 12,000"]],
["Pre-screened", [4000, "$ 4,000"]],
["Interviewed", [2500, "$ 2,500"]],
["Hired", [1500, "$ 1,500"]]
],
minHeight: [
["Applicants", 12000],
["Pre-screened", 4000],
["Interviewed", 2500],
["Hired", 100]
],
color: [
["Teal", 12000, "#008080"],
["Byzantium", 4000, "#702963"],
["Persimmon", 2500, "#ff634d"],
["Azure", 1500, "#007fff"]
],
labelsColor: [
["Teal", 12000, "#008080", "#080800"],
["Byzantium", 4000, "#702963"],
["Persimmon", 2500, "#ff634d", "#6f34fd"],
["Azure", 1500, "#007fff", "#07fff0"]
]
};
var options = {
basic: [data.normal, {}],
formatted: [
data.formattedValues,
{}
],
curved: [
data.normal, {
isCurved: true
}
],
pinch: [
data.normal, {
bottomPinch: 1
}
],
gradient: [
data.normal, {
fillType: "gradient"
}
],
inverted: [
data.normal, {
isInverted: true
}
],
hover: [
data.normal, {
hoverEffects: true
}
],
dynamic: [
data.normal, {
dynamicArea: true
}
],
minHeight: [
data.minHeight, {
dynamicArea: true,
minHeight: 10
}
],
animation: [
data.normal, {
animation: 200
}
],
label: [
data.normal, {
label: {
fontSize: "16px",
fill: "#000"
}
}
],
color: [data.color, {}],
labelsColor: [data.labelsColor, {}],
works: [
data.normal, {
isCurved: true,
bottomPinch: 2,
fillType: "gradient",
hoverEffects: true,
dynamicArea: true,
animation: 200
}
]
};
var chart = new D3Funnel("#funnel");
// Reverse the dataset if the isInverted option is present
// Keep in mind that because the larger component has shorter
// width, it must compensate with a much larger height!
if ("isInverted" in options[index]) {
chart.draw(data.reverse(options[index][0]), options[index][1]);
// Otherwise, just use the regular data
} else {
chart.draw(options[index][0], options[index][1]);
}
}).trigger("change");
});
</script>
</body>
</html>