About Indicator auto refresh

I try to use following indicator to make a chart on webpage.

I use it with MySQL database and php. I have a php file named angularGaugeChart.php. It will display above chart by using “plot.ly” library. When first visit it by browser, it can display the chart correctly. I want to refresh he chart automatically. Thus, I added following script. The php can refresh automatically, but it cannot display the chart after refreshment. I want to know what is the problem in it?

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="solarRad" style="width:500px;height:400px;">
include 'SQL.php';


$sqlSolarRad="SELECT * FROM `Test` order by date DESC, time DESC limit 1 ";
$lastRecordSolarRad= $rowsSqlSolarRad['solarRad'];


var dataSolarRad = [
    domain: { x: [0, 1], y: [0, 1] },
    value: <?php echo $lastRecordSolarRad ?>,
    title: { text: "Solar Radiation (W/m²)" },
    type: "indicator",
    mode: "gauge+number",
    delta: { reference: 400 },
    gauge: { axis: { range: [null, 1366] } }

var layout = { width: 700, height: 400};
Plotly.newPlot('solarRad', dataSolarRad, layout);

<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    document.onload = setupRefresh();
    function setupRefresh()

    function refreshBlock()
       $("#solarRad").load("angularGaugeChart.php #solarRad");


Hello @hps3lte!

The only thing you are missing to update the chart is to call Plotly.animate with your new values. Example:

Plotly.animate('solarRad', {
          data: values
        }, {
          transition: {
            duration: 500,
            easing: 'cubic-in-out'

You can see it in action in this Codepen: https://codepen.io/antoinerg/pen/arKrGO


1 Like