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');
Thank You, now it is working.