Accepted answer

First of all I want to thank everyone who have give their best suggestion and also including demo app. I have solved my Issue something like this ,

Here is the simple HTML code , where the chart will be load

 <div style="margin-top: 3px; margin-left: 0px;" id="dashboardChartcontent">
        @*Here is the chart Element*@

Now below this I have called the Javascript function

<script type="text/javascript">

At the top of the page I have declared the function using SetInterval function , look the code below:

 function autograph() {
    setInterval(displaygraphsecondtime, 8000);
    setInterval(displaygraphthirdtime, 6000);
    setInterval(displaygraphfirsttime, 2000);

These functions displaygraphsecondtime, displaygraphthirdtime, displaygraphfirstime are containing the code of high-chart .


You need to create JSON. Return it on your PHP or aspx page without any html code. Call this PHP or aspx page using Ajax in the javascript. And in setInterval() along with addPoint function call this Ajax every 2-3 minutes or any duration you want. It will update the data on the X as well as Y both the axis.


You can use setInterval() function and addPoint function


You can use X axis categories option for dynamically updating X axis values.

Highcharts.charts[0].xAxis[0].update({categories:arrayname}, true); 



There are built in methods provided in api. like


this one will help you to add new categories to the data.

here is a working example

Hope this will help you.

Related Query

More Query from same tag