Add points Dynamically on click

[richasingh26]

I am Trying to somehow add points dynamically in chart on click but i am not able to get it working.

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

[seba]

I see the same topic on the SO http://stackoverflow.com/questions/2353 ... ipt-jquery so please continue there.

[richasingh26]

This is the main HighCharts forum so i posted here

[richasingh26]

I see the same topic on the SO http://stackoverflow.com/questions/2353 ... ipt-jquery so please continue there.

This is the main HighCharts forum so i posted here

[Fusher]

And the answer is the same:

No, you can't add point at 15%, when using categories. Category is just one value, nothing between. You need to change from categorized axis to linear. Then, use this demo as base for adding points on chart click.

Of course, you can try to use some kind of workaround to get this done on categorized axis, but it will cost much more effort and your time.

[richasingh26]

And the answer is the same:

No, you can't add point at 15%, when using categories. Category is just one value, nothing between. You need to change from categorized axis to linear. Then, use this demo as base for adding points on chart click.

Of course, you can try to use some kind of workaround to get this done on categorized axis, but it will cost much more effort and your time.

Thanks. Any idea how do i change from categories to linear??

[Fusher]

Here you can find explanation how to set different xAxis type, see: http://www.highcharts.com/docs/chart-concepts/axes

[MisterNeutron]

This is the main HighCharts forum so i posted here

No, this is the Highslide forum, not the HighCharts forum.

[Moderators - do you not have the ability to move this thread where it belongs?]

[Fusher]

They are talking about Highcharts vs StackOverflow, not Highslide vs Highcharts.

It's already moved (see bread cramps: "Board Index< Highcharts - The ... "), but we also left shadow topic in original forum part.