Skip to content

Instantly share code, notes, and snippets.

@PatMartin

PatMartin/.block

Last active August 7, 2017 02:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PatMartin/548fef336be8e90c1cb9f12163e7cad4 to your computer and use it in GitHub Desktop.
Save PatMartin/548fef336be8e90c1cb9f12163e7cad4 to your computer and use it in GitHub Desktop.
Download ZIP
StackedBarChart
Raw
.block
license: mit
Raw
README.md

Stacked Bar Chart

This is the dex.js stacked bar chart.

References

Raw
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"/>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.14/c3.min.js"></script>
<style>
html, body, #StackedBarChart {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
</style>
</head>
<div id="StackedBarChart"></div>
<body>
<script>
var stackedBarChart = dex.charts.c3.StackedBarChart({
'parent': '#StackedBarChart',
'csv': new dex.csv({
'header': ['Sample', 'A', 'B', "C", "D", "E"],
'data': dex.datagen.randomIndexedMatrix({
'rows': 30,
'columns': 6,
'min': 1,
'max': 100
})})
}).render();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment