Tried out a lot.
Here is Fiddle Demo http://jsfiddle.net/YQMTW/14/ and the code
Code: Select all
var val;
var cat_array1 = ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'];
var cat_array2 = ['5%', '10%', '15%','20%','25%', '30%', '35%','40%','45%', '50%'];
var data_variables = [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1];
options = {
chart: {
renderTo: 'container',
animation: false
},
xAxis: {
categories: cat_array1
},
plotOptions: {
series: {
cursor: 'ns-resize',
point: {
events: {
drag: function (e) {
},
drop: function () {
var y_val = Highcharts.numberFormat(this.y, 2);
var x_val = Highcharts.numberFormat(this.x, 2);
updater(y_val, x_val);
console.log(options.series[1].data);
}
}
},
stickyTracking: true
},
column: {
stacking: 'normal'
}
},
tooltip: {
yDecimals: 2
},
series: [{
name: 'main',
data: data_variables,
draggableY: false,
dashable: true
}, {
name: 'modifier',
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1],
draggableY: true
}]
}
function updater(yv, xv) {
//console.log("Y :" + yv + ",X: " + xv);
var num = xv.match(/^\d+/);
console.log(num);
options.series[1].data[num] = parseInt(options.series[1].data[num].y.toFixed(1));
var chart = new Highcharts.Chart(options);
$('#b' + num).html(yv);
console.log(yv + ", " + xv);
return false;
}
var chart = new Highcharts.Chart(options);
$(function () {
$("#datatable tbody").on("click","td",function () {
var OriginalContent = $(this).text();
console.log(OriginalContent);
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
val = newContent;
var id= $(this).parent().attr("id");
console.log(id);
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
console.log(options.series[1].data);
options.series[1].data[+id.match(/\d+$/)] = parseInt(val);
console.log(options.series[1].data);
var chart = new Highcharts.Chart(options);
}
});
$(this).children().first().blur(function () {
var newContent = $(this).val();
val = newContent;
var id= $(this).parent().attr("id");
console.log(id)
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
options.series[1].data[+id.match(/\d+$/)] = parseInt(val);
var chart = new Highcharts.Chart(options);
});
});
});
Please help me out. Thanks