Questions tagged [rickshaw]

Rickshaw is an opensource JavaScript toolkit for creating interactive time series graphs.

According to its website, Rickshaw is an opensource JavaScript toolkit for creating interactive time series graphs. It provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc.

It's built on d3.js library underneath, so graphs are drawn with standard SVG and styled with CSS.

181 questions
3
votes
1 answer

rCharts and rickshaw: slider disappears from rickshaw chart when a datatable is added to my web page

I built a web page using the amazing rCharts and knitr. My page combines rickshaw time series charts with sliders and a data table. When I add the datatable, all the sliders disappear from my rickshaw charts. I tried modifying the config.yml so…
jdl
  • 31
  • 1
3
votes
1 answer

Rickshaw RangeSlider - Zoom in by default

I am looking at a simple Rickshaw chart with data from a JSON file. d3.json(data, function(error, json) { var graph = new Rickshaw.Graph( { element: document.getElementById(chart_id), renderer: 'line', …
bjonen
  • 1,503
  • 16
  • 24
3
votes
2 answers

Rickshaw : data for multiple series not working

I'm trying to create some charts using Rickshaw, importing the data with ajax generated in php. If I use static datas, the chart displays; If I copy/paste the data generated in the php (from a console/log()), the chart displays; If I try to put the…
MathieuLuyten
  • 95
  • 1
  • 6
3
votes
2 answers

Adding space Before and after the Svg:rect - d3.js

I am appending a Extra svg:rect in to the bar chart when it meets certain condition. It works and the line appears. But It appears right next to the bar. So I need to have some space exactly before and after that extra Rect. This code is not…
Ash
  • 239
  • 2
  • 9
  • 25
3
votes
0 answers

Rickshaw Stream Chart Vertically Misaligned

A Rickshaw Stream chart (area chart in offset:wiggle mode) can look amazing with a large dataset, but with a smaller dataset it tends to stray wildly from its central horizontal axis. Any ideas why this is, or how to prevent…
Aubrey Falconer
  • 143
  • 1
  • 1
  • 6
3
votes
1 answer

Rickshaw only show gridlines on some points

I have a graph made with rickshaw: I have the tick marks setup so that they only have a label if the value is -24, 0, or 24: // Instantiate x-axis var xAxis = new Rickshaw.Graph.Axis.X({ graph: graph, orientation: 'bottom', pixelsPerTick:…
alt
  • 13,357
  • 19
  • 80
  • 120
2
votes
0 answers

How to update Rickshaw graph without Fixed.Duration

I'm trying to create a Real time Graphic with rickshaw but I didn't find how to update the graph without fixed duration as in the example (extensions.html). I already know how to build my graph with a JSON file, but I don't know how to update the…
2
votes
1 answer

Correct date format for Rickshaw

I'm using Rickshaw to build a line chart that will show speeds at different times. My data looks…
Cameron
  • 27,963
  • 100
  • 281
  • 483
2
votes
0 answers

Rickshaw.js gradient color on area chart?

I am trying to create an area chart with gradient, like shown in the image. I don't see where can I specify the gradient. I have created a CSS class and tried to add it to the chart series var graph_lc2 = new Rickshaw.Graph({ element:…
sh4k
  • 306
  • 2
  • 5
2
votes
1 answer

How can I make a Rickshaw legend with multiple series enaber/disabler?

I need to make a Rickshaw legend where I can make groups of time series. e.g. I have 20 time series displayed in a graph and I want them to be grouped in 4 groups, named series1, series2, series3, series4. Series1 would contain the first 5 time…
Wallkan
  • 480
  • 1
  • 8
  • 27
2
votes
1 answer

How to make graph through rickshaw and angularjs?

I am just learning to make graph through angularjs and rickshaw from TagTree. The have some data of ufo sighting and graw the graph. I followed the same procedure but I did not able to draw the graph similar graph what they had draw. Please see…
geeks
  • 2,025
  • 6
  • 31
  • 49
2
votes
0 answers

How to convert json data series accoring to the series used in rickshaw+angular to draw graph?

Note: How to convert json data series to rickshaw series. I am getting json data series from the url, I want to use this series for drawing the graph in rickshaw and angularjs. Json Data series from url {"series": [{"meter": "instance", "data":…
geeks
  • 2,025
  • 6
  • 31
  • 49
2
votes
0 answers

Rickshaw realtime chart in AngularJS becomes unresponsive after a few seconds of running

I update the random values to simulate a realtime chart, using an $interval. After a few seconds the screen gets unresponsive. Here's my code. I'm using angular-rickshaw directive from https://github.com/ngyewch/angular-rickshaw var seriesData =…
coder9
  • 1,571
  • 1
  • 27
  • 52
2
votes
1 answer

How do you get data streaming into a node server to populate a rickshaw chart?

So, I have this rickshaw line chart set up on my html script: var data = []; var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 1000, height: 100, renderer: 'line', series: [{ color:…
david
  • 39
  • 3
2
votes
0 answers

Axis Grid Lines - Rendered after Visualization

Is there a way to control this behavior so that axis grid lines are drawn before the chart rendering happens? Any way to control/override this default behavior so grid line are behind the chart instead of on top?
invertigo
  • 115
  • 1
  • 8
1 2
3
12 13