[REWARD 3000 NXT+] JS Charts for DGEX

[Graviton]

We need charts for DGEX market data, fetched from here:

http://dgex.com/ticker.cgi

Use Flot http://www.flotcharts.org/ or jqplot http://www.jqplot.com/

Nice looking line chart or area chart, realtime ajax update is a big plus

Required in delivery:

- Sample html page with ticker.cgi as a dynamic data source
- sample html page with static data sampled from the rates

If ticker.cgi is not proper JSON please advice what to modify

All entries are tipped / rewarded, with the best one chosen for implementation and paid a minimum of 3000 NXT reward

[blindshot]

Very close! Should have something by tomorrow night, need to get some sleep so I don't pass out at work tomorrow

[blindshot]

Alright so I got something rough up on 2 hours of sleep so bare with me.

http://milo-media.net/nxtGraph/samplegraph.html

I used Flot, it's a time chart, but currently it's not date formatted so you'll see the x-axis being a timestamp for now, will fix when I get home.

There are 2 lines 1 showing price over time and the other units sold over time, the units sold would match the price on the x-axis. This is one way of presenting the data, if you prefer another way we could do that.

You can show/hide each type, Volume or Price.


The chart is checking an external data source with AJAX and refreshing it every 3 seconds right now, its just that the data source is never updating so you don't really see a change, but if i change the file real time you will see the change almost instantly.


What we could do is just have the Price being shown, and have a circular point where the x and y meet and when a user hovers over it they can see the price and the units (i'm guessing this is units sold at that price). This would be much cleaner then having both lines like I have now.


I have to run to work but looking forward to some feedback. Oh also, with this option I can also add ranges as buttons so Today | 1 week | 3 Months | 6 Months, etc..

[Alias]

Well done, that is very impressive. You're hard work is appreciated by the Nxt community.

One slight bug that I might point out is that when one de-selects the volume plot the price plot changes to the yellow/orange color. Ideally it would remain the same blue color.

Including data point labels (user select-able options), as seen here - http://blogs.sas.com/content/graphicallyspeaking/files/2013/03/SparseSeriesAllLabels4.png - might be useful too.

Keep up the good work!

[blindshot]

Hey thanks for the feedback. Yeah it still needs some love, but was just playing around with what options they had. They didn't really have an example of time based series charts polling a data source so had to figure out how it all works. Still some quirks, i noticed that label coloring issue, it's quite annoying but I'll get to the bottom of it, that's if we go the 2 y-axis route. The design is allf rom the sample CSS on Flot but when I know where it's going I can completely redesign to fit the style of its surroundings.

It's a rough draft, with more feedback like yours we'll get something nice and tight.
Thanks

[Graviton]

What we could do is just have the Price being shown, and have a circular point where the x and y meet and when a user hovers over it they can see the price and the units (i'm guessing this is units sold at that price). This would be much cleaner then having both lines like I have now.

Yes two line graphs is not looking good, either use the circular data point or another bar graph for volume.

Please make it handle our ticker.cgi json output through ajax so we can maybe evaluate the performance on a bit larger data series.

[blindshot]

Ok cool i'll go with something similar and get bar graph as well for volume.
Right now it's pulling data from a json file which should have the format of the needed json feed from your .cgi. You can see that here http://milo-media.net/nxtGraph/nxt_data.json (mind you since we'll be going more simple the feed will be a bit different). P

The current .cgi json output does not match exactly, if we go simple I'll try to get it to read data directly from the feed but for sure some formatting will need to be done, like for example changing the date string to a timestamp instead.  Is there control over what the .cgi can spit out?

Worse case I can try formatting with javascript, but doing that with real time data is a lot less efficient, but let me know what limitations I'd have so I can deal with it.

Thanks

[Graviton]

The current .cgi json output does not match exactly, if we go simple I'll try to get it to read data directly from the feed but for sure some formatting will need to be done, like for example changing the date string to a timestamp instead.  Is there control over what the .cgi can spit out?
Thanks

Yea I can modify to my heart's extent but I suck at JSON and do not have much time to mess with that.

Can probably change date to timestamp, but why would that be needed - we are using dates anyway on the chart so you need to convert back and forth?

[starik69]

http://dgex.com/ticker.cgi has incorrect JSON. I tried to parse it in googledocs and got errors

[blindshot]

The current .cgi json output does not match exactly, if we go simple I'll try to get it to read data directly from the feed but for sure some formatting will need to be done, like for example changing the date string to a timestamp instead.  Is there control over what the .cgi can spit out?
Thanks

Yea I can modify to my heart's extent but I suck at JSON and do not have much time to mess with that.

Can probably change date to timestamp, but why would that be needed - we are using dates anyway on the chart so you need to convert back and forth?

I'll try to make it so you just have to change the timestamp, the rest of the format was pretty close. For series it wouldn't work but maybe the dot line plot will accept 3 values.

You could also send me the portion of your script that is spitting out the JSON code so I can take a look at it and modify if needed.


The size of the current JSON that you spit out should more than easy to parse, we'll just need to test how big it could get. As far as serving that .cgi, you can cache it for x seconds at a time and it will save you a lot of headaches. Would be good to go through cloudflare to cache it, so your servers will only get hit once every 3 secs.

I'm still at work so i'll get some more info and stuff out later when I get home. I'll keep you guys posted.

[Graviton]

http://dgex.com/ticker.cgi has incorrect JSON. I tried to parse it in googledocs and got errors

Yes acknowledged. Any quick tips what's wrong there please?

[starik69]

I am not a good specialist in this, i tried to put commas between } { but still got errors. May be "" is not needed around number values also.

You may want to look at BTC-e api - https://btc-e.com/api/2/btc_usd/trades, i think they have correct JSON.

[blindshot]

Yeah it's missing commas as mentioned like so:


              {   "time": "2013-12-03 09:58:56",
         "unitprice": "0.00000970",
         "units": "1500.00000000"
      }, <------COMMA
      {   "time": "2013-12-03 09:21:30",
         "unitprice": "0.00001148",
         "units": "34.00000000"
      }

but on the final one it doesn't need the comma, it will actually get an error if its on the final one. I dont' see anything else wrong by eye, but will check later on

[starik69]

Ok, i got it parsed. Inserted commas between } { and removed "" around numbers (not dates).

[Graviton]

Nice. A properly formatted version now at

http://dgex.com/ticker4.cgi