Graph Title not showing

I am able to add only one graph title. How will I add graph title for 6 graphs seperately?

Hi @sreejak ,

Graph page is just an html page where you can write javascript to customize the page.

Here is the sample code -


setChartLibrary('Temperature');

var lineGraph = new boltGraph();
lineGraph.setChartType("lineGraph");
lineGraph.setAxisName('X-Axis Name','Y-axis Name');
lineGraph.plotChart('time_stamp','light');

$("#muliple_graph_span").append("<h1>Humdity<h1>");

var barGraph = new boltGraph();
barGraph.setChartType("barGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','light');


$("#muliple_graph_span").append("<h1>Pressure<h1>");

var barGraph = new boltGraph();
barGraph.setChartType("scatterGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','light');

Do let me know in case you need any other information.

How can I add button in javascript code which I can use as link like<a> in HTML?

hey! @sreejak

you can create button by calling document.createElement(“button”) method… Refer to the above link.

Hey @sreejak I have edited @rahul.singh1 code and created a button named humidity.
Here is the code

setChartLibrary('Temperature');

var lineGraph = new boltGraph();
lineGraph.setChartType("lineGraph");
lineGraph.setAxisName('X-Axis Name','Y-axis Name');
lineGraph.plotChart('time_stamp','temp');
let btn = document.createElement("button");
btn.innerHTML = "Humidity";
document.body.appendChild(btn);
$("#muliple_graph_span").append(btn);
$("#muliple_graph_span").append("<h1>Humdity<h1>");

var barGraph = new boltGraph();
barGraph.setChartType("barGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','temp');


$("#muliple_graph_span").append("<h1>Pressure<h1>");

var barGraph = new boltGraph();
barGraph.setChartType("scatterGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','temp');

Here is the output…:


screenshot of the code:

How to add Link in the button?

btn.onclick = function () {
 //Here how can i add link
};

Hey @sreejak you can do so by addEventListener method
The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens , such as when a user clicks a button.
For example:

setChartLibrary('Temperature');

var lineGraph = new boltGraph();
lineGraph.setChartType("lineGraph");
lineGraph.setAxisName('X-Axis Name','Y-axis Name');
lineGraph.plotChart('time_stamp','temp');
let btn = document.createElement("button");
btn.innerHTML = "Humidity";
document.body.appendChild(btn);
btn.addEventListener("click", function () {
  alert("Button is clicked");
});

$("#muliple_graph_span").append(btn);
$("#muliple_graph_span").append("<h1>Humdity<h1>");


var barGraph = new boltGraph();
barGraph.setChartType("barGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','temp');


$("#muliple_graph_span").append("<h1>Pressure<h1>");

var barGraph = new boltGraph();
barGraph.setChartType("scatterGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','temp');

btn.addEventListener("click", function () {
 window.location.href='www.google.com';
});

I tried this it is going to https://cloud.boltiot.com/www.google.com not to www.google.com.

Hey @sreejak your code is absolutely fine but you haven’t inserted the link properly.
See,

setChartLibrary('Temperature');

var lineGraph = new boltGraph();
lineGraph.setChartType("lineGraph");
lineGraph.setAxisName('X-Axis Name','Y-axis Name');
lineGraph.plotChart('time_stamp','temp');
let btn = document.createElement("button");
btn.innerHTML = "Humidity";




$("#muliple_graph_span").append(btn);
 

btn.addEventListener("click", function () {
    

    window.location.href='https://www.google.com/';
    alert("Button is clicked");


  
  
});


$("#muliple_graph_span").append("<h1>Humdity<h1>");


var barGraph = new boltGraph();
barGraph.setChartType("barGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','temp');


$("#muliple_graph_span").append("<h1>Pressure<h1>");

var barGraph = new boltGraph();
barGraph.setChartType("scatterGraph");
barGraph.setAxisName('X-Axis Name','Y-axis Name');
barGraph.plotChart('time_stamp','temp');
1 Like

Thank You, now it is working.

1 Like