Unable to add point into highchart area

Question

I use highchart js to visualize my data, category is an array of timestamp (in milliseconds), it works well, however I need to make it real-time, updated every 20 seconds.

I tried to use addPoint function provided by highchart to add new point into current chart, I got an error www.highcharts.com/errors/19, it said that

Too many ticks

This error happens when you try to apply too many ticks to an axis, specifically when you add more ticks than the axis pixel length. In practice, it doesn't make sense to add ticks so densely that they can't be distinguished from each other. One cause of the error may be that you set a tickInterval that is too small for the data value range. In general, tickPixelInterval is a better option, as it will handle this automatically. Another case is if you try to set categories on a datetime axis, which will result in Highcharts trying to add one tick on every millisecond since 1970.

This is my fiddle http://jsfiddle.net/ndkhoiits/5jh93/

chart: {
    type: 'area',
    events: {
        click: function () {
            var series1 = this.series[0];
            var series2 = this.series[1];
            // Add more 20 seconds
            var x = series1.points[series1.points.length - 1].category + 20 * 1000;
            //error here
            series1.addPoint([x, 1000], true, true);

        }
    }
},

Please help to check how can I add new point into chart, moreover I think we should use type is datetime for xAxis but I don't know how to use, if you can please give me the solution.

Answer 1

The problem is that you are mixing categorized xAxis with datetime xAxis.

Categories are useful when displaying some .. categories on xAxis. Like fruits, cars, browsers share etc.

In your case you should be using datetime from beginning. You should change:

• remove categories from xAxis

• connect categories with site1 and site2, for example:

  for(var i = 0; i < site1.length; i++){
     site1[i] = [ categories[i], site1[i] ];
     site2[i] = [ categories[i], site2[i] ];
  }
  

Live demo: http://jsfiddle.net/5jh93/1/

Answer 2

I have gone thru ur code from jsfiddle and it seems that you have written whole code in one JS. I also used highcharts in our application and put lot of efforts in providing the thruput values (upload/download in every 2 secs). What we did was we use object literal approach. We have put our code in one js and that js contains few fucntions such as init (to initialize the values and creating object of chart using new i.e dynamically).

  var myplot = {
    init : function() {    }
    });
    chart = new Highcharts.Chart({
    //here u can write the code that u need to draw with series object
    }
drawmyplot : function(val1,val2){
var x = series1.points[series1.points.length - 1].category + 20 * 1000;
series1.addPoint([x, val1], false, true); 
series2.addPoint([x, val2], false, true);
$(".firstValue").text(val1 * 1000,1);
$(".secondValue").text(val2 * 1000,1);   
} 

Then you can initialize the obejct of ur myplot from another js (e.g. init function) and call your subsequent functions using myplot object. I hope this would help you.

Regds