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