jondot / graphene Goto Github PK
View Code? Open in Web Editor NEWGraphene is a realtime dashboard & graphing toolkit based on D3 and Backbone.
Home Page: http://jondot.github.com/graphene
Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone.
Home Page: http://jondot.github.com/graphene
Awesome stuff...
We're looking at using this instead of Highstock for showing netflow in real time on router interfaces, so it'd be interesting to be able to combine multiple values on one TimeSeries.
Is it possible to retrieve more than one series from Graphite and show on one graph, like is done with the num_series in the DemoTimeSeries function?
Thanks,
Avi
Hi,
I am new to Graphene. According to instructions I cloned graphene and copied the graphene folder to webapps folder in Graphite.
Now i tried accessing the .../example/dashboard.html from browser. I can see the page but don't see any graphs with sample data. It just shows me message as follows
A D3.js, Backbone.js based Graphite Dashboard Toolkit.
Could you help me if i am missing anything. could you please send me instruction as what i need to do please.
Thanks in advance.
--Sandeep
Could you clarify how to properly hook up a GaugeGadget? I have both a GaugeLabel and GaugeGadget using the same source data from Graphite. The GaugeLabel works perfectly, but the GaugeGadget just stays steady at 0.
I based this off the example-dash.js
file:
"Overall Request Rate": {
source: "http://graphite.example.com/render?from=-1hours&until=now&width=400&height=250&target=alias(sum(prod.web*.com.example.server.MyService.webapp-OverallRequestRate.1MinuteRate)%2C%22Webapp%20Requests%2FSecond%22)&title=Request_Rate&uniq=0.05719376518391073&format=json",
GaugeLabel: {
parent: "#hero-one",
title: "Requests / Second"
}
},
"Overall Request Rate Gadget": {
source: "http://graphite.example.com/render?from=-1hours&until=now&width=400&height=250&target=alias(sum(prod.web*.com.example.server.MyService.webapp-OverallRequestRate.1MinuteRate)%2C%22Webapp%20Requests%2FSecond%22)&title=Request_Rate&uniq=0.05719376518391073&format=json",
GaugeGadget: {
parent: "#hero-one",
title: "Requests"
}
},
Anything obvious I might be missing?
I wanted to write a quick note to say thanks. I've used Graphene for a short while and thought it had lots of great ideas and it was fun to use.
It was certainly a source of inspiration for creating giraffe - an open source graphite dashboard that is similar to graphene in many ways, but still different enough to stand on its own (skinny) feet.
I am hoping we can find way to collaborate, share ideas, and be able to contribute to the entire community.
The legend for a time series graph (when using sum) is not displaying completely. About 2/3 of the text is being cut off, though is present in DOM. Any ideas what might be causing this or how to fix? I am aware of the num_labels argument, but increasing does not change anything. Perhaps not unexpected, since I have only one legend entry due to summation.
thanks,
Dave
Super excited to play with graphene. I'm wondering if you've thought about only requesting data from graphite since the last draw of the graph and streaming it in? My understanding is that d3 can deal with adding data points to an existing graph.
Hello.
I guess that I missed something simple but when I try TimeSeries plot I have no both time and value labels, just pure plot with min and max values below. And it's the same as for demo mode and for real graphite source as well.
Here is my definition of TimeSeries:
"Tk_u": {
source: "<graphite-server>/render?from=-1hours&until=now&width=400&height=250&target=my.metric.name&title=Name&format=json",
TimeSeries: {
parent: '#g1'
}
}
And I include graphene css file in the html header:
<link rel="stylesheet" href="css/graphene.min.css" type="text/css" media="screen" charset="utf-8">
and all js before the </body>:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/graphene.min.js"></script>
<script type="text/javascript" src="js/graphene-dash.js"></script>
The result:
What am I doing wrong?
2: {
source: "http://0.0.0.0.:8080/render?from=03%3A00_20130625&until=03%3A30_20130625&width=400&height=250&target=trialfinal.bugg.vks&target=trialfinal.bugg.ov&target=trialfinal.bugg.total&target=trialfinal.bugg.mr&target=trialfinal.bugg.as&target=trialfinal.bugg.vk&uniq=0.0689613800495863&format=json",
TimeSeries: {
title: 'title',
num_labels: 'six',
//parent: '#g1-2'
}
}
thats my code but the num_labels does not seem to work even if i try a number, say, 6. now there are lines on my graph that are unexplained. it shows only three.
sort_labels = order labels will be sorted
label_formatter = and a formatter, as before.
I'm having issues trying to figure out how to use these two options for timeseries graphs,
Problem I'm having is my graphs randomly have the 2 labels swapped around on a page. say download and upload on one graph its correct next graph its swapped around and this happens throughout the page on the other graphs.
Any ideas on how i may go about resolving this?
Thanks,
Add support to mobile devices, such as tablets or phones.
In general, Graphene now looks apparently not functional in mobile browsers/low-res screens, see this link at browserstack of some screenshots of Graphene in mobile browsers, now.
Who agrees with me?
I have the autodiscover example running, it seems to grab the data sources as it draws the correct number of SVG objects in the window and I can see it polling in the Javascript console, but the graphs themselves never show up.
I get this in the console as well but not sure if this is related:
jquery-1.7.1.min.js:4 Resource interpreted as Script but transferred with MIME type text/json: "http://<hostname>:8000/render?width=500&from=-2hours&until=now&height=400&target=*.stat.requests&uniq=0.30485176341608167&title=*.stat.requests&format=json&jsonp=jQuery171029370606574229896_1347397300623&_=1347397500894".
Will complete a Wiki with:
Hi there,
I just started playing around a bit with Graphene and put together a fairly robust dashboard pretty quickly. Thanks! One question, though: my Y axes are running into an SI formatting bug from D3. They fixed it and pushed it to master yesterday as part of 2.9.2. It looks like the version of D3 included with Graphene is 2.7.2. Any plans to upgrade so we can get the fixes they've made in the last three months?
Thanks,
Travis
Title says it all. All my TimeSeries (at a minimum -- probably my GaugeLabels as well) are refreshing every 1s, no matter what I set their refresh_interval to. It's entirely possible I'm misusing the API, but I can't find a definitive example. Here's what I've got:
"example-timeseries": {
source: GRAPHITE_BASE + "target=my.special.thing&from=-24hour&until=now",
TimeSeries: {
refresh_interval: 1000000,
parent: '#my-special-thing',
width: 700,
height: 450
}
},
Am I doing something wrong?
Is there an easy way to just have the line graph but do not fill it in? I would have emailed you or try to message you on IRC but seems as if you do not have any information other than your twitter handle.
Thanks in advance graphene is awesome and we are using internally at our company.
I'm getting started with graphene and trying to use the autodiscover example.
The docs aren't clear to a noob, so I may have set things up incorrectly. Docs say:
var g = new Graphene;
g.discover('http://my.graphite.host.com',
'dev-pollers',
function(i, url){ return "#dashboard"; },
function(description){
g.build(description);
console.log(description);
}
);
/* You should specify graphite host, dashboard name,
a parent specifier which is responsible to spit out the next graph parent,
and a result callback. */
So, I've replaced 'http://my.graphite.host.com
with my grapite subdomain, replaced dev-pollers
with a saved dashboard name, and left the callback and return "#dashboard"
as they are.
When I run what I have, the page connects with my server, then spits out a javascript error:
Uncaught TypeError: Cannot read property 'graphs' of undefined index.js:11
Graphene.discover index.js:11
f.Callbacks.n jquery-1.7.1.min.js:2
f.Callbacks.o.fireWith jquery-1.7.1.min.js:2
w jquery-1.7.1.min.js:4
f.support.ajax.f.ajaxTransport.send.d
Can you help? Thanks.
My graph is not updating if the value is 0. Why is that and how can I graph a 0 value?
Hello,
I want to do prepare a timeseries chart for dynamic data ?
Is this Graphene is working for PHP ? or its suits for Ruby ?
Hi,
I'm new to Graphene & want to fetch data for Graphene from Redis store. Can anyone please help me on any documentation/links/steps on how to achieve this.
Thanks in advance.
Shailendra...
Going through instructions and when I get to this point, after installing the serve gem, and executing this command:
$ serve .
...it chokes with the listing below. Tried it with 2.12, 2.1.0, 2.0.0. I've posted an issue on jlong/serve#118 repo but no response so far.
Might there be another another approach to setting up graphene charts that does not depend on serve? Or a way to fix what looks like some kind of dependency problem?
Thanks in advance,
Chris.
on RHEL 6.5
# serve .
/usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require': cannot load such file -- i18n/core_ext/string/interpolate (LoadError)
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/activesupport-3.2.19/lib/active_support/core_ext/string/interpolation.rb:2:in `<top (required)>'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/activesupport-3.2.19/lib/active_support/core_ext/string.rb:9:in `<top (required)>'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/activesupport-3.2.19/lib/active_support/core_ext.rb:2:in `block in <top (required)>'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/activesupport-3.2.19/lib/active_support/core_ext.rb:1:in `each'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/activesupport-3.2.19/lib/active_support/core_ext.rb:1:in `<top (required)>'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/activesupport-3.2.19/lib/active_support/all.rb:3:in `<top (required)>'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/serve-1.5.2/lib/serve.rb:1:in `<top (required)>'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/site_ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
from /usr/local/rvm/gems/ruby-2.0.0-p0/gems/serve-1.5.2/bin/serve:13:in `<top (required)>'
from /usr/local/rvm/gems/ruby-2.0.0-p0/bin/serve:23:in `load'
from /usr/local/rvm/gems/ruby-2.0.0-p0/bin/serve:23:in `<main>'
from /usr/local/rvm/gems/ruby-2.0.0-p0/bin/ruby_executable_hooks:15:in `eval'
from /usr/local/rvm/gems/ruby-2.0.0-p0/bin/ruby_executable_hooks:15:in `<main>'
Will be a screencast detailing:
Is there a way to display the latest data point on a gauge label or gadget? Something like:
var description = {
"Current Speed": {
source: "http://localhost:4567/",
GaugeLabel: {
parent: "#hero-one",
title: "Your speed is",
type: "current"
}
}
}
Any chance we can get support for graphite's 'drawAsInfinite()' function? Useful for tracking rollouts and whatnot.
Hey, I'm looking to add metrics from multiple graphite hosts into one graph. Does graphene support this?
Hey Jondot, I've been working with graphene creating some interesting graphs to display various server metrics.
I was curious is it possible to set the timezone?
Tried using &tz=UTC but that doesn't make any difference to the JSON data.
Thanks in advance.
How's the rss support coming along? It's the only thing keeping me from pulling the trigger
Any plans to start doing bar charts in the near future?
Or would that make a nice pull request?
D
Is there a way to stack the graphs? I know d3 allows this but is there a quick way to do it in graphene? Trying not to write a new function to do it.
After got data:
Uncaught TypeError: Cannot read property '0' of undefined
Graphene.GaugeLabelView.b.by_typeindex.js:11
__bindindex.js:11
(anonymous function)index.js:11
findex.js:10
bi.dataindex.js:10
Graphene.GaugeLabelView.b.renderindex.js:11
__bindindex.js:11
c.Events.triggerindex.js:8
d.extend.changeindex.js:8
d.extend.setindex.js:8
Graphene.TimeSeries.b.process_dataindex.js:11
__bindindex.js:11
__bindindex.js:11
Graphene.GraphiteModel.b.refreshindex.js:11
d3.jsonindex.js:9
dindex.js:9
d3.xhr.d.onreadystatechangeindex.js:9
index.js:11
It would great if the control could handle a defined min value, or simply display 0 in the event of a return of all null datapoints.
when i use curl to http://localhost/render?from=-10minutes&until=now&width=400&height=250&target=collectd.localhost.memory.memory-used&target=collectd.localhost.memory.memory-free&format=json, I can got the right json format output from graphite
I modify the dashboard-autodiscover.html to following, "test" is my dashboard name
g.discover('http://localhost', 'test', function(i, url){ return "#dashboard"; }, function(description){
g.build(description);
console.log(description);
but I got nothing
Hello, I was toying around with Graphene, it's a beautiful thing excellent work!
I had been trying to figure out how to change the line and stroke color for an individual graph.
It seems like something very simple to do but I cannot figure it out.
I've tried setting it in the div container like that, but it only changes the horizontal lines color and not the color of the graph itself.
I know if i go into the CSS and change h-col-1 then all of my graphs will change in color. But i'm wanting to change 1 graph for example to blue tracelines and have another graph with green tracelines.
It's probably something very silly.
Thank you.
How can I stop graphene object and backbone http calls and is refresh,
The situation is this one, I'm trying to Graphene into a Jquery UI so when I go from one Div to another, I want to stop the ajax calls.
Looks like this one was introduced during one of the changes for allowing multiple data models.
Need to resolve by getting a 'Demo' version of View.model.
You could either grab the yMax
parameter from the URL, or support your own min
and max
parameters specified in the TimeSeries
widget type.
The example dashboard doesn't work for me out of the box. There are no Javascript errors in the console. There are no 404s. I did however notice that the index.css
file is served empty. I'm not a Ruby guy so I'm not sure how to fix this issue.
We don't supply a ymax
value for our graphs, so we were getting random ordering of TimeSeries metrics. By this I mean the order in which the metrics were graphed was different each page refresh along with the colors, etc.
To fix this, I removed the following line from graphene.coffee
:
data = _.sortBy(data, (d)-> order*d.ymax)
(https://github.com/jondot/graphene/blob/84b55772/app/js/graphene.coffee#L405)
I didn't offer this change as a pull request because some people probably use ymax, but I wonder if this sorting behavior should be condition based on an option on the graph description.
Just came across this nice graphing library. Will try to use it within graphene.
Let me know what you think.
Could you provide small sample how to use json data instead of described sources?
I'd like to use ajax calls by timer to call my wcf resful service which returns simple json data per call
name: "CPU",value: '23'
name: "Memory",value: '55'
Thank you very much.
I pulled down the latest master this morning and all my graphs broke. After a bunch of individual file copying, it seems build/index.js is the culprit. Once I revert to my previous version, graphs work. Process is repeatable.
I will look more into this later...hoping that somebody else has already seen and fixed this to save me some time.
Hi !
Let's say I have a graphql query that takes a parameter which is named after a reserved python keyword (e.g: from
). Following python conventions, this is how I would declare it:
some_query = graphene.Field(SomeSchema, from_=graphene.String(name="from"))
Here, name
is used so that a user don't have to deal with the ugly underscore. Which is nice. However, there is a problem in the resolver:
def resolve_some_query(_, args, context, infos):
args["from_"] # KeyError ! Because the arg name is 'from' which is not what I expect.
Now this is not a big deal, I could just use args["from"]
when I need the value. But it becomes a problem when I want to pass all the parameters to an other function like this:
def resolve_some_query(_, args, context, infos):
call_some_handler(**args)
Because my function signature would looks like this and cause a syntax error:
def call_some_handler(from=None):
pass
I think trailing underscores should be removed when calling graphene.utils.str_converters.to_snake_case
this would allow usage of python reserved keyword as parameters name while not breaking compatibility. If you guys agree with this I can make a PR during the weekend.
If I create a graph as a stacked graph and then view in graphene's dashboard-autodiscover it does not display as a stacked graph. Is this form of graph unsupported or have I misconfigured something ?
Super excited to play with graphene. I'm wondering if you've thought about only requesting data from graphite since the last draw of the graph and streaming it in? My understanding is that d3 can deal with adding data points to an existing graph.
Is there a way to display the total data point on a gauge label or gadget? Something like:
var description = {
" The Sum": {
source: "http://localhost:4567/",
GaugeLabel: {
parent: "#hero-one",
title: "The Sum is",
type: "sum"
}
}
}
hi,
i have about 15 nodes on one graph on a 5min interval updating every second, because of this the graph is completely filled and is not visually clear.
is it possible to use "dots" instead of "lines" on the graph.
Do you have any other recommendations?
-kshk
Hi, I am creating chart for TimeSeries Data, I have done code for getting JSON output as below.
([{ "first": "12.35", "second": "34.5", "third": "04.34"}])
But this output will not prepare a chart of TimeSeries in Graphene.
Is it worked for PHP coding ? My code was written in PHP and made json_encode and call the GET request to PHP file and get the response as JSON data as above mentioned.
If it works for PHP, then How to pass these data to Graphene chart and how it could be possible to make changes dynamically ?
Rather than something like:
-2K
Instead I see:
∹2K
If the characters did not display correctly in this post then they were a lowercase A with a caret on top, a superscript caret, and a tiny superscript 1 which is no bigger than the caret. Followed by 2K
Hi, great project. I'm trying to add a couple features to it, but I'm having some problems getting the dev environment set up. I'm primarily a python guy without a lot of ruby experience so this is all new to me.
Anyways, it seems that when I run bundle exec guard start
it picks up my changes and says it's recompiling build/index.js
but that file is left full of sprockets include directives instead of the actual minified code.
Am I missing a step?
Thanks, Aaron
On the Barchart the labels with the time at the botton do not get deleted once a new one comes?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.