Visualizing dynamic data with Ajax in a column bar chart

Question

Visualizing dynamic data with Ajax in a column bar chart

Trying to implement highcharts column bar charts, but facing issues with refreshing the data without reloading it. Unfortunately, I don't have access to the code I used at work to resolve this.

Considering setting up a loop to run multiple times with a 5-second delay. Unsure about the best approach.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
< your typical ajax call function here
    return some value;
>


$(function () {
    <var ajax_far = ajax_function();>
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Some Bar'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' mm';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: [{
                name: 'Tokyo',
                data: [ajax_var]

            }]
        });
    });

}, 5000);
        </script>
    </head>
    <body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

javascript ajax highcharts

Answer 1

Answer №1

Instead of scattering your ajax code throughout your script, consider encapsulating it in a single function that you can call from the document ready function. Here's an example to demonstrate how you can structure your code:

$(document).ready(function(){
    executeAjax();
    setInterval(executeAjax, 5000);
});

function executeAjax(){
    // Place your ajax code here
}

Answer 2

Instead of scattering your ajax code throughout your script, consider encapsulating it in a single function that you can call from the document ready function. Here's an example to demonstrate how you can structure your code:

$(document).ready(function(){
    executeAjax();
    setInterval(executeAjax, 5000);
});

function executeAjax(){
    // Place your ajax code here
}

Answer 3

Answer №2

When using ajax to update a chart, you only need to fetch new data without redrawing the entire chart. You can simply replace the series data or add individual points. For guidance on implementing this with Highcharts, check out this helpful article here. Here is an example of ajax code recommended by them:

/**
 * Request data from the server, add it to the graph and set a timeout to request again.
 */
function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // Shift if the series is longer than 2.

            // Add the point.
            chart.series[0].addPoint(point, true, shift);

            // Call it again after one second.
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}

In this code snippet, the requestData function is called every second (using setTimeout). It fetches a new data point through an ajax call to live-server-data.php and adds it to the chart using chart.series[0].addPoint.

If the ajax call returns the entire series, you can use chart.series[0].setData to replace the whole series.

The important thing to remember is to ensure that the chart is created before calling addPoint or setData.

Answer 4

When using ajax to update a chart, you only need to fetch new data without redrawing the entire chart. You can simply replace the series data or add individual points. For guidance on implementing this with Highcharts, check out this helpful article here. Here is an example of ajax code recommended by them:

/**
 * Request data from the server, add it to the graph and set a timeout to request again.
 */
function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // Shift if the series is longer than 2.

            // Add the point.
            chart.series[0].addPoint(point, true, shift);

            // Call it again after one second.
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}

In this code snippet, the requestData function is called every second (using setTimeout). It fetches a new data point through an ajax call to live-server-data.php and adds it to the chart using chart.series[0].addPoint.

If the ajax call returns the entire series, you can use chart.series[0].setData to replace the whole series.

The important thing to remember is to ensure that the chart is created before calling addPoint or setData.

Answer 5

Answer №3

   $(function () {
    var myChart;
    var myList;
    $(document).ready(function() {
        var config = {
            chart: {
               //customize your chart attributes here
                 }
                //add any other attributes
           }
 myChart = new Highcharts.Chart(config);
    setInterval(function() {
        $.ajax({
        type: "GET",
        url: "service",
        dataType: "json",
        success: function (data) 
    { 
           myChart.series[0].setData(data);
        }
    }),1000); //will update the chart with ajax data every second, use addPoint() if you want to append data
});
});

Answer 6

   $(function () {
    var myChart;
    var myList;
    $(document).ready(function() {
        var config = {
            chart: {
               //customize your chart attributes here
                 }
                //add any other attributes
           }
 myChart = new Highcharts.Chart(config);
    setInterval(function() {
        $.ajax({
        type: "GET",
        url: "service",
        dataType: "json",
        success: function (data) 
    { 
           myChart.series[0].setData(data);
        }
    }),1000); //will update the chart with ajax data every second, use addPoint() if you want to append data
});
});

Visualizing dynamic data with Ajax in a column bar chart

Answer №1

Answer №2

Answer №3

Similar questions

Preventing cross-site scripting attacks with the help of dynamic pre elements

Issues with Jquery Ajax implementation causing data not to display in HTML

Currently, only the initial button is functional. I am uncertain if it is due to a script issue or if there is a rule that I inadvertently

Pause file uploads, display modal popup, then resume uploading

Having trouble understanding how to incorporate jQuery GetListItems with SharePoint SOAP - it seems simple, but can't figure it out!

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

The loading indicator is not appearing inside the designated box

Is it possible to use the Stop Button on the HTML5 Audio Tag to halt a live MP3 stream

Using ngModel to retrieve and display only the month, year, and date

Using Javascript to upload an image and show it in a small display

Guide to utilizing exact matching functionality in ExpressJs router

WebSocket functionality in Node.js utilizing the ws module from npm

By implementing Async.parallel, I ensure that the lifetime of my parameter does not exceed the duration of the asynchronous calls in NodeJS when working with MongoDB

Creating a Custom Class for a Custom Button in TinyMCE 4 Using addButton()

Trouble with Displaying Angular Template using ng-hide

Tips for Preventing Unnecessary Ajax Requests

What is the process for sending JavaScript with an Ajax request?

Utilizing the Replace function just once

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

What is the method to retrieve text from a div element with Webdriver-IO?