Giters

shutterstock / rickshaw

JavaScript toolkit for creating interactive real-time graphs

Home Page:https://shutterstock.github.io/rickshaw

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Slider not rendering

champthemudkip opened this issue · comments

commented

Hey all, I'm trying to get a decent understanding of rickshaw so I've been trying to add functionality to one of the simpler examples, but the range slider just isn't working. I've been looking at the code for this example to try to get it to work, but even though my code looks the same it just isn't working. Part of my problem is that I'm not sure what all the minified files contain, so I'm not sure when I need to include individual .js files for which functionality. As I'm sure you've noticed the documentation doesn't cover this,

so if any of you have any insight for me it would be greatly appreciated.

A note about the below code, I'm using jinja2 templates, thus the url_for functions

<!doctype>
<head>
	<!--link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"-->
	<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/graph.css')}}">
	<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/detail.css')}}">
	<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/legend.css')}}">
	<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/lines.css')}}">

	<script src="{{ url_for('static', filename='vendor/d3.min.js')}}"></script>
	<script src="{{ url_for('static', filename='vendor/d3.layout.min.js')}}"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
	<script src="{{ url_for('static', filename='rickshaw.js')}}"></script>
	<script src="{{ url_for('static', filename='extensions.js')}}"></script>
</head>
<body>
<div id="chart_container">
	<div id="chart"></div>
	<div id="legend_container">
		<div id="smoother" title="Smoothing"></div>
		<div id="legend"></div>
	</div>
	<div id="slider"></div>
</div>

<script>

// set up our data series with 50 random data points

var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
	random.addData(seriesData);
}

// instantiate our graph!

var graph = new Rickshaw.Graph( {
	element: document.getElementById("chart"),
	width: 960,
	height: 500,
	renderer: 'line',
	stroke:true,
	preserve:true,
	series: [
		{
			color: "#c05020",
			data: seriesData[0],
			name: 'New York'
		}, {
			color: "#30c020",
			data: seriesData[1],
			name: 'London'
		}, {
			color: "#6060c0",
			data: seriesData[2],
			name: 'Tokyo'
		}
	]
} );

graph.render();

var slider = new Rickshaw.Graph.RangeSlider({
    graph: graph,
    element: document.getElementById('slider'),
});

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
	graph: graph
} );

var legend = new Rickshaw.Graph.Legend( {
	graph: graph,
	element: document.getElementById('legend')

} );

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
	graph: graph,
	legend: legend
} );

var order = new Rickshaw.Graph.Behavior.Series.Order( {
	graph: graph,
	legend: legend
} );

var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
	graph: graph,
	legend: legend
} );

 var controls = new RenderControls({
 	graph:graph,
 	element:document.querySelector('form'),
 })

</script>

</body>
```
`
commented

my issue was that the link to the jQuery-ui stylesheet wasn't working, so I went to jQuery's site and downloaded the files I needed and added them to my project that way.