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
5
votes
1 answer

Transitions using line graph and Rickshaw

I am trying to add transitions to a line graph using Rickshaw's nice charting framework. I am new to d3, but it seems as though I will need to add a straight line and then transition to the graph data within the render function on…
marcusb
  • 612
  • 5
  • 11
5
votes
1 answer

Append Value to Rickshaw Graph Axis and what is ticksTreatment and Preserve

This is my first question on here so please go easy :) I am trying to implement some line graphs with rickshaw graphs, d3 and jquery UI. I have some vertical tabs and have successfully gotten the charts to load from external html files. There was a…
5
votes
2 answers

How to format the Y axis values on Rickshaw Graphs

I want to use the Javascript graphs of http://code.shutterstock.com/rickshaw/ and I got it working for one exception, when my values of less than 0.00000100 then the y-axis values are shown in scientific format, e.g. 2e-7 for the value…
KKK
  • 1,085
  • 11
  • 33
4
votes
2 answers

How can I add graphs/data to Rickshaw with d3.js?

Here's what I have: http://jsfiddle.net/bozdoz/Q6A3L/ Code for the background bars: maxData = 80000000; maxHeight = 250; var yScale = d3.scale.linear(). domain([0, maxData]). // your data minimum and maximum range([0, maxHeight]); // the pixels…
bozdoz
  • 12,550
  • 7
  • 67
  • 96
3
votes
1 answer

How can I color one Y-axis line different from the other grid-lines?

In Rickshaw, I want to color one specific Y-axis grid-line different than the other Y-axis grid-lines when using a Rickshaw.Graph.Axis.Y.Scaled axis. I can do this with jQuery ( specifically 32° is the line I care about): $('#container_id * svg *…
Ross Rogers
  • 23,523
  • 27
  • 108
  • 164
3
votes
1 answer

Uncaught Rickshaw.Graph needs a reference to an element

Need some help with this error: Uncaught Rickshaw.Graph needs a reference to an element rickshaw.min.js:1 initialize rickshaw.min.js:1 Rickshaw.Graph rickshaw.min.js:1 loadChart chart.js:23 (anonymous function) stockDisplay.html:21…
Treaty
  • 53
  • 1
  • 5
3
votes
1 answer

Atlasboard and Rickshaw

Am trying to create a dashboard using the atlasboard and rickshaw. Now what happens is that atlasboard by default has a black background and am unable to see the x-axis and y-axis when creating graphs (e.g WIKI markdown analytics). If you look at…
Javed
  • 81
  • 1
  • 7
3
votes
0 answers

rickshaw - how do I make charts autoresize to fit container?

I am using rickshaw to chart some real-time data in my app. The issue I have is that the space I have available to display the charts varies in time - containers get bigger/smaller when certain conditions are met. As a result, I need to resize the…
kikito
  • 51,734
  • 32
  • 149
  • 189
3
votes
0 answers

Range highlighting (not selecting) in Rickshaw D3.js charts

I have a problem with finding a way to highlight a specific range and possibly label it at the top in the Rickshaw charts as on this example Is there a way of achieving such a highlight in Rickshaw? It could be very useful for annotating a period…
Marcin
  • 5,469
  • 15
  • 55
  • 69
3
votes
2 answers

uncaught exception: series is not an array rickshaw

I've tried a simple example with the example from rickshaw... A rest server give back a json file... If I print it to the console its exacly the same as the one from the example : [{ color: 'steelblue', data: [ { x: 0,…
OpenStove
  • 714
  • 1
  • 11
  • 22
3
votes
3 answers

avoid span float right overlap with text (CSS)

I'm using rickshaw and have a graph hover/annotation where a colour swatch (defined using a is overlapping with text within the
that they're both contained in. Here's my HTML:
Luke
  • 404
  • 5
  • 11
3
votes
1 answer

Set Y-axis grid density in Rickshaw.js

I have a graph detailing wind speeds where I would like to have the grid on the Y axis have ticks every 5 (m/s). How do I set the density of the Y axis grid? // triggered when data has been loaded via ajax $graph.on('graph.render', function(e, d)…
max
  • 96,212
  • 14
  • 104
  • 165
3
votes
1 answer

How to display data when using Rickshaw.Graph.Ajax

1.) How can I access the data using new Rickshaw.Graph.Ajax? My complete code is below, including a sample set of the JSON that is being called via AJAX: (function(){ var ajaxGraph = new Rickshaw.Graph.Ajax( { element:…
Jannaee
  • 51
  • 5
3
votes
1 answer

Rickshaw Graphs rotate ticks by -90 degrees

I'm trying out the Dashing framework for a dashboard project and I'm trying to use rickshaw.js to draw graph for the dashboard. I've customised the labels so they have exactly what I want, but unfortunately the text seems to be stacked together.…
3
votes
1 answer

Rickshaw misinteprets the datetime

I am using the Rickshaw javascript library to show represent some graphical values, following the model from here. The data to be drawn is provided through an Ajax call, for example: [{"color":"#65A1CC","data":[{"x":1383906402000,"y" …
lmsasu
  • 7,459
  • 18
  • 79
  • 113
1
2
3
12 13