rickshaw
JavaScript toolkit for creating interactive real-time graphs
Rickshaw: A JavaScript toolkit for creating interactive time-series graphs rickshaw is an open-source javascript toolkit for creating interactive time-series graphs and charts
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 Rickshaw.Graph.Renderer
My question is, is there anything out there that would help add some animation to my line chart - perhaps transition from a flat line - or draw line from left to right.
I have seen examples with raw d3 but adapting rickshaw seems hard - or maybe I am hitting it from the wrong angle.
Source: (StackOverflow)
I have a set of data for dates. What value should I provide the X axis values? How do I make Rickshaw display the X data values as dates?
I looked around the docs and examples and cannot find anything.
Source: (StackOverflow)
I have a dataset with pairs {x: someValue, y: count} where someValue is a day of the week in a form of (1..7) where 1 is "Sunday".
On the Ricskshaw chart I would like to display (Mon, Tue..etc) respectively on the X-axis. How do I do that?
At the moment I have done:
var ticksTreatment = 'glow';
var xAxisQPerDay = new Rickshaw.Graph.Axis.Time( {
graph: graphQPerDay,
ticksTreatment: ticksTreatment
} );
xAxisQPerDay.render();
but this gives me, of course, the default values 1s, 2s, 3s etc...
Source: (StackOverflow)
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 0.00000020
How to I make it show 0.00000020 instead of 2e-7 ?
Source: (StackOverflow)
I am creating a Rickshaw.js-powered graph much like in this example: http://code.shutterstock.com/rickshaw/tutorial/example_07.html based on my own data that is returned via an AJAX call. The data is either measured in bytes (typical values range in a few gigabytes or hundreds of MBs) or seconds (anywhere between 10s and 50 minutes). I tried using a Rickshaw.Fixtures.Number.formatBase1024KMGTP formatter for the bytes and wrote my own for the seconds, which does its part well. The problem is that I need to position the tick lines in a smart way - preferably dynamically, but even static settings (e.g. place a tick every 1024*1024*1024=1 GB or every 60 s) would be fine.
I tried setting the tickSize to 1024^3 like so:
var y_axis = new Rickshaw.Graph.Axis.Y({
graph: graph,
tickSize: 1073741824 // 1 GB
});
y_axis.render();
but I ended up seeing no ticks at all. What am I doing wrong and what would be the right way?
Source: (StackOverflow)
I am using Rickshaw (based on d3.js) to plot stacked bar charts. The problem is that the first bar is usually way more higher than the others, ruining the visual feedback.
Using logarithmic scale is (I guess) not an option here, because then the proportions between stacks in a bar will get broken. I wanted to introduce a horizontal break like in following image:
However, I cannot find any out-of-the box feature of Rickshaw or d3.js to do something like this. Any suggestions on how to make one?
Source: (StackOverflow)
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"
:22.31},{"x":1383906428000,"y":22.38},{"x":1383906452000,"y":22.31},{"x":1383906477000,"y":22.38},{"x":1383906502000,"y":22.38},{"x":1383906527000,"y":22.38},{"
x":1383906552000,"y":22.31},{"x":1383906577000,"y":22.31}],"name":"Sensor 1"},{"color":"#CC9065","data":[{"x":1383906402000,"y":22.38},{"x":1383906427000,"y":22
.38},{"x":1383906452000,"y":22.38},{"x":1383906477000,"y":22.38},{"x":1383906502000,"y":22.38},{"x":1383906527000,"y":22.38},{"x":1383906552000,"y":22.38},{"x":
1383906577000,"y":22.38}],"name":"Sensor 2"}]
The long values given here are data time between Fri Nov 08 13:26:42 FET 2013 and Fri Nov 08 13:29:37 FET 2013.
However, when hovering over the resulted graph, the dates shown for various values appear like "Sat Apr. 03", as in the image below. I do not understand why: if in javascript I iterate over the data, the javascript Date object show November time, not April.
The code is:
<div id="chart_container">
<div id="chart" style="background-color: white;"></div>
<div id="legend_container">
<div id="smoother" title="Smoothing"></div>
<div id="legend"></div>
</div>
<div id="slider"></div>
$.ajax({
type : "POST",
dataType: "json",
url : "/myApp/someURL",
data: { pack:selectedpack}
}
).done(function(data) {
showDashboard(data);
});
function showDashboard(data) {
$("#charts").show();
$("#chart").empty();
$("#legend").empty();
var graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
width: 1000 - 130,
height: 400,
renderer: 'line',
series: data
});
graph.render();
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: $('#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 axes = new Rickshaw.Graph.Axis.Time({
graph: graph
});
axes.render();
}
The following js files are included: jquery-ui.min.js, d3.v2.js, rickshaw.js, Rickshaw.Class.js, Rickshaw.Compat.ClassList.js, Rickshaw.Graph.js, Rickshaw.Graph.Renderer.js, Rickshaw.Graph.Renderer.Area.js, Rickshaw.Graph.Renderer.Line.js, Rickshaw.Graph.Renderer.Bar.js, Rickshaw.Graph.Renderer.ScatterPlot.js, Rickshaw.Graph.RangeSlider.js, Rickshaw.Graph.HoverDetail.js, Rickshaw.Graph.Annotate.js, Rickshaw.Graph.Legend.js, Rickshaw.Graph.Axis.Time.js, Rickshaw.Graph.Behavior.Series.Toggle.js, Rickshaw.Graph.Behavior.Series.Order.js, Rickshaw.Graph.Behavior.Series.Highlight.js, Rickshaw.Graph.Smoother.js, Rickshaw.Graph.Unstacker.js, Rickshaw.Fixtures.Time.js, Rickshaw.Fixtures.Time.Local.js, Rickshaw.Fixtures.Number.js, Rickshaw.Fixtures.RandomData.js, Rickshaw.Fixtures.Color.js, Rickshaw.Color.Palette.js, Rickshaw.Graph.Axis.Y.js
What should I do to obtain the November ... time instead of April?
Thanks.
Source: (StackOverflow)
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, y: 40 },
{ x: 1, y: 49 },
{ x: 2, y: 38 },
{ x: 3, y: 30 },
{ x: 4, y: 32 } ]
}]
But somehow I get alway the error " uncaught exception: series is not an array: [object Object]"
Here is my script :
var json = $.ajax({
'url': "http://127.0.0.1:8887/getMetricsJson/metricName/water_in/earliest/1398037036/latest/1398039416",
'success': function(json) {
console.log(json);
}
});
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'line',
height: 200,
width: 400,
series: json
} );
graph.render();
Source: (StackOverflow)
I am trying to write a real time graph based on dummy data for now.
My problem is that the resolution for my graph is too big for me.
My timeUnit is an hour, but I get a range of 16 hours which I don't need to see right now in the same graph.
For example the graph starts at 00:00 and ends at 16:00.
I would like to have a resolution like that:
00:00, 00:05, 00:10, 00:15, and so on....(tick every five minute).
I tried to work with timeunit=minute, but I still get the same range which is now divided to a more points.
This is my code for x-axis :
var time = new Rickshaw.Fixtures.Time();
var hours = time.unit('hour');
var xAxis = new Rickshaw.Graph.Axis.Time( {
graph: graph,
ticksTreatment: ticksTreatment,
timeUnit: hours,
timeFixture: new Rickshaw.Fixtures.Time()
} );
Source: (StackOverflow)
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 it?
Example:
Demo:
http://jsfiddle.net/xDZZJ/
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'area',
offset: 'wiggle',
height: 100,
width: 500,
series: data
} );
graph.render();
Source: (StackOverflow)
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 datas into a variable, and use that var in the js, it just doesnt' work. :(
This is my console log of what I get from the .php :
(As I said, if I copy paste that block of code into the .js substituting the "dataOutEvo" var, the graph displays as it should. So, I don't think the data is the problem.
[
{
name: "ligne",
data: [{x:0,y:35},{x:1,y:34},{x:2,y:36},{x:3,y:35},{x:4,y:40},{x:5,y:35},{x:6,y:37},{x:7,y:40},{x:8,y:45},{x:9,y:46},{x:10,y:55},{x:11,y:63},{x:12,y:61},{x:13,y:45},{x:14,y:48},{x:15,y:49},{x:16,y:45},{x:17,y:44},{x:18,y:52},{x:19,y:43},{x:20,y:37},{x:21,y:36},{x:22,y:37},{x:23,y:34}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:10},{x:1,y:15},{x:2,y:13},{x:3,y:15},{x:4,y:14},{x:5,y:16},{x:6,y:17},{x:7,y:25},{x:8,y:23},{x:9,y:24},{x:10,y:25},{x:11,y:28},{x:12,y:27},{x:13,y:21},{x:14,y:23},{x:15,y:19},{x:16,y:18},{x:17,y:16},{x:18,y:15},{x:19,y:14},{x:20,y:15},{x:21,y:16},{x:22,y:15},{x:23,y:16}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:45},{x:1,y:49},{x:2,y:49},{x:3,y:50},{x:4,y:54},{x:5,y:51},{x:6,y:54},{x:7,y:65},{x:8,y:68},{x:9,y:70},{x:10,y:80},{x:11,y:91},{x:12,y:88},{x:13,y:66},{x:14,y:71},{x:15,y:68},{x:16,y:63},{x:17,y:60},{x:18,y:67},{x:19,y:57},{x:20,y:52},{x:21,y:52},{x:22,y:52},{x:23,y:50}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:10},{x:1,y:15},{x:2,y:12},{x:3,y:5},{x:4,y:9},{x:5,y:15},{x:6,y:45},{x:7,y:125},{x:8,y:345},{x:9,y:256},{x:10,y:312},{x:11,y:345},{x:12,y:299},{x:13,y:165},{x:14,y:354},{x:15,y:368},{x:16,y:254},{x:17,y:213},{x:18,y:312},{x:19,y:165},{x:20,y:54},{x:21,y:32},{x:22,y:10},{x:23,y:5}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:2},{x:1,y:3},{x:2,y:2},{x:3,y:1},{x:4,y:1},{x:5,y:2},{x:6,y:3},{x:7,y:15},{x:8,y:45},{x:9,y:27},{x:10,y:40},{x:11,y:42},{x:12,y:35},{x:13,y:18},{x:14,y:42},{x:15,y:40},{x:16,y:30},{x:17,y:25},{x:18,y:40},{x:19,y:20},{x:20,y:6},{x:21,y:4},{x:22,y:2},{x:23,y:1}],
color: palette.color()
}
]
And this is the js where something goes wrong :
$(document).ready(function(){
$.ajax({
url: 'dataOutEvo.php', //le fichier qui va nous fournir la réponse
success: function(data) {
var dataOutEvo = data;
console.log(dataOutEvo);
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } );
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: 960,
height: 260,
renderer: 'line',
series: dataOutEvo
});
graph.render();
}
});
});
Could anyone tell me what goes wrong ? Thank you :) Mathieu
I'm asking myself now if I shouldn't go another way, using this:
$fp = fopen('dataoutevo.json', 'w');
fwrite($fp, json_encode($js));
fclose($fp);
And this :
var palette = new Rickshaw.Color.Palette();
new Rickshaw.Graph.Ajax( {
element: document.getElementById("chart"),
width: 800,
height: 500,
renderer: 'line',
dataURL: 'dataoutevo.json',
onData: function(d) {
Rickshaw.Series.zeroFill(d);
return d;
},
onComplete: function(transport) {
var graph = transport.graph;
var detail = new Rickshaw.Graph.HoverDetail({ graph: graph });
}
} );
But it's is still not working … Does anyone can help me and tell me what I'm doing wrong ?
Source: (StackOverflow)
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 charts manually (with extra code).
The other charting library I have used previously (highcharts) by default "resizes to fit its parent" when dimensions are not manually specified.
Is there a way to do something similar in rickshaw? If not, how do I implement something similar myself?
Source: (StackOverflow)
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 to map to, e.g., the height of the diagram.
var riskpoints = [62000000,48000000,30000000];
var rectDemo = d3.select("#chart").
append("svg:svg").
attr("width", 400).
attr("height", maxHeight).
attr('class','risk');
rectDemo.append("svg:rect").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[0])).
attr("height", yScale(riskpoints[0]) - yScale(riskpoints[1])).
attr("width", '100%').
attr("fill", "rgba(0,100,0,.3)");
rectDemo.append("svg:rect").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[1])).
attr("height", yScale(riskpoints[1]) - yScale(riskpoints[2])).
attr("width", '100%').
attr("fill", "rgba(100,100,0,.3)");
rectDemo.append("svg:rect").
attr("x",0).
attr("y", maxHeight - yScale(riskpoints[2])).
attr("height", yScale(riskpoints[2])).
attr("width", '100%').
attr("fill", "rgba(100,0,0,.3)");
This is exactly what I want, except that I have made the red, yellow, green background bars a fixed height.
When you use the slider, or, more importantly, when the graph is regenerated (which it will with the actual data), I want the background bars to adjust to the correct height.
For example, in the image, the green bar is somewhere between 300M and 200M. If you remove all the graph data except for the red (vertical) bars, the green bar (horizontal) is just above 40M. This is because the position/height of the background bars are not regenerated, whereas the position/height of the graph data are regenerated, via the rickshaw javascript.
How could I put this data into the rickshaw graph so that it is regenerated?
Source: (StackOverflow)
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 that I didn't duplicate a call to the same resources, but that didn't resolve the issue. Any ideas would be a big help. Below is a reproducible r-markdown file that can be knit into an html page with knitr. Thanks!
```{r echo = F, message = T, cache = F}
require(rCharts)
opts_knit$set(self.contained=T)
knitr::opts_chunk$set(results = 'asis', tidy = F, message = T, echo=F, fig.width=700)
```
### Chart
```{r chart}
# add dummy date column to iris to make a time series chart
x <- cbind(iris, date=seq.Date(as.Date("2010-01-01"), length.out=nrow(iris), by=1))
x$date <- as.double(as.POSIXct(x$date,origin="1970-01-01"))
r2 <- Rickshaw$new()
r2$layer(
Sepal.Length ~ date,
data = x,
type = "line",
min = "auto"
)
r2$set(
slider = TRUE,
title = "IRIS",
width = 700
)
r2$print('chart', include_assets=T, cdn=T)
```
### Table
```{r table}
r2 <- dTable(iris)
r2$print('table', include_assets=T, cdn=T)
```
Source: (StackOverflow)
After having a lot of fun getting the basic of shiny down using ggplot2, I'm trying out rCharts. However, I can't get the Rickshaw graph to display. Any help much appreciated; take it easy - I'm just getting use to this ;)
### ui
library(shiny)
require(devtools)
install_github('rCharts', 'ramnathv')
# moved from lower down so call to `showOutput` would not fail
library(rCharts)
library(rattle)
shinyUI(
pageWithSidebar(
headerPanel("Rickshaw test"),
sidebarPanel(
selectInput("variable",
"Choice is arbitrary:",
c("Choice 1", "Choice 2")
)
),
mainPanel(
showOutput("plot", "Rickshaw")
)
)
)
### server
data(weather)
w = weather
dateToSeconds = function (date) {
date = as.POSIXct(as.Date(date), origin = "1970-01-01")
as.numeric(date)
}
w$Date = dateToSeconds(w$Date)
shinyServer(function(input, output) {
output$mpgPlot = renderChart({
rs = Rickshaw$new()
rs$layer(MinTemp ~ Date,
data = w,
type = "line")
return(rs)
})
})
Source: (StackOverflow)