Google диаграммы и jQuery AJAX


jquery — круговая диаграмма Google с ajax и php не работает

Я пытаюсь создать круговую диаграмму Google, используя ajax и php. Но это не работает для меня. Пожалуйста, кто-нибудь, помогите мне. Код приведен ниже.
Моя первая страница — piechart.php

Моя страница ajax — get_piechart.php

файл данных — getData1.php

При нажатии на кнопку круговой диаграммы я получил ошибку Uncaught ReferenceError: Google не определен. Пожалуйста, помогите мне решить эту проблему

Заполните Google Charts после Ajax Success динамическими данными

Я хочу загрузить линейную диаграмму Google (отзывчивую) после успеха Ajax. Я пытался поместить весь код Google Chart в Успешную часть вызова Ajax, но ничего не получалось. Вот мой код для Ajax:

Теперь мой код Google Chart такой:

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

1 ответ

Во-первых, вы используете старую версию Google Chart.
jsapi больше не должен использоваться, см. обновление кода загрузчика библиотеки .

нужно использовать следующую библиотеку вместо .

это только изменит оператор load .

и, говоря об операторе load ,
будет ждать загрузки страницы по умолчанию,
, чтобы вы могли использовать ее вместо. ..

$( window ).on( «load». и $(document).ready и т. Д.

рекомендуют настройку, аналогичную следующей .

jquery — Как загрузить диаграмму google с помощью ajax и jquery?

Поэтому моя ситуация следующая:

У меня есть страница, которая создает диаграмму google, где я помещаю график в div в качестве примера здесь. Https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

Это отлично работает, если я получаю эту страницу на другой странице, используя iframe as

но я хотел бы получить его с помощью ajax.


Я пробовал следовать

Если первый журнал показывает html-код по желанию, но при регистрации фактического div, который будет содержать диаграмму google, я хотел бы показать, что переменная результата кажется пустой.

Здесь изображен chart.html. Я взял много несвязанного кода, но вы должны получить эту идею.

и еще несколько тем.

Итак, есть способ загрузить диаграмму google таким образом или я должен использовать iframe? Поскольку я предполагаю, что происходит, что другая диаграмма никогда не создавалась или что-то еще?

jQuery для начинающих. Часть 3. AJAX

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов.

Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы.

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

// по окончанию загрузки страницы
$ ( document ) . ready ( function ( ) <
// вешаем на клик по элементу с >
$ ( ‘#example-1’ ) . click ( function ( ) <
// загрузку HTML кода из файла example.html
$ ( this ) . load ( ‘ajax/example.html’ ) ;
> )
> ) ;

jQuery.ajax

$. ajax ( <
url : ‘/ajax/example.html’ , // указываем URL и
dataType : «json» , // тип загружаемых данных
success : function ( data , textStatus ) < // вешаем свой обработчик на функцию success
$. each ( data , function ( i , val ) < // обрабатываем полученные данные
/* . */
> ) ;
>
> ) ;

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-3’ ) . click ( function ( ) < // вешаем на клик по элементу с >
$. post ( ‘ajax/example.xml’ , < >, function ( xml ) < // загрузку XML из файла example.xml
$ ( ‘#example-3’ ) . html ( » ) ;
$ ( xml ) . find ( ‘note’ ) . each ( function ( ) < // заполняем DOM элемент данными из XML
$ ( ‘#example-3’ ) . append ( ‘To: ‘ + $ ( this ) . find ( ‘to’ ) . text ( ) + ‘
‘ )
. append ( ‘From: ‘ + $ ( this ) . find ( ‘from’ ) . text ( ) + ‘
‘ )
. append ( ‘‘ + $ ( this ) . find ( ‘heading’ ) . text ( ) + ‘
‘ )
. append ( $ ( this ) . find ( ‘body’ ) . text ( ) + ‘
‘ ) ;
> ) ;
> , ‘xml’ ) ; // указываем явно тип данных
> )
> ) ;


version = «1.0» encoding = «UTF-8» ?>
>
> Tove >
> Jani >
> Reminder >
> Don’t forget me this weekend! >
>

jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-4’ ) . click ( function ( ) < // вешаем на клик по элементу с >
$. getJSON ( ‘ajax/example.json’ , < >, function ( json ) < // загрузку JSON данных из файла example.json
$ ( ‘#example-4’ ) . html ( » ) ;
// заполняем DOM элемент данными из JSON объекта
$ ( ‘#example-4’ ) . append ( ‘To: ‘ + json. note . to + ‘
‘ )
. append ( ‘From: ‘ + json. note . from + ‘
‘ )
. append ( ‘‘ + json. note . heading + ‘
‘ )
. append ( json. note . body + ‘
‘ ) ;
> ) ;
> )
> ) ;

<
note : <
to : ‘Tove’ ,
from : ‘Jani’ ,
heading : ‘Reminder’ ,
body : ‘Don \’ t forget me this weekend!’
>
>

jQuery.getScript

данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

  1. url запрашиваемого скрипта
  2. callback функция, которой будет скормлен результат (необязательный параметр)

function testAjax ( ) <
$ ( ‘#example-5’ ) . html ( ‘Test completed’ ) ; // изменяем элемент с >
>

Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Цукерберг рекомендует:  Боковая корзина покупок

Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP

Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск


Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

JSONP API

Приведу так же небольшой список открытых API с поддержкой JSONP:

  • Google — поиск и большинство сервисов
  • Yahoo — поиск и большинство сервисов
  • Flickr
  • MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
  • Digg
  • CNET
  • aideRSS

События

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с >

$ ( «#loading» ) . bind ( «ajaxSend» , function ( ) <
$ ( this ) . show ( ) ; // показываем элемент
> ) . bind ( «ajaxComplete» , function ( ) <
$ ( this ) . hide ( ) ; // скрываем элемент
> ) ;

$. ajax ( <
beforeSend : function ( ) <
// Handle the beforeSend event
> ,
complete : function ( ) <
// Handle the complete event
>
// .
> ) ;

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

  • ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
  • beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
  • ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
  • success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
  • ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
  • error — Срабатывает в случае ошибки. Локальное событие
  • ajaxError — Срабатывает в случае ошибки
  • complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
  • ajaxComplete — Глобальное событие, аналогичное complete
  • ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Так же Вы можете скачать все примеры в одном архиве.

Вопрос по jquery, ajax, google-visualization &#8211 Перерисовывать Google Chart после каждого вызова Ajax

Когда диаграмма загружается в первый раз с исходным ответом Ajax по умолчанию, она работает нормально. Если я добавлю в console.log (chart_data), я увижу данные по умолчанию, а после отправки я увижу новые данные. Единственная проблема — диаграмма нетяну себя снова. Я знаю, что функция drawChart не запускается во второй раз, я просто нене знаю почему. Я’м, если это так, диаграмма перерисовывается сама. Извините, если ответ очевиден; Я очень плохо знаком с jQuery / Ajax.

Цукерберг рекомендует:  Пиратские истории. Блокировка RuTracker

Любая помощь будет оценена. Спасибо!

что выПовторная загрузка данных немного усложняет, но не намного. Я бы порекомендовал вам сделать google.load один раз в верхней части вашего javascript, а в качестве обратного вызова установить load_page_data. Затем вы бы вызвали drawChart оттуда. Измененный код будет выглядеть примерно так:

мы уже определили, что функция неВо второй раз запустив файл console.log или что-то еще, вы можете попробовать удалить параметры из своей функции и назвать ее так, как это делает Google в своих примерах:

Ваш код выглядит хорошо для меня, но яя не уверен, как setOnLoadCallback готовит параметры как яЯ не очень знаком с библиотеками чартов.


Как загрузить диаграмму Google, используя ajax и jquery?

Итак, моя ситуация следующая:

У меня есть страница, которая создает диаграмму Google, где я помещаю график в div в качестве примера здесь https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

Это прекрасно работает, если я перенесу эту страницу на другую страницу, используя iframe как

но я бы хотел получить его с помощью ajax.

Я пытался следовать

Где первый журнал показывает HTML-код, как и хотел, но при регистрации фактического div, который будет содержать диаграмму Google, я хотел бы показать, что переменная результата кажется пустой.

Вот обрисованный в общих чертах chart.html. Я снял много несвязанного кода, но вы должны понять.

и несколько других тем.

Так есть ли способ загрузить диаграмму Google таким образом, или я должен просто использовать iframe? Так как я думаю, что случится, что другой график никогда не был создан или что-то?

Create a Google Pie Chart from SQL Server Data using jQuery Ajax and Asp.Net Web Service — C# and Vb.Net

In one of my earlier posts, I have shown how to create interactive Google Pie Charts using static data, such as, an array. However, in real time scenarios, you’ll required to create graphs or charts using live data. So, let’s see how we can create a dynamic Pie Chart with Google Charts Tool using dynamic data. The data will be extracted from an SQL Server database table using jQuery Ajax and Asp.Net webservice.

Before we start building our web page, we need to create our SQL Server table. Here I have a table called dbo.Books_Annual_Sales , which stores monthly sales of Books, that is, the number of units sold every month. First, create the table and add few rows to it.

The table has two columns, the “Month” and “SalesFigure” .

In the &lthead> section, I have included two links one for the jQuery API and second the Google charts API. Both the links provide us with the necessary functions. Inside the &ltbody> section, I have only added a DIV element, which serves as a container.

We will load visualization using google.load() method with its three parameters.

1) visualization : It provides the chart.
2) version : The version of the API and its set to “1”.
3) package : The package is an array with a list of “visualization” (chart properties). I have defined the corechart package for the Pie chart.

I have also set few properties as options , such as, the title for the chart, defined two different colors to highlight the figures differently. Finally, I want the Pie chart to be three-dimensional .

You may remove one or all the options and see the result.

In the Ajax section, I have added the necessary properties for extracting the data from a remote machine. I am using a typical web service for data extraction using JSON.

Once extracted, I’ll store the data in an Array and later deliver the data to the Google API for the graph. I have explained clearly about each Google chart API method that I have used in this example in my previous article here. Don’t miss the article, as I have explained the methods step by step, as it very important to understand how Google Charts work.


Google диаграммы и jQuery AJAX

263 просмотра

1 ответ

6 Репутация автора

Как динамически добавлять строки в круговую диаграмму Google каждый раз, когда данные извлекаются с помощью вызова ajax?

круговая диаграмма гугл

теперь вместо динамического добавления строк, как только страница загружена, я должен добавить новые значения, извлеченные из запроса ajax, например:

Ответы (1)

плюса

41018 Репутация автора

по умолчанию google.charts.load будет ждать загрузки страницы,
мы можем использовать это вместо $(document).ready или аналогичные функции.

Как только Google Maps загрузится, создайте таблицу данных, диаграмму, параметры и т. д.,
затем получите данные.

предполагая, что данные представляют собой массив массивов, аналогично приведенному вами примеру,
вы можете просто использовать метод таблицы данных, addRows чтобы добавить данные в таблицу данных.
например

Цукерберг рекомендует:  Блестящие примеры ценовых таблиц для вашего вдохновения

если это один массив или одна строка, используйте addRow

полный фрагмент может выглядеть примерно так .

Geting Ajax data to google charts

Hi, I am trying to view a google line chart using ajax. Following is the my code. Ajax calling and google chart initializing.

So how I put var a; in to data.addRows([a]); ? Please help me.

Please sign in or create an account to participate in this conversation.

The most concise screencasts for the working developer, updated daily.

There’s no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!


Want us to email you occasionally with Laracasts news?

Nine out of ten doctors recommend Laracasts over competing brands. Come inside, see for yourself, and massively level up your development skills in the process.

Learn
Discuss
Extras

© Laracasts 2020. All rights reserved.
Yes, all of them. That means you, Todd.

Designed with by Tuds.
Proudly hosted with Laravel Forge and DigitalOcean.

Прикладное программирование с нуля.

AVR, STM, Android, IoT. Встраиваемые системы.

Построение графика по данным из базы. AJAX, JSON. Шаг №69

Всем привет. Закончив рассматривать, в прошлой статье, технологию построения графиков и диаграмм используя технологию Google Charts, сегодня мы подвяжем этот график к базе данных. Т.е. используем динамические данные. Да друзья извлечем ранее занесенные данные в базу, где данный шаг был описан в статье №67. Итак приступим.

function drawChart () <
var jsonData = $.ajax ( < //запрос
url: «getData.php», //файл — источник данных
dataType: «json»,
async: false //важный параметр, отвечает за асинхронный или синхронный запрос, должен быть false
>).responseText;
// Create the data table.
var data = new google.visualization.DataTable (jsonData);

Что ж давайте немного разберем ajax — запрос. AJAX (Asynchronous Javascript and XML) — технология, синтез Javascript, и XML . Используя AJAX нет необходимости обновлять все время страницу, что экономит время и деньги. Если Вы следите за проектом то увидите что мы начали использовать данную технологию начиная с интерактивная карта контроллера , загрузив библиотеку jquery.min.js для выделения кликабельных областей, вывода GET-параметров на экран и т.д. Работает AJAX двумя способами: 1-й -изменение Web-страницы не перезагружая её, что и использовалось в предыдущих статьях и 2-й вариант — динамическое обращение к серверу, что мы используем сегодня. Для осуществления этого используется объект XMLHttpRequest , который является своеобразным посредником между браузером пользователя и сервером. С помощью него можно отправить запрос на сервер, а также получить ответ в виде различного рода данных. Что мы и делаем используя свойство данного объекта — responseText — представление ответа сервера в виде обычного текста (строки).

Так вернемся к источнику примера подключения к БД. The drawChart () function calls the jQuery ajax () function to send a query to a URL and get back a JSON string . Функция возвращает JSON string. Где JSON (J avaScript Object Notation ) — текстовый формат обмена данными, основанный на JavaScript . Файлы JSON часто используются в Ajax вместо XML. JSON определяет небольшой набор правил форматирования для портативного представления структурированных данных и является легко читаемым. Формат JSON может быть реализован как набор пар ключ-значение (ассоциативный массив, объект или запись) или упорядоченный набор значений (массив или вектор). Мы изменим файл getData.php , где будем непосредственно обращаться к БД и преобразовывать их в j son-формат . Ниже код

//обращаемся к БД
define («HOST», » «);
define («USER», » «);
define («PASSWORD», » «);
define («DB_NAME», « „);

$db_connect = mysql_connect (HOST,USER,PASSWORD,TRUE);
if (!$db_connect) <
die (‘Ошибка подключени’.mysql_error ()); >

mysql_select_db (DB_NAME, $db_connect);
// mysql_set_charset ($db,“utf8»);

На рисунке слева — результат работы кода. У меня на странице web-интерфейса два графика. Один статический справа, второй слева — динамический. На рисунке изображена БД и график построенный по данным T1, T2.

В ходе наладки Вы можете столкнутся со следующими ошибками. У меня их было две: 1-ая -неправильное подключение БД. При выполнении скрипта PHP выдает такую ошибку:

Warning: mysql_query () expects parameter 2 to be resource, string given in.
Ошибка заключается в Соединение MySQL . Если идентификатор соединения не был указан, используется последнее соединение, открытое mysql_connect (). Если такое соединение не было найдено, функция попытается создать таковое, как если бы mysql_connect () была вызвана без параметров. Если соединение не было найдено и не смогло быть создано, генерируется ошибка уровня E_WARNING .
Т.е вместо стоки
mysql_connect ($server, $user, $pass) or die (mysql_error ());
Необходима
$connect = mysql_connect ($server, $user, $pass) or die (mysql_error ());

Выше мы рассмотрели пример построения графика, на технологии Google Charts ( рассмотрели в прошлой статье ) , по данным из базы данных. Использование ajax-запроса и преобразование данных в json-формат. Рассмотрели возможные ошибки. В следующей статье продолжим работу с веб-интерфейсом. На этом сегодня и остановимся. Всем пока.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих