Hichcharts Add Button to toggle between Series - javascript

I am working on Highcharts and trying to toggle between series with click of buttons - switch on and off a series from a button rather than the legend. Can we do it using Javascript?

use chart.series[seriesNumber].hide(). reference [https://api.highcharts.com/class-reference/Highcharts.Series#hide]
$( document ).ready(function() {
$('#container').highcharts({
series: [{
data: [120, 20, 50, 100, 510, 345, 120]
}, {
data: [132, 240, 444, 424, 230, 350, 330]
}]
});
// the button action
var chart = $('#container').highcharts();
$('.button').click(function(){
var seriesNumber = this.value;
var series = chart.series[seriesNumber];
if (series.visible) {
series.hide();
} else {
series.show();
}
});
});
.button {
width: 150px;
}
#container {
height: 250px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<input type="button" class="button" value="0"></input>
<input type="button" class="button" value="1"></input>
<div id="container"></div>
</body>
</html>

Related

JQuery Slider is not Showing in Handlebars

I am new to Handlebars/Jquery and have been trying to test this https://jsfiddle.net/aLr8q3nf/
When I try to show/hide the sliders using plain HTML and it's working fine, however when I try to test the same functionality using .hbs/node.JS does not work for me. When I click the button the function is being called (verified by showing up the alert;) but it does not show/hide the sliders for me not sure what am I doing wrong.
Can someone please guide me where to look?
Here is my Style.css
#box {
display: none;
top: 50px;
left: 50px;
}
Here is my index.hbs
<html>
<script src="jquery-1.11.3.min.js"></script>
<link href="roundslider.min.css" rel="stylesheet" />
<script src="roundslider.min.js"></script>
<script type="text/javascript">
showBox = function () {
$('#box').toggle();
alert("Test");
}
$('#slider').roundSlider({
sliderType: "min-range",
value: 23,
svgMode: true,
rangeColor: "#03a9f4",
pathColor: "#ececec",
borderWidth: 0,
editableTooltip: false,
handleShape: "dot",
radius: 120,
width: 15
});
</script>
<form>
<div id="box">
<div id="slider"></div>
</div>
<button onclick="showBox();">Click</button>
</form>
In case someone looking for help just moved the function as below and it worked.
<br><br>
<button onclick="showBox()">Click</button>
<script type="text/javascript">
window.showBox = function () {
$("#box").toggle();
}
$("#slider1").roundSlider({
sliderType: "min-range",
value: 23,
svgMode: true,
rangeColor: "#03a9f4",
pathColor: "#ececec",
borderWidth: 0,
editableTooltip: false,
handleShape: "dot",
radius: 20,
width: 5,
});
</script>

How to change line color when loading static csv data into Highcharts Highstock graph?

The following code plots static csv into Highstock chart in my browser. How do I change the color of the plot lines? The lines show up in the legend with labels ADJ_HIGH and ADJ_LOW.
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart'
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
}
});
</script>
</body>
</html>
To change the color of the line you should use the following code:
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
so change your script into following:
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart',
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
},
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
});
</script>
</body>
</html>

How to add some text labels to roundSlider

Below, is the html script that I have for the roundSlider widget, I was trying to add some label text into this widget but couldn't figure it out. Since I will need multiple widgets of those for my project, I will have to give each one a different label/name.
In the below attached image, thats where I am thinking of adding these labels
Please, any help would be highly appreciated. Thanks.
html script:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.col1 {left:75px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<!-- <p>Slider</p> -->
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
Image:
roundSlider Image
Three roundSlides:
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.slider {
position: absolute;
align:center;
}
.row1 {top:100px;}
.row2 {top:450px;}
.row3 {top:750px;}
.col1 {left:75px;}
.col2 {left:470px;}
.col3 {left:870px;}
</style>
</head>
<body>
<div id="slider1" class='slider row1 col1'></div>
<div id="slider2" class='slider row1 col2'></div>
<div id="slider3" class='slider row1 col3'></div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) { $.getJSON('/set_my_number/' + event.value); }
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) { $.getJSON('/set_abcd/' + event.value); }
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) { $.getJSON('/set_fghkva/' + event.value); }
});
$("#turn_off_button").click(function(){
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
Remove the position absolute so that your text appears after the slider.
Hope this is what you expected.
If you are using multiple sliders use flex to add numerous sliders with one parent div for both the slider and paragraph
<meta charset="utf-8">
<title>roundSlider</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<style>
.container {
display: flex;
}
.child
{
margin-left:100px;
}
</style>
<body>
<div class="container">
<div class="child">
<div id="slider1" class='slider row1 col1'></div>
<center>
<p>slider1</p>
</center>
</div>
<div class="child">
<div id="slider2" class='slider row1 col2'></div>
<center>
<p>slider1</p>
</center>
</div>
<div class="child">
<div id="slider3" class='slider row1 col3'></div>
<center>
<p>slider1</p>
</center>
</div>
</div>
<script>
// create sliders
$("#slider1").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 100,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide1_val: event.value}); }
change: function(event) {
$.getJSON('/set_my_number/' + event.value);
}
});
$("#slider2").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 1000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide2_val: event.value}); }
change: function(event) {
$.getJSON('/set_abcd/' + event.value);
}
});
$("#slider3").roundSlider({
sliderType: "min-range",
radius: 150,
min: 0,
max: 10000000000,
value: 0, // default value at start
//change: function(event) { $.getJSON('/valueofslider', {slide3_val: event.value}); }
change: function(event) {
$.getJSON('/set_fghkva/' + event.value);
}
});
$("#turn_off_button").click(function() {
// set sliders
$("#slider1").data("roundSlider").setValue(0);
// send to server
$.getJSON('/valueofslider', {
slide1_val: 0,
});
});
</script>
</body>
</html>
In roundSlider you have the tooltipFormat property, through which you can make any custom tooltip text or element.
Refer the below demos:
https://jsfiddle.net/soundar24/deLqk8sr/
https://jsfiddle.net/soundar24/deLqk8sr/1
https://jsfiddle.net/soundar24/deLqk8sr/131/
https://roundsliderui.com/demos.html#custom-tooltip
Some use-case demos:
https://jsfiddle.net/soundar24/j7ady5o8/
https://jsfiddle.net/soundar24/jwjwrLw7/
Hopes this helps you...
Just use the below inside the call to roundSlider after the change event
create: function(event) {$(".rs-tooltip-text").append("<br/><span>test</span>");}
just uses the class for the existing tooltip and appends some html after that

How do I place 2 <div>s side by side

Hello I wrote this code using javascript, chart.js and html & css :
<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="line-chart" width="800" height="450"></canvas>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id = "Global">
<div id = "right">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id = "left">
<script>
var ctx = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
/* labels: [18.123,46.8603108462,75.5976216923,104.334932538] */
datasets: [{
data: [{'y': 426777.148122,'x': 18.123},
{'y': 258927.721326,'x': 46.8603108462},
{'y': 176174.771954,'x': 75.5976216923},
{'y': 129604.15967,'x': 104.334932538},
{'y': 101328.238625,'x': 133.072243385}],
label: "Model",
borderColor: "#3e95cd",
fill: false
}, {
label : 'Data',
fill:false,
showLine: false,
backgroundColor: "#FF0000",
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328},
{x: 22.0, y: 410452.691467}],
type: 'line'
}]
},
options: {
title:{
display: true,
text:"Tools"
},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
})
</script>
</div>
</div>
</body>
</html>
Actually when I look at the result in a browser I see the javascript above the
<div id = "right"> whereas I would like to have the javascript at the left and the <div id = "right"> at the right.
Here is my css :
#Global
{
width:100%;
}
#Global #left {
float:left;
width:60%;
}
#Global #right {
margin-left:60%
}
I thought It will work but it is not the case.
Thank you for your help !
This is why I get when I look at the result in a browser :
Another option, aside from the ones already provided, would be to make your Global div a table instead and your left and right divs can be sibling cells in a row on that table.

Can't seem to store val into var to be called back later

I need your help,
How can the code below be modified such that when a date is selected, that it will store the selected date into (var z) and then its value can be called back later. I can't seem to figure this out, it should be simple, and right by eyes. What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var z
window.onload = function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$('#d1').datepicker({
onSelect:function(){
z = $(this).val()
alert(z)
$("#dd").dialog("close")
}
});
}//end of window.onload
function callback() { alert(z) }
</script>
</head>
<body>
<div style="display:none" id="dd">
<div id="d1">
</div>
</div>
<p><input onlick="callback()" type="submit" value="Submit" name="B1"></p>
</body>
</html>
There are too many missing semicolons in your code. Plus , In spite of putting in window.onload put your code in $(document).ready(function() { }); .
I made some changes in your code. Its working now.
Have a loot at This.
I think this is exactly what you are asking for.
There seem to be a few things going on. The onclick was mispelled, and as was pointed out - semicolons were missing. This should work.
<script type="text/javascript">
var z;
$(document).ready(function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$("#B1").click(function(){
callback();
});
$('#d1').datepicker({
onSelect:function(){
z = $(this).val();
alert(z);
$("#dd").dialog("close");
}
});
});//end of window.onload
function callback() {
alert(z);
}
</script>
I also modified the input button to:
<input type="button" value="Submit" name="B1" id="B1">
And you can also play around with the fiddle, here: http://jsfiddle.net/jE8tL/

Categories

Resources