Skip to content

Instantly share code, notes, and snippets.

@jfreels

jfreels/index.html

Created August 1, 2013 15:02
Show Gist options
  • Save jfreels/6132226 to your computer and use it in GitHub Desktop.
Save jfreels/6132226 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype HTML>
<html>
<head>
<link rel='stylesheet' href='http://cdn.strategiqcommerce.com/ajax/libs/rickshaw/1.2.1/rickshaw.min.css'>
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css'>
<script src='http://d3js.org/d3.v2.min.js' type='text/javascript'></script>
<script src='http://cdn.strategiqcommerce.com/ajax/libs/rickshaw/1.2.1/rickshaw.min.js' type='text/javascript'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.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='yAxischart1b846b2d416d' class='yAxis'></div>
<div id='chart1b846b2d416d' class='rChart rickshaw'></div>
<div id='xAxischart1b846b2d416d' class='xAxis'></div>
<div id='legendchart1b846b2d416d' class='legend'></div>
<div id='sliderchart1b846b2d416d' class='slider'></div>
</div>
<script type='text/javascript'>
var palette = new Rickshaw.Color.Palette({ scheme: "colorwheel" });
var chartParams = {
"dom": "chart1b846b2d416d",
"width": 540,
"height": 240,
"scheme": "colorwheel",
"colors": "steelblue",
"series": [
{
"data": [
{
"x": 0,
"y": 40
},
{
"x": 1,
"y": 49
},
{
"x": 2,
"y": 17
},
{
"x": 3,
"y": 42
}
],
"name": "y",
"info": {
"0": [
0
],
"1": [
1
],
"2": [
2
],
"3": [
3
]
},
"color": "steelblue"
}
],
"renderer": "area",
"id": "chart1b846b2d416d"
}
chartParams.element = document.querySelector('#chart1b846b2d416d')
var graphchart1b846b2d416d = new Rickshaw.Graph(chartParams);
graphchart1b846b2d416d.render();
graphchart1b846b2d416d.render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment