score:5

Accepted answer

Hi this can be a alternate way by the way your goal is not fully achieved but i am giving you some ideas how you can achieve I have used cookies for implementing this one


Your head should be looks like

<head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="Scripts/jquery.cookies.2.2.0.js" type="text/javascript"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

This is your html

<table id="datatable" style="float:left;">
    <thead>
        <tr>
            <th>X Axis</th>
            <th>Y Axis</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

I have not included the points in your table which you will have to do


Now this should be your script

<script>
     window.onload = function () {
         var val;
         var cat_array1; var cat_array2;
         var data_variables = [0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1];
         /*global window: false */
         if ($.cookie("cat_array1")) {
             var cookie = unescape($.cookie('cat_array1'))
             cat_array1 = cookie.split(',')
             var cookie1 = unescape($.cookie('cat_array2'))
             cat_array2 = cookie1.split(',')



         }
         else {
             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%'];

             $.cookie("cat_array1", cat_array1.join(','));
             $.cookie("cat_array2", cat_array1.join(','));

         }
         function regenrate() {

             options = {

                 chart: {
                     renderTo: 'container',
                     animation: false,
                     events: {
                         click: function () {
                             alert('click');
                         }
                     }
                 },

                 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);
                                 },
                                 click: function () { var options = this.options; alert('Person who like' + options.name + ' ' + options.personName); }
                             }
                         },
                         stickyTracking: true
                     },
                     column: {
                         stacking: 'normal'
                     }
                 },

                 tooltip: {
                     yDecimals: 2
                 },

                 series: [{
                     name: 'main',
                     data: data_variables,
                     draggableY: false,
                     dashable: true
                 }, {
                     name: 'modifier',
                     data: [0, 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);


             var yAxis = chart.xAxis[0];
             var onYaxisRedraw = function () {
                 for (var tickPos in yAxis.ticks) {
                     if (tickPos != '-1') {
                         var $element = $(yAxis.ticks[tickPos].label.element);
                         $element.unbind('click');
                         $element.click(function (e) {

                             // cat_array1.push(1,parseInt(e.toElement.innerHTML.replace('%', '')) + 5 + '%');
                             var aa = jQuery.inArray(e.toElement.innerHTML, cat_array1);
                             cat_array1.splice(parseInt(aa + 1), 0, parseInt(e.toElement.innerHTML.replace('%', '')) + 5 + '%');
                             // options.xAxis = cat_array1;
                             $.cookie("cat_array1", cat_array1.join(','));
                             // chart.series[0].setData(null,true);
                             // var  chart = new Highcharts.Chart(options);//$('#container').highcharts().xAxis[0].update()
                             window.location.reload();
                             // regenrate()

                         });
                     }
                 }
             }
             onYaxisRedraw();

             yAxis.redraw(onYaxisRedraw);

         }
         regenrate();

     }



 </script>

Explaination :-

You have requirement that should be clicked between 10% and 20% but i think that could not be achieve although i am not sure :)

But if you click on a 10% then at that array you can add 5 and then can do it i hope you will understand my point

This is alternate way if you click on a 10% in array then 15% will be added to it

Ok i hope you will understand my point............


Related Query

More Query from same tag