Git Product home page Git Product logo

graphene's Introduction

Graphene

Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone.

It was made to offer a very aesthetic realtime dashboard that lives on top of Graphite (but could be tailored to any back end, eventually).

Combining D3's immense capabilities of managing live data, and Backbone's ease of development, Graphene provides a solution capable of displaying thousands upon thousands of datapoints in your dashboard, as well as presenting a very hackable project to build on and customize.

Getting Started

Currently, Graphene loves Graphite's data model (through its API).

To start,

$ git clone git://github.com/jondot/graphene.git
$ cd graphene

Running the Example

Use the /example dashboard to build on.

You should serve that folder off some kind of a helper webserver. For Ruby:

$ gem install serve
$ serve .

And open up your browser at http://localhost:4000/example/dashboard.html. You should see the dashboard alive, rigged with a demo data provider.

Setting up a Dev Env

This is a no brainer. You gotta have Ruby though; back to your root Graphene folder,

$ bundle install
$ bundle exec guard start

This gives you an autogenerated build when you modify stuff in app/css and app/js. Take note that dashboard.html points to the build folder where your assets are automatically built to.

Building a Dashboard

You are probably wondering how do you disconnect the demo data provider and plug the Graphite data source. Don't worry - more about it after this.

As of now, you can place 3 types of data-enabled widgets on your dashboard: TimeSeries, GaugeLabel, and a GaugeGadget
You can have as many of these as you want, and you can also hook up several widgets to the same data source.

To build a new dashboard, you can/should use the builder:

var g = new Graphene;
g.demo(); // hook up demo provider, override all urls.
g.build(description);

Where description will be the hardest thing you'll have to do here. It is a hash structure, note that urls (since we use demo provider) do nothing. Here:

description = {
  "Total Notifications": {
    source: "http://localhost:4567/",
    GaugeLabel: {
      parent: "#hero-one",
      title: "Notifications Served",
      type: "max"
    }
  },
  "Poll Time": {
    source: "http://localhost:4567/",
    GaugeGadget: {
      parent: "#hero-one",
      title: "P1"
    }
  },
  "<just an informative label>": {
    source: "<graphite graph url, add &format=json to querystring>",
    "<widget type>": {
      parent: "<which will be placed in this element>",
      title: "<title>"
      // ... many other view opts ...
    }
  }
}

That's it basically. Advise the example for how your page should be structured.

Using Real Data

Lets see how to hook up a Graphite data source. You should first have an idea of how your dashboard looks like in "standard" graphite dashboard.

This means you can go ahead and build (or use) your dash with the "standard" dashboard tool that Graphite provides.

Cross-Domain

In any case, if you don't have your dashboard on the Graphite domain, you might have a cross-domain issue. In this case please set up your Chrome browser with google-chrome --disable-web-security.

Graphite Data API

Then, given that you saved your Graphite dashboard named resources, fetch this URL:

http://<graphite>/dashboard/load/resources

You should see a JSON structure which contain these:

/render?from=-2hours&until=now&width=400&height=250&target=some.metric&title=my_metric

Use that query. Append &format=json to it and you've got a Graphene-ready URL!

http://<graphite>/render?from=-2hours&until=now&width=400&height=250&target=some.metric&title=my_metric&format=json

Autodiscovery

If all you really want is to migrate your Graphite "old" dash, a good starting point would be with discover(), which will take all of your timeseries and convert to a dashboard running Graphene TimeSeries:

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.

You can also use the description result as a starting point for building a more elaborate dashboard.

Check out an example at /examples/dashboard-autodiscover.html

I Want More!

Since Graphene is really a Backbone application (View, and Model, no Controller here), you should be aware that your data is fetched to a Model, munged on, and 'broadcasted' to interested parties (such as widgets).

This means you can take a look at the Model, and be able to configure it to your own needs. One example is specifying a refresh_interval.

It wouldn't make sense to poll on your Graphite backend frequently, if the data is updated slowly; turn refresh_interval up a notch.

Extra View options

You can drop any of the below options in the builder's dashboard description.

GaugeLabel

  • unit - unit to display, example "km", or "req/s"
  • title - the gauge title
  • type - how should data get aggregated?
    • max picks the largest value in the set of datapoints,
    • min picks the smallest value in the set of datapoints,
    • current picks the newest value in the set of datapoints,
    • null or no setting picks the first value in the set.
  • value_format - you can specify a value formatter (see d3)

GaugeGadget

  • title - again, gauge title
  • type - same as GaugeLabel
  • value_format - value format
  • from - start value of the gauge
  • to - end value of the gauge

TimeSeries

  • line_height - visuals, default 16
  • animate_ms - new data animation in
  • num_labels - max labels to display at the bottom
  • sort_labels - order labels will be sorted
  • display_verticals - display vertical ticks (eww!)
  • width - box width
  • height - box height
  • padding - the kind of padding you need
  • title - box title
  • label_formatter - and a formatter, as before.
  • ymax - the max value for the Y axis. If not specified and the URL has a yMax parameter, the value will be taken from the URL. Otherwise, this option will have precedence.
  • ymin - the min value for the Y axis.

Visuals

Good news, other than problems with managing TONS of data points, I avoided using common graphing libraries because it's kinda hard to fit to how they see the world in terms of styling.

Here you'll be able to just style with CSS. Most graph elements are SVG, and you already have a good example of a high-contrast styling that I use.

Futher SVG is vector graphics. Try stretching up your dashboard, and you'll find the quality of render isn't affected.

Applying just common CSS rules should give you everything that you need.

Colors

A good thing to think about is colors in your graph. In a time series, you'd want each graph to appear distinct from the other, but still keep a general notion of style (relate to the previous one).
To do that, I've generated colors based on HSL, taking the next color on the wheel serially, and keeping a good distance for a good contrast.
For more detail, see /tools

Roadmap

These significant features will happen in the following weeks:

  • Visual hints. Lower/upper threshold options for TimeSeries. Once a value passes above/below these, the Graph will give a visual cue (flashing, heartbeat)
  • RSS widget. Include a stream of events using an RSS feed; provide regex rules which cause RSS entries to be included, or be classified as various levels of alerts. The goal is to be able to incorporate source control history (GitHub events), and alert feeds from other systems.

Thanks!

I'd like to thank (chronological order):

  • Mike Bostock - for D3 itself, its awesome!. I found myself experimenting hours upon hours with it, but not caring about the time flying by at all.
  • Tomer Doron (tomerd) - for the awesome D3 gauge gadget example which I've customized and included here.
  • Chris Mytton (hecticjeff) - contributions
  • Michael Garski (mgarski) - contributions
  • dcartoon - JSONP cross domain support
  • Sean Kilgore (logikal) - contributions
  • arctanb - contributions
  • Dennis van der Vliet (dennisvdvliet) - bar graphs and other contributions
  • cognusion - contributions
  • David Fisher (tibbon) - README fixes
  • Jean-Louis Giordano (Jell) - contributions
  • Michael Lavrisha (vrish88)- "current" gauge type
  • EButlerIV - contributions
  • David CHAU (davidchau) - contributions
  • Phil Cohen (phlipper) - contributions

Contributing

Fork, implement, add tests, pull request, get my everlasting thanks and a respectable place here :).

Copyright

Copyright (c) 2012 Dotan Nahum @jondot. See MIT-LICENSE for further details.

graphene's People

Contributors

adamzap avatar chrismytton avatar dennisvdvliet avatar drspin avatar ebutleriv avatar jell avatar jondot avatar jtolio avatar logikal avatar mgarski avatar phlipper avatar trbs avatar vrish88 avatar wndhydrnt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

graphene's Issues

rss

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

Stacked graphs not stacked

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 ?

one graph for multiple nodes

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

Latest code breaks all graphs

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.

don't redraw graph on every refresh

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.

cannot got graph connect to local graphite

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

Gauge type: sum

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

Two or more values on one graph?

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

Thanks for the inspiration

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.

Possible to draw two graphs, with 1 metric but different color?

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.

refresh_interval is ignored

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?

Wiki Population

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)

Cannot read property 'graphs' of undefined

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.

Easy way to set time on X scale to UTC.

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.

Multiple graphite hosts

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

TimeSeries chart for JSON data

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 ?

No axes labels for TimeSeries

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?

legend getting cut off

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

Sorting TimeSeries data by ymax causes random metric order if ymax is not supplied

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.

Do not fill line graphs

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.

Number of labels not increasing!

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.

Graphene <-> Redis Store communication

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

dev env isn't working right?

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

Example is misconfigured

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.

dashboard-autodiscover example doesn't draw graphs

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.

Blank graphs

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

don't redraw graph on every refresh

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.

Gauge type: current

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

BarChart

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

GaugeGadget not changing

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?

Stacking graphs

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.

Graphene TimeSeries data for PHP

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

null datapoint values result in uncaught TypeError for GaugeLabel gadget

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.

Bar charts

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

Or would that make a nice pull request?

D

Sorting Labels

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,

Handle trailing underscores in field name.

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.

drawAsInfinite

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

Upgrade D3?

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

How to use json data?

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.

Negitive Y-Axis Labels Display Incorrectly

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

Graphene showing no graphs

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

serve doesn't seem to work...

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.