Skip to content

Instantly share code, notes, and snippets.

@patilv

patilv/index.html

Created November 10, 2014 14:16
Show Gist options
  • Save patilv/299318ff4c3acd4e37f6 to your computer and use it in GitHub Desktop.
Save patilv/299318ff4c3acd4e37f6 to your computer and use it in GitHub Desktop.
Download ZIP
u1.html
Raw
index.html
<!doctype HTML>
<html>
<head>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js' type='text/javascript'></script>
<script src='http://imaginea.github.io/uvCharts/js/uvcharts.js' type='text/javascript'></script>
<style>
.chart_container {
position: relative;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
.rChart {
display: inline-block;
margin-left: 40px;
}
.yAxis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
.legend {
position: absolute;
top: 0;
right: -160px;
vertical-align: top;
}
.slider {
margin-left: 40px;
margin-top: 12px;
}
</style>
</head>
<body>
<div class='chart_container'>
<div id='yAxischart75077b76fc8' class='yAxis'></div>
<div id='chart75077b76fc8' class='rChart rickshaw'></div>
<div id='xAxischart75077b76fc8' class='xAxis'></div>
<div id='legendchart75077b76fc8' class='legend'></div>
<div id='sliderchart75077b76fc8' class='slider'></div>
</div>
<script>
var chartParamschart75077b76fc8 = {
"dom": "chart75077b76fc8",
"width": 800,
"height": 400,
"config": {
"meta": {
"position": "#uv-div"
}
},
"graphdef": {
"categories": [
"Black",
"Brown",
"Red",
"Blond"
],
"dataset": {
"Black": [
{
"name": "Male",
"value": 32,
"Hair": "Black"
},
{
"name": "Male",
"value": 11,
"Hair": "Black"
},
{
"name": "Male",
"value": 10,
"Hair": "Black"
},
{
"name": "Male",
"value": 3,
"Hair": "Black"
},
{
"name": "Female",
"value": 36,
"Hair": "Black"
},
{
"name": "Female",
"value": 9,
"Hair": "Black"
},
{
"name": "Female",
"value": 5,
"Hair": "Black"
},
{
"name": "Female",
"value": 2,
"Hair": "Black"
}
],
"Brown": [
{
"name": "Male",
"value": 53,
"Hair": "Brown"
},
{
"name": "Male",
"value": 50,
"Hair": "Brown"
},
{
"name": "Male",
"value": 25,
"Hair": "Brown"
},
{
"name": "Male",
"value": 15,
"Hair": "Brown"
},
{
"name": "Female",
"value": 66,
"Hair": "Brown"
},
{
"name": "Female",
"value": 34,
"Hair": "Brown"
},
{
"name": "Female",
"value": 29,
"Hair": "Brown"
},
{
"name": "Female",
"value": 14,
"Hair": "Brown"
}
],
"Red": [
{
"name": "Male",
"value": 10,
"Hair": "Red"
},
{
"name": "Male",
"value": 10,
"Hair": "Red"
},
{
"name": "Male",
"value": 7,
"Hair": "Red"
},
{
"name": "Male",
"value": 7,
"Hair": "Red"
},
{
"name": "Female",
"value": 16,
"Hair": "Red"
},
{
"name": "Female",
"value": 7,
"Hair": "Red"
},
{
"name": "Female",
"value": 7,
"Hair": "Red"
},
{
"name": "Female",
"value": 7,
"Hair": "Red"
}
],
"Blond": [
{
"name": "Male",
"value": 3,
"Hair": "Blond"
},
{
"name": "Male",
"value": 30,
"Hair": "Blond"
},
{
"name": "Male",
"value": 5,
"Hair": "Blond"
},
{
"name": "Male",
"value": 8,
"Hair": "Blond"
},
{
"name": "Female",
"value": 4,
"Hair": "Blond"
},
{
"name": "Female",
"value": 64,
"Hair": "Blond"
},
{
"name": "Female",
"value": 5,
"Hair": "Blond"
},
{
"name": "Female",
"value": 8,
"Hair": "Blond"
}
]
}
},
"type": "Bar",
"id": "chart75077b76fc8"
}
var graphdefchart75077b76fc8 = chartParamschart75077b76fc8.graphdef
var configchart75077b76fc8 = chartParamschart75077b76fc8.config
configchart75077b76fc8.meta.position = '#chart75077b76fc8'
var chartchart75077b76fc8 = uv.chart(chartParamschart75077b76fc8.type,
graphdefchart75077b76fc8,
configchart75077b76fc8
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment