This post was most recently updated on July 29th, 2024
Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Highcharts provides a wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on. So there may be need of drawing chart with updated data without refreshing the whole page. In that case you can refer the following code to redraw chart.
First, To hold the charts, Add a div-Container element in your webpage with specific id.
A chart is initialized by adding the JavaScript tag, , anywhere in a webpage, containing code to draw chart. So called drawBarChartAjax() ajax function from document.ready(). In that function chart render to div element created in above code. Then to redraw charts after specific time interval used window.setInterval() function.
$(document).ready(function () { drawBarChartAjax(); window.setInterval(fetchdata,10000); }); // To draw chart first time function drawBarChartAjax() { $.ajax({ type: “POST”, url: “…….url path”, dataType: “json”, contentType: ‘application/json; charset=utf-8′, success: function (data1) { window.chart = new Highcharts.Chart({ chart: { renderTo: container, type:’bar’, spacingBottom: 15, spacingTop: 10, spacingLeft: 10, spacingRight: 10, // Explicitly tell the width and height of a chart width: 500, height: 500 }, title: { text: data1.Title }, subtitle: { }, xAxis: { categories: data1.XAxisCategories, title: { text: null } }, yAxis: { min: 0, title: { text: ‘Count’, align: ‘high’ }, labels: { overflow: ‘justify’ } }, tooltip: { pointFormat: ‘{point.y}’, }, plotOptions: { column: { dataLabels: { enabled: true, // align: center } } }, legend: { enabled: false, }, credits: { enabled: false }, series: [{ data: data1.series, showInLegend: false }] }); }, error: function () { } }); }
To redraw charts it is necessary to update chart series data. For this refer the following code :
function fetchdata() { $.ajax({ type: “POST”, url: “…….url path”, dataType: “json”, contentType: ‘application/json; charset=utf-8’, success: function (data) { console.log(data); var i = 0; data.forEach(function (element) { element.Charts1.forEach(function (element1) { var chart = $(‘#Div’ + i).highcharts(); chart.series[0].update({ data: element1.series }, false); //// Below code is for spline chart var x = (new Date()).getTime(); var x = (new Date()).getTime(), // current time y = Math.random(); chart.series[0].addPoint([x, element1[0]], true, true); chart.series[1].addPoint([x, element1[0]], true, true); }); }); }, error: function (jqXHR, exception) { }, }); }
