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.

I made this range selection tool, the example is on rangeSelector.html It pretty much covers the mouse selection behavior and zooming yet it still could use some improvement.

I created this pull request which is enhancement of muddydixon's request. https://github.com/shutterstock/rickshaw/pull/54 (He is my colleague)

In this patch, you can use all type of renderers. And the order of renderers are defined by the inserted order into a series array.

Please merge this!

This PR is related to issue #140, Timezone is not adjustable for Time based axis.

My goal is somewhat more narrow than the popular asks in issue #140. I only attempt to enable chart to use user-agent default time format.

I forked a new file Fixtures.LocalTime.js based on the original Fixtures.Time.js.

The only change to original code is in Axis.Time allowing timeFixtures to be specified.

I updated extension.html examples to show usage.

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

Since rickshaw can't handle null values, I usually tend to fill it up with integer 0 values. But, this leads to bad results if there's a lot of data missing - a sawtooth pattern. I'd prefer to actually skip drawing of null values.

Am i wrong here or missing something? I've followed some more leads in d3.js and found a ticket describing the same problem.

A similiar discussion of this problem in d3.js: https://github.com/mbostock/d3/issues/583

And a pull request from 6 months ago: https://github.com/mbostock/d3/pull/594

It is possible to use this in rickshaw.js to achieve a similar result?

Kind regards, -Frederik

As discussed here https://github.com/shutterstock/rickshaw/issues/432 there may be some times where it is explicitly required for the event handlers to be removed to avoid errors with them being triggered in an element that no longer exists.

Hello,

We are developing a data analytics application with web visualization. We need to visualize many html charts in real time (e.g., several dashboard with 10-20 line charts having 300 points and updated 5 times per second).

We found that our needs are more or less good served by d3 rickshaw library. Among many other javascript libraries, it seems having best (or nearly best) performance

However, we also detected big memory leaks. Below are the details.

Our code is here: http://depositfiles.com/files/igs2z1o36

rickshaw-master\examples\test_update.html - plotting generated data in real time. Sliding window is organized manually. Memory leak for currently used parameters is ~ 8 Mb/sec. rickshaw-master\examples\test_update_series.html - plotting generated data in real-time. Sliding window is organized via Rickshaw Series addon. Same memory leak.

In test_update.html, charts are updated using following lines of code:

function updateChart() {
for(var g = 0; g < charts; g++){ yValues[g] += rnd(); data[g].shift(); data[g].push({x: xValue, y: yValues[g]}); } xValue += 1; graph.update(); // console.log(yValues) }
setInterval(updateChart, interval);

While debugging, we have revealed function render (Rickshaw.Graph.Renderer.js:75), where current svg:path (one for each chart) is deleted и and new path with new data is added. If comment that part of code, memory leaks disappear.

In Crome webdevtools dump we found that there are a lot of remaining elements "SVGPathElement" (their amount increase linearly with time). Most part of them seems to be outside DOM (we tried to delete elements by remove() function, but it seems that still somewhere remain links to these elements. Besides of grow of SVGPathElement amount, we observed grow of amount of some arrays (with similar dimension as SVGPathElement ). This might lead to the conclusion, that somewhere links to the arrays with previous data are stored causing memory leaks.

However, despite this considerations, we failed to locate exact reason of the memory leaks and find a solution to this problem.

Best regards, Mikhail Kalinkin.

This is useful for putting two different series of different magnitude normalized into the same graph and having multiple axis. See the scaled.html example.

Rickshaw.Graph.Axis.Scaled inherits from Rickshaw.Graph.Axis.Y to enable code sharing.

Rickshaw.Graph.Smoother doesn't really do a window transform.

I've added Rickshaw.Graph.MovingAverage to do moving average transform with example html.

Hi evryone I would like to use the graphic-interactive (that of example examples / extensions.html) and I wanted to enter custom values. How do I insert custom values​​?

I tried to understand the Rickshaw.Fixtures.RandomData js files, which are created from the values ​​that you see in the example, but I could not understand how the values ​​are to tap.

How do I represent dates on the x-axis? What kind of dates (SimpleDate, ...) should I use? How do I set the values ​​for the y-axis?

If anyone can give me an example of the insertion of individual values ​​([x, y]) would understand perfectly. In practice I have to change this part:

// 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); } This can be some value :

[0.12, '30/Aug/2012 11:27:05] [1.21, '30/Aug/2012 11:27:14'] [2.10, '30/Aug/2012 15:50:44'] [3.32, '30/Aug/2012 15:51:09']

How i can put them in the chart?

I'm supposed to take the values ​​from a db and represent them on a chart. I can take the values ​​but do not know how to pass to the function that draws the graph.

Thanks in advance

This PR corrects misspellings identified by the check-spelling action.

The misspellings have been reported at https://github.com/jsoref/rickshaw/commit/bbeb6a66075ee32c7187401d8bd75a4ba3178280#commitcomment-80113230

The action reports that the changes in this PR would make it happy: https://github.com/jsoref/rickshaw/commit/5629164ebe80f40cf4aec706bf6a09479ea3a72e

Note: this PR does not include the action. If you're interested in running a spell check on every PR and push, that can be offered separately.

How can I change the font size of the numbering along the Y axis? It's currently very small. I can change the size of the X axis with this:

.rickshaw_graph .x_ticks_d3 text {
	font-size: 30px;
}

However, this technique doesn't work for the Y axis.

One part of input data which i visualize is below "average_total_waste": "[0,0,0,0,0,0,0,0,0,0,0,0,0,41,41,41,41,132,132,132,132,331,331,331,331,469,469,469,469,572]",

I use the code below to visualize it

        function generateTimeSeriesVisualization(jsonResults,visualzationArray,
                                                 chartID, x_axis_ID, y_axis_ID, legend_ID) {

            //results = dataset['results'];
            results = jsonResults;
            chartName = chartID;


            
            var palette = new Rickshaw.Color.Palette();
            var seriesData = [];

            for (var i in visualzationArray){

                seriesData.push({
                    "color" : palette.color(),
                    "data" : convert_float_array_to_rickshaw_timeseries_format(results[visualzationArray[i]]),
                    "name" : visualzationArray[i]

                });

            }

            
            // instantiate our graph!
            var graph = new Rickshaw.Graph({
                //element: document.getElementById("chart"),
                element: document.getElementById(chartName),
                width: 400,
                height: 350,
                renderer: 'line',
                padding: {top: 0.02, left: 0.02, right: 0.02, bottom: 0.02},
                min: 'auto',
                series: seriesData
            });
            var xaxis_formater = function (n) {
                return Math.round(n);
            }


            var hoverDetail = new Rickshaw.Graph.HoverDetail({
                graph: graph,
                xFormatter: xaxis_formater
            });
            var legend = new Rickshaw.Graph.Legend({
                graph: graph,
                element: document.getElementById(legend_ID)
            });
            var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
                graph: graph,
                legend: legend
            });

            var x_ticks = new Rickshaw.Graph.Axis.X({
                graph: graph,
                orientation: 'bottom',
                element: document.getElementById(x_axis_ID),
                pixelsPerTick: 50,
                tickFormat: xaxis_formater
            });

            var y_ticks = new Rickshaw.Graph.Axis.Y({
                graph: graph,
                orientation: 'left',
                tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                element: document.getElementById(y_axis_ID),
                pixelsPerTick: 30

            });

            graph.render();

        }

        function convert_float_array_to_rickshaw_timeseries_format(params) {
            //console.log(params)
            var timeseries_array = [];
            for (i = 0; i < params.length; i++) {
                var dict = {x: i, y: Math.round(params[i])};
                timeseries_array.push(dict);
            }
            return timeseries_array
        }

The problem is y-axis value remains same for different values of x-axis. Now if the y-axis remains constant while x-axis moves forward, the line will dangle up and down This is shown in the sample picture also.

I have a graph with 5 lines. The scale of each line is very different (and the scale varies for different users). Hence I want to allow the user to scale the data (using a slider). This part works perfectly, and I am able to update the values. However, now I want my label to be changed, so that it reflects the scale. For eg: if original label was "frequency", and it was scaled by 2, I want the label to be "frequency * 2". How can I do the same?