Создание диаграмм при помощи Google Chart APIИсточник: cyberguru
Мне всегда было интересно, как появилась такая фраза, как "рисунок заменяет тысячу слов". Ее легко можно отнести к менеджерам, так как именно они после просмотра длинного списка чисел, могут найти в конце страницы график, объединяющий все цифры, тем самым демонстрируя приведенную фразу. Диаграммы и графики предоставляют краткий обзор большого количества информации. При помощи диаграммы человек может быстро заметить любой тренд, сравнить различные результаты, либо заметить закономерность. Существует множество способов создания диаграмм в веб-странице ASP.NET. Вы можете использовать классы в пространстве имен System.Drawing для того, чтобы создать диаграммы программным путем. Вы также можете использовать Microsoft Office Web Components (OWC). Существуют также свободное программное обеспечение в виде инструментов рисования диаграмм, а также изобилие сторонних компонентов. Компания Microsoft также вступила в игру и предоставила Microsoft Chart Controls for the .NET Framework 3.5 SP1 (Элементы управления диаграммами для .NET Framework 3.5 SP1) . Данная статья рассматривает способ использования Обзор Google Chart APIGoogle Chart API позволяет разработчикам создавать диаграммы различного типа на лету. Google Chart API хранится по ссылке на ресурс (URL) на веб-серверах компании Google и при получении правильно форматированной ссылки (URL) возвращает диаграмму в виде изображения. Характеристики диаграммы (цвета, заголовки, оси, точки на графике и т.д.) указываются посредством строки запроса ссылки (URL). Полученное изображение может быть отображено при помощи элемента <img> , или может быть сохранено в файловой системе вашего веб-сервера либо в базе данных. Самым приятным аспектом является то, что Google Chart API бесплатный и не требует наличия никакой учетной записи и прохождения процесса регистрации! Основной ссылкой на Google Chart API является http://chart.apis.google.com/chart?. Параметры, которые определяют отображение диаграммы следуют после символа ?. Существует множество параметров, которые вы можете указать посредством строки запроса. Единственными обязательными параметрами являются размер диаграммы (chs), данные диаграммы (chd) и тип диаграммы (cht). Следующая таблица описывает некоторые используемые параметры:
Используя информацию, указанную выше, вы можете потестировать создание своих собственных графиков и диаграмм при помощи Google Chart API. К примеру, следующая ссылка сгенерирует линейную диаграмму с размерами 300x200 и значениями 43, 23, 12, 62, 34 и 39, а также заголовком "Monthly Traffic": Обратите внимание на то, что точки графика, посланные в параметре chd не являются теми, которые мы хотим видеть на графике - 43, 23, 12, 62, 34 и 39. Вместо этого были высланы процентные соотношения к самому большому значению данных точек. Другими словами, точка графика x переводится в процентное соотношение при помощи выражения ( x / maxDataPoint ) * 100. К примеру, реальное значение 43 превращается в 43/62 * 100 = 69.3. Вставьте данную ссылку в тег <img> так, как это сделано в следующей разметке : <img src="http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=t:69.3,37.1,19.4,100.0,54.8,62.9&chtt=Monthly%20Traffic" /> И вы получите следующий результат: Хорошо выглядит, не правда ли ? Данная диаграмма очень проста и нам потребовалось 1.5 секунды, чтобы ее создать. Если вы уделите больше времени на исследование возможностей Google Chart API , то вы найдете параметры, которые вы можете использовать для указания цветов, добавления осей, ярлыков и других стандартных характеристик. К примеру, мы можем включить числовые значения к оси Y , чтобы продемонстрировать число посещений и значения дней на оси X, просто обновив ссылку таким образом, чтобы она использовала следующую строку запроса: Вот как будет выглядеть диаграмма: Создание Google-диаграммы для ASP.NET-страницы, используя информацию из базы данныхПоработав больше вы сможете создать диаграмму, основанную на значениях из базы данных при помощи Google Chart API. Нам просто необходимо создать соответствующую строку запроса, основанную на данных, по которым необходимо ее создать, типу диаграммы и ярлыкам осей X и Y (в случае, если таковые есть). Далее в статье мы рассмотрим построение строки запроса в ASP.NET-странице для запроса к базе данных, который возвращает объем продаж по месяцам для компании Northwind Traders. Работающий код вы можете загрузить в конце статьи. Первым шагом будет создание запроса, который возвращает необходимые данные. Мой пример использует базу данных Northwind, которая хранит в себе информацию по товарам (products), клиентам (customers), заказам (orders) и т.д. Для данного примера я решил создать диаграмму валового объема продаж по месяцам заданного года. Следующий запрос возвращает данную информацию для заданного года: SELECT MONTH(o.OrderDate) AS MonthVal, SUM(od.UnitPrice * od.Quantity) AS Total База данных Northwind имеет продажи для 1996, 1997 и 1998 годов. Если вы передадите одно из этих значений в качестве параметра @Year, то вы получите следующие результаты:
Пример указывает упомянутый запрос в элементе управления SqlDataSource и отображает результаты на странице в элементе управления GridView. GridView был специализирован таким образом, чтобы он отображал результаты колонки Total в формате валюты, а также форматировал колонку MonthVal таким образом, чтобы в каждой строке содержались только первые три буквы каждого месяца. Данное форматирование MonthVal обрабатывается вспомогательной функцией в фоновом коде, а именно DisplayMonthName, которая принимает месяц в качестве числового значения (1, 2, ..., 12) и возвращает форматированное значение ("Jan", "Feb", ..., "Dec"). Я также добавил элемент управления DropDownList к странице для того, чтобы пользователь мог указать значение параметра @Year - DropDownList имеет жестко запрограммированные значения 1996, 1997 и 1998. В дополнение к элементам управления SqlDataSource, GridView и DropDownList для года страница включает в себя элемент управления Image для отображения диаграммы. Свойство ImageUrl элемента Image программно установлено в соответствующую ссылку URL в классе с фоновым кодом. Это обрабатывается в методе DisplayChart. Данный метод начинается с создания основной части ссылки (URL) - тип диаграммы (cht), размер диаграммы (chs) и заголовок диаграммы. Тип диаграммы и размер диктуются значениями, выбранными пользователем при помощи элементов управления DropDownList. Protected Sub DisplayChart() Далее, вызывается метод Select элемента SqlDataSource. Данные результаты перечисляются и их значения собираются в список десятичных значений (Decimal) (literalDataPointsList) и ярлыки для каждой точки данных, то есть аббревиатуры каждого месяца, записываются в список строковых значений (xAxisLabels). Как только будут записаны значения точки графика они будут выражены в процентном соотношении к самому большому значению и сохранены в списке строковых значений, названном relativeDataPointValues. Значения в данном списке затем объединяются (при этом они разделены запятыми) и назначаются параметру данных диаграммы (chd). ... Далее указываются ярлыки для осей X и Y. Ось Y простирается от 0 до максимального значения, возвращенного запросом, в то время как точки данных оси X загружаются из списка xAxisLabels. Наконец, свойству ImageUrl элемента Image назначается значение построенной ссылки (URL). ... В конце концов вы должны увидеть диаграмму, показанную ниже. Первый рисунок демонстрирует продажи за 1996 год в линейном виде, а второй - продажи за 1997 при помощи столбцовой диаграммы. ВыводGoogle Chart API предлагает быстрый и легкий способ создания множества различных видов диаграмм для вашего веб-сайта. Для того, чтобы создать диаграмму, вам понадобится осуществить запрос по ссылке URL к Google Chart API , при этом передавая характеристики диаграммы (размеры, точки данных, цвета, ярлыки и т.д) при помощи строки запроса. Chart API возвращает изображение, которое вы можете отобразить в элементе <img>. Немного поработав, вы сможете создавать такую ссылку диаграммы прямо из веб-страницы ASP.NET, а также создавать диаграммы на основе информации из базы данных. В данной статье мы рассмотрели способ создания ссылки вручную, а в следующей мы рассмотрим специализированный элемент управления, который поддерживает декларативную привязку данных и другие полезные возможности. Веселого программирования! |