Skip to content

Instantly share code, notes, and snippets.

@PatMartin PatMartin/.block
Last active Aug 7, 2017

Embed
What would you like to do?
RadarChart
license: mit

Radar Chart

This is a reusable dex.js radar chart composed of treemaps based upon Nadieh Bremer's example.

The radar chart is sometims called the spider chart. Interestingly, it is a variant of parallel coordinates mapped on to polar coordinates.

FAQ

No Legend?

In dex.js, legends are a separate component and populated via intra-chart communication. It frees individual chart implementations of the burden of drawing a legend. It also enables us to provide a single, robust and full featured implementation instead of re-implementing the same old thing over and over again for each individual chart. More on this in a later block.

References

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="https://dexjs.net/js/dex.js"></script>
<style>
html, body, #RadarChart {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
</style>
</head>
<body>
<div id="RadarChart"></div>
<script>
csv = new dex.csv(["Salesman", "Q1 Sales", "Q2 Sales", "Q3 Sales", "Q4 Sales"],
[["Bob Sleezy", 1000, 2000, 3000, 4000],
["Honest Jim", 4100, 500, 2500, 3000]]);
var radarChart = dex.charts.d3.RadarChart({
'parent': '#RadarChart',
'csv': csv
}).render();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.