Rickshaw: slider not rendering

Question

Rickshaw: slider not rendering

278 views Asked by LillianaKulp At 09 May 2017 at 15:43

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

vvv This is the rendered code for the pertinent section of html vvv
<div id="preview" class="ui-slider ui-slider-horizontal ui-widget ui-widget content ui-corner-all">
    <div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
-------------------------------------------------
<!doctype>
<head>
    <link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">

    <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>

    <script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.js')}}"></script>
    <script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.Preview.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
} );
</script>

Original Q&A

There are 2 answers

**Twisty** · Answer 1 · 2017-05-09T19:27:25+00:00

Using the demo here: http://code.shutterstock.com/rickshaw/ and the standalone example: http://code.shutterstock.com/rickshaw/examples/extensions.html it only needs the id of the div to initialize.

I would advise removing the following from your head:

<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">

And using:

<link type="text/css" rel="stylesheet" source="http://code.jquery.com/ui/1.8.0/themes/smoothness/jquery-ui.csss">

I don't think this will cause an issue but it also does not improve anything.

I also see they use:

<script>
    jQuery.noConflict();
</script>

They execute this before the jQuery UI is included. I see no issue with:

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

If it were me, I would suggests:

// set up our data series with 50 random data points
var seriesData = [
  [],
  [],
  []
];
var random = new Rickshaw.Fixtures.RandomData(150);
var graph, slider, hoverDetail, legend, shelving, order, highlight;

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

// instantiate our graph!
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();
slider = new Rickshaw.Graph.RangeSlider({
  graph: graph,
  element: $("#slider")[0]
});
hoverDetail = new Rickshaw.Graph.HoverDetail({
  graph: graph
});
legend = new Rickshaw.Graph.Legend({
  graph: graph,
  element: $("#legend")[0]

});
shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
  graph: graph,
  legend: legend
});
order = new Rickshaw.Graph.Behavior.Series.Order({
  graph: graph,
  legend: legend
});
highlight = new Rickshaw.Graph.Behavior.Series.Highlight({
  graph: graph,
  legend: legend
});

Example: https://jsfiddle.net/Twisty/qoofL8kb/4/

**LillianaKulp** · Answer 2 · 2017-05-10T14:51:43+00:00

LillianaKulp On 10 May 2017 at 14:51

After fiddling with it I realized the problem was the way I was trying to link to the jQuery-ui css file. Instead I downloaded the files I needed and added them to the project, linking them that way.

TechQA.

Rickshaw: slider not rendering

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-UI

Related Questions in TIME-SERIES

Related Questions in RICKSHAW

Popular Questions

Popular Tags

Trending Questions