Need graph / chart showing multiple trends with time ranges

Job ID: 31280919

Budget: $50 – $150 USD

DO NOT CHANGE YOUR BID AFTER YOU HAVE SENT IT!

We can make our own ugly, boring line, bar graphs and so are looking for someone that can do better than that.
Solve this challenge, earn your money and I may hire you to convert all of the graphs we are using.

First, show me your example of how you would solve this problem, showing a graph that has multiple averages and time frames. See files for sample data and a rough image.

The solution must work with php/html. It should use D3.js but it could also be done in C/C++ if you can work with my dev later to put it into the web site. You would not have direct access but he will show you the results as you are working together.

My goal is a beautiful, modern, easy to understand visual representation of four kinds of data.
I am calling it a graph but what ever it is called, it is a view of changing data.
I need a graph that shows 4 elements but the elements are quite different from each other. The view will be constantly updated as new data comes in.

One is a trend of averages.
One is a second, different average.
One is a time range showing when something started and when it ended.
One is a second time range showing when something started and when it ended.

The challenge is to end up with one view that can easily show how things are going no matter if the person looking is non technical or technical.

The example image is just something ugly that was cut/pasted together using photo editing software. It is only for you to get some idea of what I am after. Your should definitely look much better.

I need something very modern, using readily available tools on Linux or even C/C++. No commercial packages/tools should be used.
It needs to be done in a way that my dev can maintain it.

Please see the sample data included which is explained like this.

- the 4 json streams are feeding the 4 graphs in the attached image
- the x axis is the time frame chosen
- the left Y axis is the percentage represented by the trend stream
- the right Y axis is showing the pings answer in milliseconds

The solution cannot use a commercial package, it must be custom programmed by you and easily maintained by the dev that will receive the code you will provide. I do not want something that will break in a few months and need constant updates.

If I pick your work and you agree and accept, you agree to work with my dev, providing what ever small changes might be needed in order to integrate this into the site.
Related categories: PHP C Programming JavaScript C++ Programming D3.js