I want to make a project based on iot using bolt with more sensors and actuators for this i have to interface bolt with arduino or raspberry pi. I also want to develop a webpage and a mobile app for monitoring and controlling the hardware. In the tutorials i learnt only to make button and make graph but this is not enough. So i want to learn how to interface bolt with other development boards and what (and from where if you know) should i learn in order to create a webpage and mobile app which will control and monitor the hardware. For example sensing the temperature and controlling speed of fan accordingly and making webpage and mobile app for this temperature monitoring system.
This answer should help you out with the interfacing issue
For the 2nd part of your question about resources for a web app, from what i can see of your diagram it will need a bit of googling and reading up on w3 and stackoverflow for the js and css codes you’re going to need and experimenting with the codes in the tutorials to plug in the values whereever they need to be in the code
Just as a push in a direction take a look at chart.js and google charts for your charts
For the slider,take a look at ionrangeslider to get values to update a pwm pin
The level indicator might be a little tricky to implement in pure css if you’re a beginner. So you could try keeping multiple png files of different levels and change them using ajax calls based on your conditions
Plain js with css selectors will work for the on/off switches
And buttons can be styled with css, if you don’t feel like doing that either you could take a look at a theme. Something materialize.css might improve the look of the web app and keep the styling consistent if it is a multipage web app