Highcharts increasing/decreasing data from input
Question
I'm trying to enable chart data change by dragging them and also by clicking on increase/decrease button. My problem is I don't know how to link value to variable that is in label right now.
I get input value to pomY variable: var pomY=Number($('#one').val());
I'm testing only first column for now.
Here is my example:
HTML:
<body>
<div id="container" style="width:100%; height:400px;"></div>
<div id="drag"></div>
<div id="drop"></div>
<form method="post" action="">
<div>
<label for="name">one</label>
<input type="text" name="one" id="one" value="">
<div id="plus" class="inc button">+</div>
<div id="minus" class="inc button">-</div>
</div>
</form>
</body>
JS:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
animate: false,
},
title: {
text: 'test'
},
xAxis: {
categories: ['1', '2', '3', '4', '5']
},
tooltip: {
yDecimals: 2
},
plotOptions: {
series: {
allowPointSelect: false,
point: {
events: {
click: function () {
switch (this.category) {
case '1':
$('#one').val(this.y);
break;
case '2':
$('#two').val(this.y);
break;
case '3':
$('#three').val(this.y);
break;
case '4':
$('#four').val(this.y);
break;
default:
$('#five').val(this.y);
break;
}
},
drag: function (e) {
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
},
drop: function () {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
}
}
}
}
},
series: [{
name: 'test',
data: [30, 50, 74, 90, 123],
draggableY: true,
dragMinY: 0,
dragMaxY: 200,
type: 'column',
minPointLength: 2
}]
});
var chart = $('#container').highcharts();
var pomY = Number($('#one').val());
$('#plus').click(function () {
pomY += 2;
chart.series[0].data[0].update(pomY);
$('#one').val(pomY);
});
$('#minus').click(function () {
pomY -= 2;
chart.series[0].data[0].update(pomY);
$('#one').val(pomY);
});
});
any suggestions?
1 answers
solution1
1 ACCPTED 2015-11-20 09:58:45
I hope I understood you right :)
Basically, your declarations were not in the right place. When you initialized pomY with it's current value, you did not take it's value after dragging into account. When moving the declaration inside the event handler, the value is accurate and corresponding with the chart real value. Another problem was handling the buttons with the initial data. Therefore you should "load" the data into the inputs (this could be done in many ways).
For "bonus" I did some tricks with jQuery and JS to generalize your code a bit. I guess you'll have to re-write some of the code there.
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
animate: false,
},
title: {
text: 'test'
},
xAxis: {
categories: ['1', '2', '3', '4', '5']
},
tooltip: {
yDecimals: 2
},
plotOptions: {
series: {
allowPointSelect: false,
point: {
events: {
click: function () {
switch (this.category) {
case '1':
$('#one').val(this.y);
break;
case '2':
$('#two').val(this.y);
break;
case '3':
$('#three').val(this.y);
break;
case '4':
$('#four').val(this.y);
break;
default:
$('#five').val(this.y);
break;
}
},
drag: function (e) {
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
},
drop: function () {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
}
}
}
}
},
series: [{
name: 'test',
data: [30, 50, 74, 90, 123],
draggableY: true,
dragMinY: 0,
dragMaxY: 200,
type: 'column',
minPointLength: 2
}]
});
var chart = $('#container').highcharts();
var bars = ["one","two","three","four","five"];
var dataLoader = function(){
$.each(chart.series[0].data, function(){
$("#"+bars[this.category-1]+"").val(this.y);
});
}();
$('.inc,.dec').click(function () {
var valueInput = $($(this).siblings("input")[0]);
var barNumber = bars.indexOf(valueInput.attr("id"));
var diff = $(this)[0].className.indexOf("inc") != -1 ? 2 : -2;
var pomY = Number(valueInput.val())+diff;
chart.series[0].data[barNumber].update(pomY);
valueInput.val(pomY)
});});
As you can see, I used a function that takes all the initial data and updates the corresponding input with it. Then, I binded the click events for each of them, and ordered them to update the right input when the event is fired.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.