Hi, I’ve recently started using Thinger.io and I’m trying to display data sourced from a data bucket. However instead of using my data as a function of time, I want to graph the relationship between two columns in my data bucket. For example, one of my columns contains an id and another column contains a value. I want to find the 5 ids with the highest value and display them on a table much like in the example, but with the Time replaced with the id. Is this possible in thinger.io? If not, is there any guidance for how I could perform this processing on the {{ value }} received from the AngularJS directive and perform some processing on the data and assign it to a different variable in $scope? I can go into more details on what directives I’ve set up unsuccessfully to create this if the former option is not available. Here is the example I’m referencing:
Hi @swiftarrow4
Yes, the possibilities HTML widgets provide are endless.
The best example for your use case is the Hello World widget, which uses a widget created from a File Storage.
First of all, you would need to treat the data received in your js file, inside the angular controller, by filtering and rearranging the values you want to show.
Then, once you achieve the desired structure, you can start to give it the desired look by following an approach similar to what you shared, but I recommend to first start with the HTML from the Hello World example to make sure that changes in the js file are working.
Regards!
Hi @jaimebs ,
Yes I agree the HTML widgets are pretty customizable, but is the Hello World widget the best match for what I’m attempting to do? I’d like to be able to retrieve multiple rows of data from a bucket from the previous 24 hours, and I’m not sure how to achieve this with the HTML widget. Is there a setting for retrieving multiple datapoints within the HTML widget? I could only get multiple data points out of the HTML time series widget when playing around with both, and when I did get all my data points on the HTML time series widget I could not perform any processing of it in my controller, although this could be due to my lack of understanding of Angular directive’s lifecycles.
I see that the widgets are essentially making API calls to https://<thingerio_endpoint>/v1/users/< user >/buckets/< bucket_name >/data so I could perform the query myself, but I wanted to make sure my understanding of the widgets was correct.
Hi @swiftarrow4
Yeah sorry, I meant to say HTML Time Series Widget, that would be the correct one. However, the example I linked above for the Hello World widget is still a good place to start, so with the default example you’ll be able to see the data being retrieved, and then modify it for your need.
I wouldn’t recommend making the query yourself, as you would lose some features like the ability to configure the timeframe from the dashboard.
Here is an example with the default js and html code provided in the example.
Hi @jaimebs
Thanks for getting back to me, I’m reviving this because I did implement my code using a more custom solution after fighting a little more with my Angular Directive and I wanted to try and implement this properly & ask if I was missing something when trying to implement the HTML Time Series Widget.
I’ve followed the example code and implemented a watcher for the {{value}} being passed down, but when my widget is set to pull an array of data from a data bucket, I cannot watch the value for changes to process it in my widget. In this example I have 2 identical widgets (One cloned from another) where one widget is an HTML widget (single item as {{value}}), and the other is an HTML Time Series Widget (array of values in {{value}}). Bot reference the same code in my file storage with an angular directive with this watcher in its controller:
$scope.$watch('value', function(newValue, oldValue) {
console.log("NEW VALUE?", newValue, typeof newValue);
if (newValue && newValue != oldValue) {
console.log("NEW VALUE SUCCESS", newValue, typeof newValue);
}
});
And on the dashboard I see this in my devtools:
The 2nd logged line should contain the data retrieved from the data bucket, however it appears the data isn’t quite there when I’m at this point, as the object reference given to my devtools log is empty, and it doesn’t pass the conditional in the code block above. However, it does work properly when {{value}} is a single data point (3rd and 4th logged lines). Is there some asynchronous waiting I need to do so I can properly use the data?
Hi @swiftarrow4
Is the data shown in the widget?
Indeed the retrieval is done asynchronously, and I believe you may be encountering an issue when trying to treat the data when is has still not been retrieved. Could this be it?
If this is the case, try using a watchCollection directive:
$scope.$watchCollection('value', function(newVal, oldVal) {
console.log("New value length is: ", newVal.length);
});
Let me know if this resolves your issue.
Best regards!