Jump to content









Photo

Documentation for Carriots graph

graph wizard

  • Please log in to reply
14 replies to this topic

#1 mayginne

mayginne

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 08 November 2013 - 08:20 PM

What are the correct values for 'sort' and 'order' ? And can you order a graph with time/date on the x axis so that current time is on the right and past time is on the right?

 

When I use the graph wizard to create a graph it also gives a script :

 
  'query[sort]': '_id', 
 'query[order]': 'desc', 

 

But the Graphs documentation shows an example with: 

 
'query[sort]': 'asc',
'query[order]': 'at',
 
So I think the meanings of 'sort' and 'order' have been transposed somewhere.
Then to make it a little more confusing in the graph documentation it says use the streams documentation, in streams the valid 'order' parameters are -1, and 1. 
 
I've played around with all the combinations, but no mater what I can't seem to make time flow from earlier to later on my time x-axis, and some combination return errors for 'desc' and 'asc' and I get no graph at all. 


#2 jpastor

jpastor

    Development leader

  • Administrators
  • 159 posts

Posted 11 November 2013 - 10:21 AM

Hello mayginne

The correct values ​​are:

    'query[sort]': 'at',
    'query[order]': 'asc',


There was a typo in the documentation but currently it's solved.

Regarding the other question, you could sort your x axis from earlier to later without problems.

An code example:

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>graphs</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
</head>

<body>
    <div id="carriots-graph" style="max-width: 900px;margin:auto;"></div>   

<script src="https://www.carriots.com/js/graphs.js"></script>
<script type="text/javascript">
   
         var carriots = {
        'apikey' : 'YOUR APIKEY',
        'mime' : 'image/svg+xml',
        'type' : 'bar',
        'axis[x]' : 'at',
        'axis[y]' : 'humidity',
        'data[0]' : 'temperature',
        'data[1]': 'humidity',
        'query[device]': 'YOUR DEVICE ID',
        'query[sort]': 'at',
        'query[order]': "desc",
        'query[max]': '10'
        };
   

</script>
</body>
</html>

 

Result:

 

Attached File  grafico.jpg   54.25K   61 downloads

 

 

 

Hope it help

Enjoy Carriots!



#3 mayginne

mayginne

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 11 November 2013 - 07:16 PM

Thank you, that straightens out the documentation, but when I use similar code with my own device and apikey for 'query[order]' "'desc' I get the result expected just as you show, but for 'query[order]': 'asc' I get no graph at all. 



#4 jpastor

jpastor

    Development leader

  • Administrators
  • 159 posts

Posted 12 November 2013 - 03:57 PM

Hello mayginne

 

From the information you give me, I think in your streams collection there are some of them with different keys in the data field. Please check this.

Until version today, all the results of your graphs had to have the same keys in the data field.

Today we have updated our graphics component and this is no longer necessary, so your graphics should work properly now.

 


Please, tell me if it is correct.

 

Enjoy Carriots!
 



#5 mayginne

mayginne

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 19 November 2013 - 10:55 PM

Yes that worked...but the only way to show the latest data points in asc time is to use  [offset], but since I have more then 5000 points, this won't work as the graph can only handle 5000 points. How would I graph the last 100 data points with most current time on the right, regardless of how many past data points are in the array? By default a desc graph does this  as it starts at current time and then goes back in time until you reach the requested number of points.



#6 alvaro

alvaro

    Carriots CTO

  • Administrators
  • 72 posts

Posted 22 November 2013 - 11:35 AM

Hi mayginne.

 

Our current graph renderer doesn't support this. The workaround is use the offset (offset = total data points - 100) and ascendent sorting. 

 

We are working on a reverse display order feature that will be soon released. It will fix this issue. Stay tuned!

 

Enjoy Carriots!


Alvaro Everlet

Carriots CTO


#7 jpastor

jpastor

    Development leader

  • Administrators
  • 159 posts

Posted 02 December 2013 - 03:37 PM

Hi mayginne.

 

Now you can show your query in reverse order.

We have included a new parameter called "reverse" with values ​​"true" or "false" that you can use.

For more information visit: https://www.carriots.com/documentation/graphs



Hope it helps.

Enjoy Carriots!



#8 mayginne

mayginne

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 09 December 2013 - 09:42 PM

That worked great thanks! Just the effect I needed. Is there anyway to make the graph X axis which is displaying 'at' have a timezone instead of just UTC?



#9 alvaro

alvaro

    Carriots CTO

  • Administrators
  • 72 posts

Posted 11 December 2013 - 03:20 PM

Hi mayginne.

 

The 'at' field is not parsed and is directly pushed from the DB to the response. So that feature is not available at this moment. When we are confronted to those kind of problems we usually take another approach and use Javascript libraries such as Highcharts, Sencha, Google charts, Dygraph or any JSON friendly to render graphs on the client side.

 

Hope it helps

 

Enjoy Carriots.


Alvaro Everlet

Carriots CTO


#10 devsolarmane

devsolarmane

    Member

  • Members
  • PipPip
  • 12 posts

Posted 28 May 2015 - 11:33 AM

Hello mayginne

The correct values ​​are:

    'query[sort]': 'at',
    'query[order]': 'asc',


There was a typo in the documentation but currently it's solved.

Regarding the other question, you could sort your x axis from earlier to later without problems.

An code example:

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>graphs</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
</head>

<body>
    <div id="carriots-graph" style="max-width: 900px;margin:auto;"></div>   

<script src="https://www.carriots.com/js/graphs.js"></script>
<script type="text/javascript">
   
         var carriots = {
        'apikey' : 'YOUR APIKEY',
        'mime' : 'image/svg+xml',
        'type' : 'bar',
        'axis[x]' : 'at',
        'axis[y]' : 'humidity',
        'data[0]' : 'temperature',
        'data[1]': 'humidity',
        'query[device]': 'YOUR DEVICE ID',
        'query[sort]': 'at',
        'query[order]': "desc",
        'query[max]': '10'
        };
   

</script>
</body>
</html>

 

Result:

 

attachicon.gifgrafico.jpg

 

 

 

Hope it help

Enjoy Carriots!

i m new to carriots.i have my data streams and website too.bt i dont have any idea where to run the in website and where to check the graph.please help me out



#11 devsolarmane

devsolarmane

    Member

  • Members
  • PipPip
  • 12 posts

Posted 28 May 2015 - 11:35 AM

where should i run the code for graph in my websie.and where to see the graph



#12 sdeancos

sdeancos

    Master of Puppets

  • Members
  • PipPipPip
  • 103 posts
  • LocationMadrid, Spain.

Posted 28 May 2015 - 11:57 AM

Hi,

 

this codes are html/javascript you could run in your web browser directly and should working.

 

Best regards.



#13 devsolarmane

devsolarmane

    Member

  • Members
  • PipPip
  • 12 posts

Posted 28 May 2015 - 12:17 PM

my  data->

{
    "pid": 3000, 
    "temperature": 85
}
 
please tel how to put in code.in web browser i m getting empty page.Thank you in advance


#14 devsolarmane

devsolarmane

    Member

  • Members
  • PipPip
  • 12 posts

Posted 28 May 2015 - 12:19 PM

Hi,

 

this codes are html/javascript you could run in your web browser directly and should working.

 

Best regards.

"data":
{
    "pid": 3000, 
    "temperature": 85
}
please tel me how to put this data in full code for get the graph.cause i m getting empty page in browser.Thank you for helping me out.


#15 sdeancos

sdeancos

    Master of Puppets

  • Members
  • PipPipPip
  • 103 posts
  • LocationMadrid, Spain.

Posted 28 May 2015 - 02:07 PM

Hi,

 

for you example (you need change the apikey var for your apikey and query[device] for your id_developer device):

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>graphs</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
</head>

<body>
    <div id="carriots-graph" style="max-width: 900px;margin:auto;"></div>   

<script src="https://www.carriots.com/js/graphs.js"></script>
<script type="text/javascript">
   
         var carriots = {
        'apikey' : 'YOUR APIKEY',
        'mime' : 'image/svg+xml',
        'type' : 'bar',
        'axis[x]' : 'at',
        'axis[y]' : 'temperature',
        'data[0]' : 'temperature',
        'data[1]': 'pid',
        'query[device]': 'YOUR DEVICE ID',
        'query[sort]': 'at',
        'query[order]': "desc",
        'query[max]': '10'
        };
   

</script>
</body>
</html>

 

 

I hope this help you.

 

BR






1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users