HTML5/Javascript Chart Utility

Closed

I need a html5/javascript implementation of my chart utility. The chart utility displays sensor time/value data

and also displays markers for ON/OFF times of outputs. I need something implmented in html5/js that provides

the same type of functionality. JSON data is available from the web server.

For example the following http request:

[url removed, login to view]

hardwareName=someSensor&startDate=1173551940612&endDate=2378171603111&maxDataPoints=15000

would return (shortened for readability):

{"datapoints":[{"v":"5.6","t":1381103025762},{"v":"5.6","t":1381103146752},{"v":"5.6","t":1381103266995},

{"v":"5.6","t":1381103387170},{"v":"5.6","t":1381103508142},{"v":"5.6","t":1381103628858},

{"v":"5.6","t":1381103749489},{"v":"5.6","t":1381103870488},{"v":"5.6","t":1381103991390},

{"v":"5.6","t":1381104112629},{"v":"5.6","t":1381104233148},{"v":"5.6","t":1381104353670},

{"v":"5.6","t":1381104474200},{"v":"5.6","t":1381104594957},{"v":"5.6","t":1381104715354},

{"v":"5.6","t":1381104835836},{"v":"5.6","t":1381104956338},{"v":"5.6","t":1381105077674},

{"v":"5.6","t":1381105198165},{"v":"5.6","t":1381105318671},{"v":"5.6","t":1381105439166},

{"v":"5.6","t":1381105559942},{"v":"5.6","t":1381105680416},{"v":"5.0","t":1381177680739}],"name":"someSensor"}

An outputs data would look like this:

Request:

[url removed, login to view]

%20Exhaust&startDate=51940612&endDate=3378171603111&maxDataPoints=15000

Response:

{"datapoints":[{"v":true,"t":1380170993272},{"v":false,"t":1380170999334},{"v":true,"t":1380171992770},

{"v":false,"t":1380171997667},{"v":true,"t":1380172054144},{"v":false,"t":1380172062683},

{"v":true,"t":1380172125078},{"v":false,"t":1380172126256},{"v":true,"t":1380172130657},

{"v":false,"t":1380172132540},{"v":true,"t":1380172135817},{"v":true,"t":1380699219967},

{"v":false,"t":1380699221454},{"v":true,"t":1381103936250},{"v":false,"t":1381104527795},

{"v":true,"t":1381182696772}],"name":"FR Exhaust"}

You can discover all the hardware using this request:

[url removed, login to view]

Example response:

{

"hardware":[

{

"name":"Temperature in the front room 1",

"type":"value_sensor",

"units":"°F"

},

{

"name":"CA Temperature",

"type":"value_sensor",

"units":"°F"

},

{

"name":"CA 94553 Humidity",

"type":"value_sensor",

"units":"%RH"

},

{

"name":"Res1pH",

"type":"value_sensor",

"units":"pH"

},

{

"high_reading":"Closed",

"name":"Front Door",

"low_reading":"Open",

"type":"binary_sensor"

},

{

"name":"FR Exhaust",

"type":"standard_output_device"

},

{

"name":"FR Lights",

"type":"standard_output_device"

}

]

}

binary_sensors have only 2 possible readings 0 and 5. 5 corresponds to a "high_reading" and 0 to the "low reading" tooltips for each datapoint should show the low and high reading text.

Please discuss in your bid the charting library you intend to use. We will consider commercial libraries.

Attached is a video with a walk through of the current implementation. We require similar functionality but we are open to changes/improvements.

Skills: HTML5, Javascript, Software Architecture

See more: html5 chart, chart html5, javascript chart temperature, javascript chart, html5 utility, utility html5, web video commercial, web server in javascript, html5 text, html5 software, web chart, rh, html ca, html javascript example, javascript tooltips, time javascript html, json request response, javascript video html, chart json, chart example, json utility, javascript json, json response, html tooltips, html5 similar

Project ID: #5004256

10 freelancers are bidding on average $339 for this job

MOrigoni

Hi gtguy, I'm a javascript ninja, proficient using html5. I would recommend using the canvas API to display the sensors and the tooltips. Would you like also to display a background image, like a blueprint? Will th More

$280 USD in 5 days
(34 Reviews)
4.9
techwelfare

hi we could do it perfectly with accuracy, please let us know if you want any clarification. if you want us to share our skill and previous work please initiate the chat..

$302 USD in 10 days
(16 Reviews)
4.7
zamoldar

hello, I have very much experiance with jquery-ajax , I can handle this job very well here my some works with jquery-ajax chart with live data http://zamoldar-processor-usage.apphb.com/ http://zamoldar-piechart. More

$300 USD in 7 days
(7 Reviews)
4.4
lctwebdesign

Hello! I have reviewed your requirements, and am very interested in taking on this project. The project seems pretty straightforward, especially given the video of the current implementation, and I am confident I c More

$305 USD in 6 days
(8 Reviews)
4.1
binhnx

Hi. I'm serious bidder here. i have experience in graph / plot in html5 or js. Looking forward to working with you guy!

$300 USD in 20 days
(3 Reviews)
3.4
smhg

I propose a solution using either D3 (http://d3js.org/) or Raphaël (http://raphaeljs.com/). The result will be very similar in both. * D3 offers better performance and less overhead, but without Internet Explorer bel More

$690 USD in 7 days
(2 Reviews)
2.8
auyadhu

Sir,i have a team of professionals at your disposal.Our web-development team had gone through the details you had given and they are likely to start this project.Our team consist of web-developers,mobile app developers More

$412 USD in 8 days
(1 Review)
2.0
pbqeu

Based on the video, I would recommend you to just use Jqplot. it is open source. easy and rich-featured, meet with your requirements. If you require more dynamic features which I don't see in video, then I recommend yo More

$300 USD in 5 days
(1 Review)
1.7
guangzhen122

Hello Dear Client. Thank you for your posting. please choose with confidence. I have ever done similar work as you want. If u contact me,i will show that demo. I am experts in web development. I have many experi More

$277 USD in 2 days
(10 Reviews)
1.7
hhmlondon

I am very qualified and can do work for you without complications, delays or the need of other freelancers. I double check all my work and I also have references available if you are in need of any to be sure I am wort More

$222 USD in 3 days
(0 Reviews)
0.0
uditgarg90

Hello Sir, I work on Javascript Charts only for various customers like vodafone n all. The libraries i am using to make those charts are your D3, Raphael, Fusion charts, Amcharts and various other open source librari More

$277 USD in 6 days
(0 Reviews)
0.0