Как обновить график без перезагрузки всей страницы?

Question

Павел Ефимов @neon3

электромеханик по автоматизации

AJAX

Как обновить график без перезагрузки всей страницы?

Имеется html страница которая подключает php файл graph.php

где создается график. Html страница обновляет с помощью . Как можно обновить график без обновления всей страницы. Слышал про Ajax, но получалось обновлять только текстовые данные.

Вопрос задан более трёх лет назад
211 просмотров

10 комментариев

Подписаться 1 Средний 10 комментариев

origami1024 @origami1024

Подробнее расскажи, php файл у тебя на выходе файл png или jpg выдает или создает/копирует картинку в другое место?

Написано более трёх лет назад
Moses Fender @mosesfender
Аякса тут не причём. Обновляйте src картинки просто.
let intrvl = setInterval(function () { document.querySelector('img#img').setAttribute('src', 'graph.php']); }, 1000);
Написано более трёх лет назад
Павел Ефимов @neon3 Автор вопроса

origami1024,
?php
require ('gChart.php');
$pie3dChart = new gPie3DChart();
$pie3dChart->addDataSet(array(rand (5,180),66,90));

$pie3dChart->setLabels(array("first", "second", "third"));
$pie3dChart->setColors(array("ff3344", "11ff11", "22aacc"));
$pie3dChart->renderImage($_GET['post']);
?

Написано более трёх лет назад
origami1024 @origami1024

Павел Ефимов, у тебя изначально src=graph.php на картинке стоит?

Написано более трёх лет назад

Павел Ефимов @neon3 Автор вопроса

origami1024,

<html>
<head>
<meta http-equiv="Refresh" content="1" />
<title>graphic</title>
</head>
<body>
<p>
<img src="index.php" />
</p>

</body>
</html>

Написано более трёх лет назад

origami1024 @origami1024
И что если на клике кнопки, например, поставить (как я в ответах предложил)
document.getElementById("myImg").src = "graph.php";

не меняет?
Написано более трёх лет назад
Павел Ефимов @neon3 Автор вопроса

origami1024, работает

Написано более трёх лет назад
origami1024 @origami1024

Павел Ефимов, не сработает, пробуй ответы, они должны оба сработать

Написано более трёх лет назад
Павел Ефимов @neon3 Автор вопроса
origami1024, Остановился пока на таком варианте, без Math.random изображение видимо бралось из кэша и фактически не обновлялось
<html> <head> <title>script</title> </head> <body> <div id="img_reload"> <img src="index.php" /> </div> <script> setInterval(function(){ var img_tag = '<img src="index.php?img' +Math.random(0,100)+ '" />'; document.getElementById('img_reload').innerHTML = img_tag},800); </script> </body> </html>
Написано более трёх лет назад
origami1024 @origami1024

без Math.random изображение видимо бралось из кэша и фактически не обновлялось

да, так и есть, второе решение тоже правильное, у меня лаконичнее написано, но по сути добавлять timestamp более правильно, так как в Math.random есть маленькая вероятность, что random совпадет

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

PHP

+1 ещё

Средний
Как передать значение из одной страницы в скрипт формы, чтобы результат работы этого скрипта вывести в новой вкладке?
- 1 подписчик
- 07 мая
- 98 просмотров
3

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 01 мая
- 71 просмотр
0

ответов
AJAX

Простой
Как сделать коммуникацию front-end и back-end в реальном времени?
- 1 подписчик
- 26 апр.
- 84 просмотра
1

ответ
PHP

+1 ещё

Простой
Как в php формировать ответ на AJAX XMLHttpRequest запрос?
- 1 подписчик
- 23 апр.
- 126 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как принять данные от JQuery.ajax на сервере php?
- 1 подписчик
- 16 апр.
- 105 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Не работает js на jquery-3.7.0?
- 1 подписчик
- 24 мар.
- 471 просмотр
1

ответ
PHP

+1 ещё

Простой
Как очищать модальное окно при вызове через ajax?
- 1 подписчик
- 07 мар.
- 103 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Удалить элемент со страницы после удаления записи из БД через ajax?
- 1 подписчик
- 06 мар.
- 108 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как обработать GET-запрос по AJAX(jQuery) PHP-скриптом?
- 2 подписчика
- 20 февр.
- 107 просмотров
2

ответа
WordPress

+1 ещё

Простой
Как реализовать форму добавления кастомного типа записи на странице сайта?
- 1 подписчик
- 28 янв.
- 53 просмотра
1

ответ
Показать ещё Загружается…

Frontend-разработчик Angular

Beetbarrel

от 120 000 ₽

Backend-разработчик PHP

Beetbarrel

от 110 000 ₽

Senior Backend Engineer в агрегатор нейросетей (150к DAU)

NN Media

от 300 000 до 500 000 ₽

Разработать логотип

15 мая 2024, в 20:48

5000 руб./за проект

Нарисовать рисунок установки

15 мая 2024, в 20:45

6000 руб./за проект

Автоматич-я классификация в QGIis/ArcGis (срочно). Оплата договорная

15 мая 2024, в 20:43

500 руб./за проект

Подробнее расскажи, php файл у тебя на выходе файл png или jpg выдает или создает/копирует картинку в другое место?
Аякса тут не причём. Обновляйте src картинки просто.
let intrvl = setInterval(function () { document.querySelector('img#img').setAttribute('src', 'graph.php']); }, 1000);
origami1024,
?php
require ('gChart.php');
$pie3dChart = new gPie3DChart();
$pie3dChart->addDataSet(array(rand (5,180),66,90));

$pie3dChart->setLabels(array("first", "second", "third"));
$pie3dChart->setColors(array("ff3344", "11ff11", "22aacc"));
$pie3dChart->renderImage($_GET['post']);
?
Павел Ефимов, у тебя изначально src=graph.php на картинке стоит?
origami1024,
<html> <head> <meta http-equiv="Refresh" content="1" /> <title>graphic</title> </head> <body> <p> <img src="index.php" /> </p> </body> </html>
И что если на клике кнопки, например, поставить (как я в ответах предложил)
document.getElementById("myImg").src = "graph.php";

не меняет?
Павел Ефимов, не сработает, пробуй ответы, они должны оба сработать
origami1024, Остановился пока на таком варианте, без Math.random изображение видимо бралось из кэша и фактически не обновлялось
<html> <head> <title>script</title> </head> <body> <div id="img_reload"> <img src="index.php" /> </div> <script> setInterval(function(){ var img_tag = '<img src="index.php?img' +Math.random(0,100)+ '" />'; document.getElementById('img_reload').innerHTML = img_tag},800); </script> </body> </html>
без Math.random изображение видимо бралось из кэша и фактически не обновлялось

да, так и есть, второе решение тоже правильное, у меня лаконичнее написано, но по сути добавлять timestamp более правильно, так как в Math.random есть маленькая вероятность, что random совпадет

Answer 1 · 2019-03-04 18:17:47

origami1024 @origami1024

went out for a night walk

document.querySelector("img").src = 'img.php?' + Math.random()

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2019-03-04 18:26:20

setInterval(()=>{document.getElementById("myImg").src=document.getElementById("myImg").src.split("?")[0]+"?_="+(new Date()).getTime());},1000);

Я бы добавил метку времени чтобы браузер понимал что нужно именно заного скачать файл а не взять его из кэша.

Как обновить график без перезагрузки всей страницы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт