Problem in using module 5.2 (data visualisation)


#2

Hi, can you share the bolt device with me so that I can have a look at the issue. To share the device, click on Users just below the device name in the dashboard. Enter my email id i.e. pranav.kundaikar@inventrom.com press enter and then click on add. Let me know once you have added.


#3

Hi,

This facility on BOLT’s cloud looks interesting.

I have added you as an user. Please check.


#4

Have you created and uploaded the graph page? Incase you have then you have not linked it to the device.
Follow the steps given below.

  1. Open CONTROL PANEL
  2. Upload the html page for the graph using the UPLOAD FILES section. Select the type as other.
  3. Click on the create new type tab enter the type name as my_first_graph select the html page that you uploaded from the dropdown menu and let the device icon be the default selection. Then click on Add.
  4. Click on the DEVICES tab, it will show your device. Change the type of the device from bolt to the new type i.e. my_first_graph using the dropdown menu. This will link your new page to the device.
  5. Go to your dashboard and click on the bolt device and your html page will be displayed.

#5

Hi.
I uploaded the file. But When I click the device name on my home page for cloud.boltiot.com, I am geting this:

> NO VALUES AND AXES

Moreover when I am trying to open the canvas.js file , I am getting this:

Expectation : Please explain why I am getting these two problems and hence give the method to rectify it .


Issue of displaying graph in data visualization topic
#6

Did you upload the canvas.js file in your account? you getting the error since it cannot find the canvas.js file.
An alternative to uploading the file is to directly link it from a cdn. Add the following line to your html file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>

And remove the line given below.
<script type="text/javascript" src="/control? name=BOLT9172550&amp;filename=canvas.js">


#7

Huraaaaaahhhhhhhhhhhhh!!!

You are awesome !!!

I finally got the output and believe me it feels wonderful when after so many attempts the fruit of success is achieved . Feeling satisfied !!!

Extremely convinced by BOLT and it’s TEAM.

Thank you so much Pranav Kundaikar…::slight_smile:


#8

Thank You for the kind words :slight_smile:
Congratulations for completing your experiment. Hope you continue building some great projects using the Bolt platform. Cheers!!:thumbsup:


#9

@himanshumanghani95 Do share a video of your project. We are excited to have a look.


#10

@gowthamkrishnateja This thread should help you solve the issue.


#11

Yes I will surely do that !!


#12

yaa i got the output
thank you


#13

Super. Share the video if possible. Look forward to viewing your work. :slight_smile:


#14

Here is my love to you guys::relaxed:


#15

[output] (https://www.youtube.com/watch?v=hndQjWT63Kw)


#16

Hi,

After this success stage , I want to add other sensors ( e,g buzzer ) in the circuit. To be more clear , I will like to get graph as well as an alert sound signal ,whenever an obstacle is detected in front of the proximity sensor.

Before asking in the forum , I have tried myself by doing the following change in the code. which is as follows:

xhttp.open(“GET”, “/digitalRead?pin=4&deviceName={{ Name }}”, “/digitalWrite?pin=0&state=High”, true);
xhttp.send();

I have tried other possibilities as well but was not able to achieve the desired result in any of the ways.

I would like to know my mistake so that I can extend my learning of this new device (BOLT) which has incredible powers to change the world.

NOTE: Answers without the involvement of Arduino will be a great help.!!!


#17

I believe you must be having a function similar to fetch_data as given below which gets the sensor data and updates the graph. You can just add a small logic to it to check if the incoming data tell whether the sensor triggered or not and accordingly call the triggerBuzzer function as defined below. One point to optimize the code we can also create the buzzer_state which will help us to trigger a buzzer action only when there is a change in the sensor state instead of triggering it every time

  var buzzer_state = LOW;
  function fetch_data(){
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function(){
        if (xhttp.readyState == 4 && xhttp.status == 200){
          obj=JSON.parse(xhttp.responseText);
          console.log(obj);
          updateGraph(obj.value);
          //check if the sensor is triggered or not 
          if (obj.value=="1"){
               // no obstacle detected

               if (buzzer_state != "LOW"){
                buzzer_state = "LOW";
                triggerBuzzer("LOW");
               }

           } else if  (obj.value=="0"){
                // obstacle detected

                if (buzzer_state != "HIGH"){
                  buzzer_state = "HIGH";
                  triggerBuzzer("HIGH");

                }

              } else {
                  console.log("do nothing");
              }
       }
      };
      xhttp.open("GET", "/digitalRead?pin=4&deviceName={{ Name }}", true);
      xhttp.send();
  }

  function triggerBuzzer(state){
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function(){
        if (xhttp.readyState == 4 && xhttp.status == 200){
          obj=JSON.parse(xhttp.responseText);
          console.log(obj);
        }
      };
      xhttp.open("GET", "/digitalWrite?pin=A1&state="+state +"&deviceName="+dev_name, true);
      xhttp.send();
  }

#18

Not working.

can you check my code?

<!doctype html>
<html>
<head>
<title>BOLT</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"> setDebug(true);  </script>
<script type="text/javascript">
window.onload = function ()
{	    var dps = []; //dataPoints. 
    var chart = new CanvasJS.Chart("chartContainer",{
    title :
    {
    	text: " "
    	},
    backgroundColor: "transparent",
    height: 500,
    axisX: 
    {	title: "Time",
    	labelFontFamily: "Segoe UI Light",
    	lineThickness: 0,
    	tickThickness: 0,
    	labelFontColor:"white",
    	titleFontColor: "white",
    	titleFontFamily:"Segoe UI Light",
    },
    axisY:
    {	stripLines:[
    {	value:0,
    	thickness:1,
    	color: "white",
    }],
    tickThickness: 0.5,
    minimum: 0,
    maximum: 10,
    title: "State",
    labelFontFamily: "Segoe UI Light",
    gridThickness: 0,
    labelFontColor:"white",
    titleFontColor: "white",
    titleFontFamily:"Segoe UI Light",
    },
    data: [{
    type: "line",
    dataPoints : dps,
    markerColor:"white",
    color:"white",
    }]
     });
    chart.render();
    	var yVal = 15;	
    	var updateInterval = 5000;
    function updateChart(sensor_data) 
    {
         yVal = sensor_data;
        	yVal = parseInt(yVal);
        	var xVal = new Date();
        	dps.push({x: xVal,y: yVal});
          if (dps.length > 5 )
          {
         dps.shift();
         }
         chart.render();
    }
    setInterval(function(){fetch_data()}, updateInterval);
	var buzzer_state = LOW;
    function fetch_data()
    {
        	var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function(){
        if (xhttp.readyState == 4 && xhttp.status == 200){
          obj=JSON.parse(xhttp.responseText);
          console.log(obj);
          updateGraph(obj.value);
          //check if the sensor is triggered or not 
          if (obj.value=="1"){
               // no obstacle detected

               if (buzzer_state != "LOW"){
                buzzer_state = "LOW";
                triggerBuzzer("LOW");
               }

           } else if  (obj.value=="0"){
                // obstacle detected

                if (buzzer_state != "HIGH"){
                  buzzer_state = "HIGH";
                  triggerBuzzer("HIGH");

                }

              } else {
                  console.log("do nothing");
              }
       }
      };
      xhttp.open("GET", "/digitalRead?pin=4&deviceName={{ Name }}", true);
      xhttp.send();
  }

  function triggerBuzzer(state){
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function(){
        if (xhttp.readyState == 4 && xhttp.status == 200){
          obj=JSON.parse(xhttp.responseText);
          console.log(obj);
        }
      };
      xhttp.open("GET", "/digitalWrite?pin=A1&state="+state +"&deviceName="+dev_name, true);
      xhttp.send();
  }
</script>	
</head>
<body bgcolor="grey" > 
<center>
<div id="chartContainer" style="height: 30rem; padding-top:5rem;width:70%;box-shadow: 0px 1px 5px 0px #000;background: -webkit-linear-gradient(#0073A2, #2196f3);margin-top:3rem;"> </div> 
</center> 
</body> 
</html>

#19

Please post the code that we fixed yesterday via whatsapp so that others also can try and do this experiment.


#20
 Yes , Pranav !! For sure !!

Interested students , please use the following code to interface buzzer with proximity sensor for data visualization.  

> <!doctype html>
> <html>
> <head>
> <title>BOLT</title>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js" ></script>
> <script type="text/javascript">
> window.onload = function ()
> {	    var dps = []; //dataPoints. 
>     var chart = new CanvasJS.Chart("chartContainer",{
>     title :
>     {
>     	text: " "
>     	},
>     backgroundColor: "transparent",
>     height: 500,
>     axisX: 
>     {	title: "Time",
>     	labelFontFamily: "Segoe UI Light",
>     	lineThickness: 0,
>     	tickThickness: 0,
>     	labelFontColor:"white",
>     	titleFontColor: "white",
>     	titleFontFamily:"Segoe UI Light",
>     },
>     axisY:
>     {	stripLines:[
>     {	value:0,
>     	thickness:1,
>     	color: "white",
>     }],
>     tickThickness: 0.5,
>     minimum: 0,
>     maximum: 10,
>     title: "State",
>     labelFontFamily: "Segoe UI Light",
>     gridThickness: 0,
>     labelFontColor:"white",
>     titleFontColor: "white",
>     titleFontFamily:"Segoe UI Light",
>     },
>     data: [{
>     type: "line",
>     dataPoints : dps,
>     markerColor:"white",
>     color:"white",
>     }]
>      });
>     chart.render();
>     	var yVal = 15;	
>     	var updateInterval = 50000;
>     function updateChart(sensor_data) 
>     {
>          yVal = sensor_data;
>         	yVal = parseInt(yVal);
>         	var xVal = new Date();
>         	dps.push({x: xVal,y: yVal});
>           if (dps.length > 5 )
>           {
>          dps.shift();
>          }
>          chart.render();
>     }
>     setInterval(function(){fetch_data()}, updateInterval);
> 	var buzzer_state = "LOW";
>     function fetch_data()
>     {
>         	var xhttp = new XMLHttpRequest();
>       xhttp.onreadystatechange = function(){
>         if (xhttp.readyState == 4 && xhttp.status == 200){
>           obj=JSON.parse(xhttp.responseText);
>           console.log(obj);
>           updateChart(obj.value);
>           //check if the sensor is triggered or not 
>           if (obj.value=="1"){
>                // no obstacle detected

>                if (buzzer_state != "LOW"){
>                 buzzer_state = "LOW";
>                 triggerBuzzer("LOW");
>                }

>            } else if  (obj.value=="0"){
>                 // obstacle detected

>                 if (buzzer_state != "HIGH"){
>                   buzzer_state = "HIGH";
>                   triggerBuzzer("HIGH");

>                 }

>               } else {
>                   console.log("do nothing");
>               }
>        }
>       };
>       xhttp.open("GET", "/digitalRead?pin=4&deviceName={{ Name }}", true);
>       xhttp.send();
>   }

>   function triggerBuzzer(state){
>       var xhttp = new XMLHttpRequest();
>       xhttp.onreadystatechange = function(){
>         if (xhttp.readyState == 4 && xhttp.status == 200){
>           obj=JSON.parse(xhttp.responseText);
>           console.log(obj);
>         }
>       };
>       xhttp.open("GET", "/digitalWrite?pin=A1&state="+state +"&deviceName={{ Name }}", true);
>       xhttp.send();
>   }
>   }
> </script>	
> </head>
> <body bgcolor="grey" > 
> <center>
> <div id="chartContainer" style="height: 30rem; padding-top:5rem;width:70%;box-shadow: 0px 1px 5px 0px #000;background: -webkit-linear-gradient(#0073A2, #2196f3);margin-top:3rem;"> </div> 
> </center> 
> </body> 
> </html>

Note : There will be a delay involved in the output. The delay can be changed by changing the value of 50000 (50ms) in the code from 30000 (30ms) to 50000, depending on the requirement of your project !

Best of luck for your project !
:relaxed:


#21

sir, can i use ifttt features through bolt cloud like sending an email?