jondot / graphene Goto Github PK

My graph is not updating if the value is 0. Why is that and how can I graph a 0 value?

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

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...

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.

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

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.

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 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.

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?

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.

Any plans to start doing bar charts in the near future?

Or would that make a nice pull request?

D

You could either grab the yMax parameter from the URL, or support your own min and max parameters specified in the TimeSeries widget type.

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.

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.

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 !

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.

Will complete a Wiki with:

• General documentation
• Problem/solution page (mostly lessons learned from issues)
• Graphite setup tricks
• Fancy dashboard tricks
• Various example dashboards (screenshot/live)

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.

Just came across this nice graphing library. Will try to use it within graphene.

https://github.com/novus/nvd3

Let me know what you think.

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"
    }
  }
}

How's the rss support coming along? It's the only thing keeping me from pulling the trigger

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"
}
}
}

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.

Hey, I'm looking to add metrics from multiple graphite hosts into one graph. Does graphene support this?

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.

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 ?

Hello,
I want to do prepare a timeseries chart for dynamic data ?
Is this Graphene is working for PHP ? or its suits for Ruby ?

On the Barchart the labels with the time at the botton do not get deleted once a new one comes?

Will be a screencast detailing:

• Bootstrapping a development environment
• Making a change to Graphene
• Building and viewing results

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

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".

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.

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

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.

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.

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 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.

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?

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,

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

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 ?

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.

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>'

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

Any chance we can get support for graphite's 'drawAsInfinite()' function? Useful for tracking rollouts and whatnot.

Hello

i want to disply "LOCAL_BAND_OUT",How do it?

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

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?