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

Question

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

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

AJAX

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

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

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

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

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 совпадет

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

Помогут разобраться в теме Все курсы

Компьютерная академия «TOP»

Разработка на Python

1 год

Далее
beONmax

Курс JavaScript – полный курс с нуля до результата

1 месяц

Далее
Компьютерная академия «TOP»

WEB разработка Fullstack

12 месяцев

Далее

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

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

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

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

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

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

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

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

JavaScript

+2 ещё

Простой
Не могу передать POST запрос ajax/js почему?
- 1 подписчик
- 07 сент.
- 654 просмотра
2

ответа
JavaScript

+2 ещё

Средний
Почему не получается обратиться к наследуемому свойству (php) через асинхронный запрос?
- 2 подписчика
- 19 апр.
- 1323 просмотра
1

ответ
HTML

+1 ещё

Средний
Форма ввода с использованием ajax. Не работает на сайте, как исправить?
- 1 подписчик
- 31 мар.
- 91 просмотр
0

ответов
JavaScript

+3 ещё

Простой
Как реализовать обновление цены?
- 1 подписчик
- 29 мар.
- 243 просмотра
1

ответ
AJAX

+1 ещё

Простой
Как добавить кнопку отображения скрытого поля в Тильде?
- 1 подписчик
- 06 мар.
- 158 просмотров
2

ответа
Фронтенд

+1 ещё

Простой
(Решён) Как делать get запрос при включении фильтров + отображение без кодирования в строке поиска?
- 1 подписчик
- 10 февр.
- 86 просмотров
0

ответов
MODX

+2 ещё

Сложный
Как сделать отложенную загрузку сниппета?
- 1 подписчик
- 28 нояб. 2024
- 115 просмотров
2

ответа
PHP

+1 ещё

Простой
Как вывести на сайт что я печатаю сообщение из телеграмм?
- 1 подписчик
- 04 нояб. 2024
- 148 просмотров
1

ответ
WooСommerce

+1 ещё

Сложный
Как заставить woocommerce_update_order_review_fragments передавать верную информацию?
- 1 подписчик
- более года назад
- 91 просмотр
2

ответа
PHP

+4 ещё

Простой
Как с удаленного сервера отправить запрос на POS терминал?
- 1 подписчик
- более года назад
- 249 просмотров
3

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

Senior/Lead PHP Developer

Boomerangme 🎫

от 3 000 до 7 000 $

Маркетинговый аналитик

МТС • Грозный

от 60 000 ₽

React Developer

ITK academy • Воронеж

от 50 000 до 90 000 ₽

Подробнее расскажи, 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);

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

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

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

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

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