shutterstock / rickshaw Goto Github PK

On a line graph, it could be nice to have the impression that the values are added continuously even if it's not really the case. This would be made possible if the values where sliding continuously from the right to the left, and the last value is displayed after the duration of the slide.

This means that the graph will not be real time anymore, but the visualisation could be smoother and nicer to look. Any thoughts on this?

SCRIPT5007: Unable to set value of the property 'Color': object is null or undefined
rickshaw.min.js, line 1 character 3349

SCRIPT5007: Unable to get value of the property 'Palette': object is null or undefined
colors.html, line 44 character 2

Haven't debugged it thoroughl, but it seems to stem from the namespacing function.

namespace: function(namespace, obj) {

    var parts = namespace.split('.');
    parent = Rickshaw; // At this point, it's trying to assign the value to window.parent which no-ops. declaring it as a local variable should do the right thing.

This errors out in latest also when you try to resize

<!doctype>

<script src="../vendor/d3.min.js"></script>
<script src="../vendor/d3.layout.min.js"></script>

<script src="../rickshaw.js"></script>


<div id="chart"></div>

<button id="change" onclick="change()">Push Me</button>

<div id="chart2"></div>

<script>

graphs = {};

graphs['g1'] = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 300,
    height: 200,
    interpolation: 'step-after',
    series: [
        {
            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
            color: 'steelblue'
        }
    ]
} );
graphs['g1'].render();


graphs['g2'] = new Rickshaw.Graph( {
    element: document.querySelector("#chart2"),
    width: 300,
    height: 200,
    interpolation: 'step-after',
    series: [
        {
            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
            color: 'steelblue'
        }
    ]
} );
graphs['g2'].render();

function change() {
    graphs['g1'].configure({ width: 600, height: 400 }); 
    graphs['g1'].render();
};

</script>

Errors with

Uncaught ReferenceError: graph is not defined rickshaw.js:566

This would allow better control of the ticks, especially since the first tick is a little bit more padded as opposed to the others it seems - allows to use first-child selector, and is also much nicer for dom.. In Rickshaw.Graph.Axis.Time

this.render = function() {

    this.elements.forEach( function(e) {
        e.parentNode.removeChild(e);
    } );

    this.elements = [];

    var offsets = this.tickOffsets();

    var ticks_el = document.createElement('div');
    ticks_el.classList.add('x_ticks');

    offsets.forEach( function(o) {

        if (self.graph.x(o.value) > self.graph.x.range()[1]) return;

        var element = document.createElement('div');
        element.style.left = self.graph.x(o.value) + 'px';
        element.classList.add('x_tick');
        element.classList.add(self.ticksTreatment);

        var title = document.createElement('div');
        title.classList.add('title');
        title.innerHTML = o.unit.formatter(new Date(o.value * 1000));
        element.appendChild(title);

        ticks_el.appendChild(element);
        self.elements.push(element);

    } );

    self.graph.element.appendChild(ticks_el);
};

Is this possible? I did not see an obvious way how to do it

For any chart, when you hover over one data point, a tooltip is actually generated for every data point in the chart - the other ones aren't shown, but this results in potentially hundreds of div elements being added, moved, etc.. resulting in really poor performance, not to mention that this is completely useless.

To fix, in Rickshaw.Graph.HoverDetail render() function, move if (d.active) { from covering the last two lines of the loop, to the very top of the loop, just before var item = document.createElement('div'); - that was only one element is created and shown.. all that needs.

I'm sure this can be made even more efficient, but this would be a good start.

I am getting following JavaScript error while browsing examples:

stackedData[0][dataIndex] is undefined

Error is raised on following line in the code:

domainX = stackedData[0][dataIndex].x;

The problem occurs when using Rickshaw.Graph.HoverDetail while moving mouse cursor to the right end of the chart

URL: http://code.shutterstock.com/rickshaw/examples/extensions.html

Hi,

I have two different time series (memory usage, and number of processes), that use different units and scales.

is it possible with Rickshaw to have different scales/units, for each time serie ?

I'm thinking about creating two superposed rickshaw renderer, but it is a bit heavy (and I would love to use the same hover tooltip to show values in both series).
Or extending/hacking rickshaw code, but maybe there is a nicer solution?

Thanks,
Julian

I'm running older Chromium version which does not have support for the classList and rickshaw crashes in:

this.element.classList.add('rickshaw_graph')

Is it possible to make is more compatible with older browsers?

Hey,

Im currently using the Ajax graph to view some results, but since I have several files to view I want to be able to switch between each using a drop down menu and redraw the graph and axis

Is this possible?
How would i go about doing this?

Thanks in advance

This doesn't seem to work in the latest master

    var graph;
    graph = new Rickshaw.Graph.Ajax({
      element: document.getElementById("chart"),
      width: 500,
      height: 250,
      renderer: 'line',
      interpolation: 'linear',
      dataURL: 'data.json',
      series: [{
        name: 'New York',
        color: 'steelblue'
      }],
      onComplete: function() {
        var x_axis = new Rickshaw.Graph.Axis.Time({
          graph: graph
        });
        x_axis.graph.update();
      }
    });

I get the following

Uncaught TypeError: Object [object Object] has no method 'onUpdate' rickshaw.js:1122

Also is there a way to poll via ajax? to always get updates that is built into rickshaw?

IT seems that we are unable to display negative values on the chart. I didn't find any param to set Y-Axis min to anything that is not "zero".
Is there a clean way to do this ?

Hi there,

Maybe this is possible, but I don't think so.. What I would like to happen is for a bunch of data points, submitted with corresponding timestamps, to be grouped by week/month/year depending on the zoom level.. So for example if I have hundreds of data points per month for about a year, I would like the default view in a bar plot e.g. to have 12 bars, one for each month, with the total value of all the points inside that month.. When I zoom in, it might then show data by week or day.. then by hour/minute..

Basically, this entails allowing to split series data into points that have their own title and the series name and then grouping these together.

I'll try and look into it, but any help would be appreciated.

Cheers,
Martin

I think this might be because the Rickshaw.Graph object is one level deep (under self for Rickshaw.Graph.Ajax
e.g.
Rickshaw.Graph.Ajax
dataURL: "/logs/json?tags=jmeter"
graph: Rickshaw.Graph
proto: Object

You therefore get the following error when trying to create a legend:
Uncaught TypeError: Cannot call method 'map' of undefined

I'm calling legend like this:
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')

} );

I tried passing in the nested grap object like this to no avail. Are you able to help?
var legend = new Rickshaw.Graph.Legend( {
graph: graph.graph,
element: document.getElementById('legend')

} );

Is it possible to auto-aggregate data when using the rangeslider. A use case would be having hourly data points when zoomed in, but daily (hourly data added up) when zoomed out. If not, could this be a feature request? (I didn't see a google group for this type of discussion, so my apologies for posting in the issues)

I want to be able to combine the contents of the HoverDetail into a single Tooltip.

As you know, when you hover over a bar, the right side of it approximates to the index of the next bar, since the bars are drawn to the right of the tick line.. The problem here is that for the n-1'th bar, if the approximated x index is n, there is no n+1 element in the series list, and hence the correction function in update() in Rickshaw.Graph.HoverDetail doesn't fire.. replacing it with the following works:

    for (var i = approximateIndex; i < stackedData[0].length;) {

        if (i == stackedData[0].length - 1) {
            if (!stackedData[0][i]) {
                break;
            }

            if (stackedData[0][i].x <= domainX) {
                dataIndex = i;
                break;
            }
        } else {
            if (!stackedData[0][i] || !stackedData[0][i + 1]) {
                break;
            }

            if (stackedData[0][i].x <= domainX && stackedData[0][i + 1].x > domainX) {
                dataIndex = i;
                break;
            }
        }
        if (stackedData[0][i] >= domainX) { i++ } else { i-- }
    }

Hi,

I would like to be able to change the width and height of the chart on the fly; is this currently possible with rickshaw?

Kind Regards

as they are, hover details don't show up when the mouse is below zero. I narrowed down the behavior to this line:

if (domainMouseY > d.value.y0 && domainMouseY < d.value.y0 + d.value.y && !activeItem)

line 100 in Rickshaw.Graph.HoverDetail.js. I tried setting y0 to something else for the graph values, but couldn't figure out how to get it to be anything other than zero, so I ended up extending the class and overriding that method with an update that instead checked

if (domainMouseY > graph.min && domainMouseY < d.value.y0 + d.value.y && !activeItem)

which is probably what it was going for anyway. that fixed the issue, and hasn't raised any new ones.

When viewing any rickshaw graph in IE9, there's a javascript exception when rickshaw attempts to use the HTML5 ClassList API (http://davidwalsh.name/classlist).

This classList shim for IE9 seems to fix the issue for IE9 users:
https://gist.github.com/1381839

It'd be great if Rickshaw had a Geo Chart to plot data on the globe. For instance i'd like to visualize on the map most popular sources of traffic, performance of the website across the globe etc.

A map of the US would be a plus! :D (something like this http://mbostock.github.com/d3/talk/20111018/choropleth.html)

In opera loading http://shutterstock.github.com/rickshaw/examples/start.html throws an error: "Uncaught exception: TypeError: Cannot convert 'Rickshaw.Fixtures' to object"

Step 0: Visit http://shutterstock.github.com/rickshaw/examples/extensions.html
Step 1: Click to select "lines"
Step 2: Click to select one of "curves", "bars", or "steps"

Observed behavior: displayed graph uses "stack" layout, though "lines" is still selected.
Expected behavior: the "curves", "bars", "steps" selector is disabled and hidden or dimmed while "lines" is selected -- preventing Step 2.

Is there away to show all the plot points all the time on a line graph with out having to hover over.

Any way to allow different series length to display "cut" areas. A typical usage would be to display 2 charts, the first one being displayed to current date, and the other one would "predict" the future chart flow (for financial charts etc.)

In detail.css, you apply pointer-events: none; on .rickshaw_graph .detail to ensure that tooltips don't get hovered over and thus don't prevent other tooltips from popping up..

I find that there are two issues with that:

1. pointer-events: none; shouldn't really be used for non-svg items as described in the spec
2. it's impossible to hover over the tooltip itself, which might be nice if there is a link in there or something like that..

In my opinion, the approach of disabling pointer events and setting opacity: 0 to all tooltips would work much nicer if you enabled pointer events and then replace the opacity switch with a display: none/inline switch..

Works like a charm for me and everything is as expected

Cheers

Is there anyway to accomplish this? I have yet to find a good way to update the graph without refreshing the page for a new ajax request.

Rickshaw looks like a great start to creating a gantt chart, similiar to what Wrike provides. Is this something that's been mentioned before?

If you take at http://code.shutterstock.com/rickshaw/examples/extensions.html - select bar plot and zoom in so that you only have a few bars there - try hovering over a bar - you won't see a tooltip unless you hover exactly along the left edge of a bar..

I doubt that this is by design, but even if it is, this is very annoying from usability point of view - surely one would expect the whole bar to trigger the tooltip.

Thanks for looking into this.

Cheers,
Martin

Whenever I provide date/time data to rickshaw, it reports:

uncaught exception: x and y properties of points should be numbers instead of string and number

the data is provided in standard json

[{"x":"2011-11-06T11:57:29-05:00","y":0},{"x":"2011-12-06T11:57:29-05:00","y":0},{"x":"2012-01-06T11:57:29-05:00","y":0},{"x":"2012-02-06T11:57:29-05:00","y":0},{"x":"2012-03-06T11:57:29-05:00","y":0},{"x":"2012-04-06T11:57:29-04:00"}]

I note you do not provide examples of dates or times being used in a series - how is it done ?

thanks.
Jodi

Hello I'm writing an article about libraries visualization.
Here is the article: Choice Free JavaScript Data Visualization Library
To avoid inaccuracies, I'll be very grateful if you could briefly answer the following questions:

1. Which supported chart types by category (bar / line / area / radar / xy / scatter / combo / pie / donut / column / logarithmic scale charts / time plot?
2. Is there a HTML5 support (fallback method)?
3. Size lbrary?
4. Is there a GWT support?
5. Are there any dependencies on other libraries, if so, which ones?
6. Is Library Mobile friendly?
7. Which supported levels of interactiveness (legends, hovers and drilldowns)?
8. License?
9. Can incorporate custom graphics (background images, icons) ?
10. Largest Sites currently using?
11. Count questions / month, users / developers / commits in last month) ?
12. Formats supported (jpg / png / pdf) ?
13. Interesting features?
14. Lack of certain standard features?

Thank You,
Denis Krusko

My graph's d.x is in ms resolution, appreciate pointers on how to fix x-axis display to account for the same - happy to provide a patch. Thanks.

It seems like there is an off-by-one error somewhere in Rickshaw.
(Possibly in Rickshaw.Fixtures.Time.js or Rickshaw.Graph.Axis.Time.js)

The problem is that X-axis lines are shifted one time unit. The unit is year in this case, but the same thing happens if I change it to month.

I’m using the latest (GitHub) version of Rickshaw and d3.v2.min.js

When minifying Rickshaw with uglify (via requirejs/r.js), I'm getting an "object is not a function" error somewhere from Rickshaw, while trying to render a bar graph. Here's a screenshot from Chrome's script panel, paused on uncaught exceptions: http://bassistance.de/i/50e880.png

So the error is thrown in Rickshaw.Graph.Renderer.Bar.Rickshaw.Class.create.initialize, which is reasonable, as both arguments are objects, not functions. Though I have no idea why an object is passed where a function is expected. Maybe someone more familar with the code base can tell.

Here's the code to render the graph in our application: https://gist.github.com/5552abdf24227e5f7cb6
Without minification that works fine.

Building from source was a snap, but not everyone wants to install node. Also, I'm on v0.6.5 and had to run make twice:

➜ rickshaw git:(master) make
npm install clean-css
[email protected] ../node_modules/clean-css
└── [email protected]
cat src/css/detail.css src/css/graph.css src/css/legend.css > rickshaw.css
/Users/Rubikzube/node_modules/.bin/cleancss rickshaw.css > rickshaw.min.css

node.js:284
throw new Error('process.stdout cannot be closed');
^
Error: process.stdout cannot be closed
at SyncWriteStream. (node.js:284:15)
at output (/Users/Rubikzube/node_modules/clean-css/bin/cleancss:43:7)
at /Users/Rubikzube/node_modules/clean-css/bin/cleancss:24:5
at [object Object]. (fs.js:115:5)
at [object Object].emit (events.js:64:17)
at afterRead (fs.js:1111:12)
at Object.wrapper as oncomplete
make: *** [rickshaw.min.css] Error 1

➜ rickshaw git:(master) make
npm install uglify-js
[email protected] ../node_modules/uglify-js
cat src/js/Rickshaw.js src/js/Rickshaw.Graph.js src/js/Rickshaw.Fixtures.Color.js src/js/Rickshaw.Fixtures.RandomData.js src/js/Rickshaw.Fixtures.Time.js src/js/Rickshaw.Fixtures.Number.js src/js/Rickshaw.Color.Palette.js src/js/Rickshaw.Graph.Ajax.js src/js/Rickshaw.Graph.Annotate.js src/js/Rickshaw.Graph.Axis.Time.js src/js/Rickshaw.Graph.Axis.Y.js src/js/Rickshaw.Graph.Behavior.Series.Highlight.js src/js/Rickshaw.Graph.Behavior.Series.Order.js src/js/Rickshaw.Graph.Behavior.Series.Toggle.js src/js/Rickshaw.Graph.HoverDetail.js src/js/Rickshaw.Graph.JSONP.js src/js/Rickshaw.Graph.Legend.js src/js/Rickshaw.Graph.RangeSlider.js src/js/Rickshaw.Graph.Renderer.Line.js src/js/Rickshaw.Graph.Renderer.Stack.js src/js/Rickshaw.Graph.Renderer.Bar.js src/js/Rickshaw.Graph.Smoother.js src/js/Rickshaw.Graph.Unstacker.js src/js/Rickshaw.Series.js > rickshaw.js
/Users/Rubikzube/node_modules/.bin/uglifyjs rickshaw.js > rickshaw.min.js

Is it possible to submit the data series as just an array of x,y?

[ [x,y], [x,y] ]

This avoids the need to send all of the duplicate x, y back from the server.

Hi,

I need an X axis formatted to an arbitrary number scale. There doesn't currently appear to be a way to format the X axis for anything other than time, unless I'm missing something! Is this planned for the future? I'm happy to provide this if not - is it just a case of creating a class like Rickshaw.Graph.Axis.Time.js (maybe Rickshaw.Graph.Axis.X.js) along the same lines as Rickshaw.Graph.Axis.Y.js, that can be given the number formatter?

Thanks,
Craig

Hi,
the rickshaw code that is currently available on github has no license.

So while this is indeed open-source, it is not FREE in any way.
That's all right (that's your choice), anyway it would be much better to
explicitly state it in the README (usually along with a single-line copyright
statement) and if needed, add a LICENSE file that contains the whole license.

I hope you'll understand the importance of that matter,
regards,
Jérémy.

.rickshaw_graph .detail .item.active from detail.css would benefit by adding 'width: auto; height:auto;' to auto-size the detail tooltip on graph mouse hover. In it's current form, the tooltip doesn't get auto-sized when using a relative/percentage based layout.

Noticed an odd issue in IE9 where sometimes the content in the svg element overflows the bounds of the svg element in IE9, which doesn't seem to be the behavior in other browsers.

Adding the inline style="overflow: hidden" to the svg element seems to fix the problem, though. Here's a related discussion that also talks about the issue:

http://stackoverflow.com/questions/5971320/svg-image-is-not-cropped-in-ie9
simplegeo/polymaps#9

Following error while viewing this page:
http://code.shutterstock.com/rickshaw/examples/extensions.html

TypeError: 'undefined' is not a function (evaluating 'function(e){
this.visible = true;
this.update(e)
}.bind(this)');

Rickshaw.Graph.HoverDetail.js:191

At the moment, the method that adds ticks skips the first and goes straight to the second value.. The fix is again in Rickshaw.Graph.Axis.Time

this.tickOffsets = function() {

    var domain = this.graph.x.domain();

    var unit = this.fixedTimeUnit || this.appropriateTimeUnit();
    var count = Math.ceil((domain[1] - domain[0]) / unit.seconds);

    var runningTick = domain[0];

    var offsets = [];
    offsets.push( { value: runningTick, unit: unit } );

    for (var i = 0; i < count-1; i++) {

        tickValue = time.ceil(runningTick, unit);
        runningTick = tickValue + unit.seconds / 2;

        offsets.push( { value: tickValue, unit: unit } );
    }

    return offsets;
};

Hi, I am using Scatterplot example which works well. It shows 5 values correctly. The problem begin when i change the renderer to 'bar' - then i can see only 4 values - it doesn't render last object in the data array

URL: http://code.shutterstock.com/rickshaw/guide/scatterplot-1.html

original:

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 235,
    height: 85,
    renderer: 'scatterplot',
    stroke: true,
    series: [ {
        data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
        color: 'steelblue'
    } ]
} );
graph.render();

modified code which shoud display 5 bars, but only 4 are visible

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 235,
    height: 85,
    renderer: 'bar',
    stroke: true,
    series: [ {
        data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
        color: 'steelblue'
    } ]
} );
graph.render();

Is it possible to label the Axis? I couldn't see anywhere in the docs that mentioned this.

Also, is it possible for me to use d3.js to manipulate the code before rickshaw generates a result?

Thanks,
JH :)

Is there any way to support multiple Y-axis?

For example, one on the left hand side, another on the right hand sides. And it could have different scale.

I can't see a way to do it.

We dig into the source code, and found out it limit Y-axis on left hand side and only support one Y-axis.

Here is a sample.. If you set the interpolation on a new render() after a configure it will lose it and go back to the default which seems to be cardinal

<!doctype>

<script src="../vendor/d3.min.js"></script>
<script src="../vendor/d3.layout.min.js"></script>

<script src="../rickshaw.js"></script>


<div id="chart"></div>


<button id="change" onclick="change()">Push Me</button>

<script>

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 300,
    height: 200,
    interpolation: 'step-after',
    series: [
        {
            data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
            color: 'steelblue'
        }
    ]
} );
graph.render();

function change() {
    graph.configure({ width: 600, height: 400 }); 
    graph.render();
};

</script>

I've implemented a chart that uses a JSON file per your example. Now I'm trying to add an x axis to it, but the x-axis doesn't display. Here's what I have:

var graph = new Rickshaw.Graph.Ajax( {
element: document.getElementById("chart"),
width: 500,
height: 250,
renderer: 'line',
interpolation: 'linear',
dataURL: 'data.json',
series: [{
name: 'MyData',
color: 'steelblue'
}]
});

var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );

graph.render();

Any ideas?

The Y-Axis is shifted ~20px up in Chrome (but not FF, for some reason). You can see the result here:

http://cl.ly/3X2V2z3m2X2T0U2b391x

Which is just this example: http://code.shutterstock.com/rickshaw/tutorial/example_07.html

When I try to remove the first element from a series while adding a new one onto the end, the line graphs get drawn in a funky way. Maybe this is a bug, maybe I'm not doing something right. Any suggestions?