Adding chart.js to Habpanel

Apps & Services HABPanel
, ,
1

Hi All,

Could someone provide a quick overview of how I could embed a chart.js into a habpanel widget?
I found this:
http://jtblin.github.io/angular-chart.js/
But I dont know much about angular.

Thanks,
Paul

1 Like
2
  1. ocLazyload the library files
  2. Create another file for the controller/service
  3. ocLazyload the files you created in #2

If none of them makes sense, it will be extremely difficult for you.

3

Well, that does seem too complicated. I opted to go with a simpler option to build some bars.
I am now stumped with calculating the min and max for a json array.

<div ng-init="hours = $eval(itemState('WeatherHourly_json'));"></div>

How do i get the max and min of hours.temp.metric ?

My JSON looks a bit like this:

	"hours": [
		{
		"temp": {"english": "38", "metric": "3"},
		"feelslike": {"english": "33", "metric": "1"},
		"pop": "0",
		}
		,
		{
		"temp": {"english": "38", "metric": "3"},
		"feelslike": {"english": "33", "metric": "1"},
		"pop": "0",
		}
		,
4

Hi @luckymallari could you provide some insight as to why my custom widget doesn’t refresh when the Item that contains the JSON string gets updated?

I assign my variables in an ng-init="", however, from my reading it seems that it is not refreshed regularly.
How can I set variables in a widget for convenience but still have it refresh when the item refreshes?

My widget can be found here:
http://faure.ca/~paul/WeatherHourly.widget.json

I have described the full setup here: