Создание интерактивных графиков в Интернете
АрхивСуществует по крайней мере два способа отображения изменяющихся массивов данных: табличный и графический. Первый из них - табличный - имеет высокую информативность и точность, в то время как второй способ - графический - представляет изменения в массивах данных более наглядно. Вывод информации в виде графика всегда представлял собой достойную задачу для программистов.
С появлением Internet и WWW встала задача представления динамических потоков данных (например, биржевых котировок, сравнительных характеристик других объектов) от удаленных серверов в интерактивном режиме.
Табличная информация представляется в браузере на основе CGI (Common Gateway Interface) и может обновляться вручную (при нажатии кнопки "Reload") или при помощи Java-скрипта, генерирующего запрос через определенные промежутки времени.
Представление в поле браузера динамичных графиков является непростой задачей, поскольку к ним предъявляются довольно жесткие требования: во-первых, график должен быть репрезентативным, а во-вторых, мгновенно обновляться себя при изменении информации в базе данных. (Мы здесь не говорим о стационарных графиках-картинках, которые вмонтированы в HTML-файл и не связаны с базой данных и выполняют скорее декоративные функции.)
Несмотря на то что существует ряд продуктов, позволяющих создавать графики с многообразным интерфейсом, все они базируются на технологии ActiveX и не работают с весьма популярным браузером Netscape Navigator.
В настоящей статье приведены программные решения, позволяющие выводить графики на HTML-страницу на основе совершенно новой технологии; при этом от браузера не требуется поддержки объектов ActiveX. Речь идет о создании JPEG-файлов на основе информации, получаемой из базы данных или предписанной заранее. Надеемся, что изложенные сведения будут полезны программистам, работающим над интерактивными Web-сайтами, а также вебмастерам, нуждающимся в возможностях, которых не может дать HTML.
Поскольку эта технология не требует дополнительных программных модулей (plugins), то, естественно, она не может обеспечить универсального удовлетворения всех потребностей пользователя. По большому счету следует отметить, что в случае реализации излагаемых программных решений пользователь должен жать на кнопку "Reload" для обновления данных, поэтому имеет смысл их применять в страницах, связанных с такими базами данных, сведения в которых не обновляются ежеминутно: пользователь, посетив страницу на следующий день, получит свежие данные. (Впрочем, и в этом случае он, возможно, получит желаемый файл не от сервера, а из кэша, и ему придется нажать на "Reload" еще раз. Причина этого заключается в том, что на сервере обновляется только содержание JPEG-файла, а его имя остается неизменным. Вебмастер может исключить эту ситуацию, поместив на Web-страницу ярлыки типа <META CONTENT="no-cache"> или <META HTTP-EQUIV="Refresh" CONTENT="URL=http://www.sourcewebsite.com">.)
Хотя иллюстрация наших решений основана на примере сервера IIS (Internet Information Server) под управлением WinNT с использованием ASP (Active Server Pages), с небольшой модернизацией все описанное может быть преподнесено как CGI-механизм. Программа не работает на Unix-серверах.
В статье мы рассмотрим два примера: создание статического графика с предписанными свойствами и создание графика, подключенного к базе данных.
Описываемая технология разработана компанией Server Objects. Создание первого графика займет не более получаса, после чего изучение и усвоение возможностей технологии окажется совсем простым занятием. Для начала следует посетить Web-сайт компании (www.serverobjects.com/products.htm#AspChart) и скачать оттуда shareware-копию AspChart 1.4 (которая, однако, перестает функционировать через пару недель; полная версия программы стоит 49,95 доллара). Там же представлена обширная документация, которой мы воспользовались для составления статьи. В заархивированном файле вы найдете библиотеку ASPChart.dll. Разместите ее в системной директории вашего сервера и зарегистрируйте (например, из командной строки MS-DOS):
C:\windows>regsvr32 c:\winnt32\system32\aspchart.dll
(Предполагается, что системная директория system32 находится в директории winnt32. Если это не так, замените названия на соответствующие.) Теперь ваш сервер готов генерировать графики.
Вся работа по встраиванию и созданию JPEG-файла ведется на сервере. Библиотека ASPChart.dll управляет созданием JPEG- или BMP-файла в указанном программистом месте на сервере, и, поскольку название файла заранее известно (вы также задаете его в свойствах графика), вам остается только указать этот файл в ASP или HTML. Нижеследующий код демонстрирует простоту создания графика.
Пример 1
<%
Dim Chart
`* Создание программного объекта "Граф".
Set Chart = Server.CreateObject ("ASPChart.Chart")
`* Добавление заголовка - необязательная процедура.
Chart.ChartTitleAdd "Russian Cities"
Chart.ChartTitleFont.Name = "Arial"
Chart.ChartTitleFont.Size = 12
Chart.ChartTitleFont.Bold = True
Chart.ChartTitleFontColor=vbBlack
`* Создание графа в виде трехмерных столбиков. 5 соответствует
`* линиям, 6 точкам.
`* Другие значения вы найдете в документации. Всего 8.
Chart.AddSeries (1)
`* Построение самого графика. Сначала заносится значение аргумента, потом его
`* название и цвет.
Chart.AddValue 9.5, "Moscow", vbBlue
Chart.AddValue 0.5, "Chita", vbRed
Chart.AddValue 0.8, "Tver", vbGreen
Chart.AddValue 1.2, "Rostov-na-Donu", vbYellow
`* Это свойство необязательное. Оно создает специальный эффект
`* "переход цвета"
Chart.BarStyle = 1
`* Фон графика. Всего имеется 8 цветов.
ChartBGColor = vbWhite
`* Указание размеров также является необязательным.
Chart.Height = 300
Chart.Width = 500
`* Если запись Chart.ImageFormat=1 опущена, то это будет по определению
`* формат JPEG; 2 соответствует BMP и 3 PNG формату.
`* Запись и сохранение графа в файле graph1.jpg.
Chart.FileName = "c:\inetpub\wwwroot\images\graph1.jpg"
Chart.SaveChart
`* Вывод графика в HTML-файл.
Response.Write "<html><title>Testing Graph</title>"
Response.Write "<body bgcolor=white>"
Response.Write "<img src="/printimages/249/printimages/249/""/images/graph1.jpg"">"
Response.Write "</body></html>"
`* Уничтожение объекта.
Set Chart = Nothing
%>
Результат работы этой программы представлен на рис. 1
Рис. 1. Результат работы кода и примера 1.
Мы используем на обоих компьютерах (сервере и клиенте) английские операционные системы (Win NT и Win 95 соответственно), и в силу этого нам не удалось вывести на графике русский текст. Предоставляем читателю возможность самому поэкспериментировать с русифицированными версиями этих операционных систем.
Следует заметить, что на первом примере в принципе закончилась демонстрация техники. Прочие детали, включая неописанные свойства, вы найдете в документации, посетив рекомендуемую Web-страницу.
На следующем примере мы продемонстрируем возможность вывода на график значений из базы данных. В основе примера будет лежать простая база данных (Access 97); для общности, однако, мы приводим ODBC-интерфейс, что позволит вам с равным успехом использовать Oracle, SQL Server и прочие базы данных. Демонстрируемая база данных (goroda.mdb) содержит таблицу Cities c полями "City" и "Population". После того как база данных создана и значения внесены в таблицу, необходимо создать имя источника данных (Data Source Name - DSN). Для этого:
- Нажмите на кнопку Start->Settings->Control Panel и дважды щелкните на пиктограмме ODBC.
- Выберите уровень System DNS и нажмите кнопку "Add".
- Выберите Microsoft Access Driver (или иной драйвер, соответствующий вашему случаю) и щелкните на кнопке "Finish".
- В появившемся окне введите название для DNS (в нашем случае это Russian_Cities; см. нижеследующий код) и нажмите на кнопку "Select".
- Теперь выберите файл базы данных, который вы создали (в нашем случае - goroda.mdb) и нажмите кнопку "OK". Установка ODBC закончена.
Дальнейшая задача состоит в создании графического объекта (Chart), соединении с базой данных, создании рекордсета и передаче из него данных в графический объект строчка за строчкой.
Конкретный код приведен ниже.
Пример 2
<%
Dim rst
Dim Chart, rsData, intColor, intRecNo
`* Введение констант.
Dim Color(8)
Color(0) = vbRed
Color(1) = vbBlue
Color(2) = vbYellow
Color(3) = vbGreen
Color(4)= vbMagenta
Color(5)= vbCyan
Color(6)= vbWhite
Color(7)= vbBlack
intRecNo = 1
cNone = 0
cGradient = 6
ctBar = 1
`* Создание графического объекта на сервере.
Set Chart = Server.CreateObject ("ASPChart.Chart")
`* Подсоединение к базе данных.
Set MyConnection=Server.CreateObject("ADODB.Connection")
MyConnection.open "Russian_Cities"
`* Инициализация рекордсета.
Set rst=MyConnection.Execute("SELECT City, Population from Cities;")
Chart.AddSeries (ctBar)
`* Задание характеристик подписей к графу.
Chart.AxisHorizFont.Name = "Arial "
Chart.AxisHorizFont.Size = 8
Chart.AxisHorizFont.Bold = True
`* Определение заголовка графа.
Chart.ChartTitleAdd "Russian Cities"
Chart.ChartTitleFont.Name = "Arial "
Chart.ChartTitleFont.Size = 12
Chart.ChartTitleFont.Bold = True
Chart.ChartTitleFontColor=vbWhite
`* Стандартная процедура по передаче данных из рекордсета в
`* переменные.
rst.MoveFirst
Do while not rst.EOF
intColor = (intRecNo-1) mod 7
Chart.AddValue rst("Population"), rst("City"), Color(intColor)
rst.MoveNext
intRecNo = intRecNo + 1
Loop
'* Описание фона.
Chart.GradientVisible = true
Chart.GradientStartColor = vbYellow
Chart.GradientEndColor = vbBlue
`* Задание размеров графа.
Chart.Height = 300
Chart.Width = 500
`* Сохранение графа в файле.
Chart.FileName = "c:\inetpub\cisaroot\images\cities.jpg"
Chart.SaveChart
Responssrc="/printimages/249/te "<img src="/printimages/249/"/images/cities.jpg"">"
`* Закрытие объекта для освобождения памяти сервера.
Set Chart = nothing
%>
А вот как выглядит сам файл cities.jpg (см. рис. 2).
Рис. 2. Результат работы кода из примера 2.
Как видите, простая технология позволяет получать весьма эффектные графические результаты. Тем не менее, при тестировании AspChart 1.4 авторы нашли некоторые недостатки. Так, например, когда вам надо вывести на график качественно разные группы для сравнения (например, объемы закупок по датам для ряда клиентов), вполне естественно присвоить каждой группе свой цвет. Однако, как нам объяснили в компании Server Objects, это можно сделать только вручную. Программа создания графика сама не группирует данные, исходя из рекордсета.
Скажем несколько слов об альтернативных способах создания графиков. Строго говоря, другой, помимо описываемой нами, технологии, которая создавала бы JEPG-, BMP- или GIF-файлы, готовые для использования в любом браузере, пока не существует. Для программиста, клиенты которого предпочитают браузер Netscape Navigator, нет другого столь простого и эффективного выхода. Тем не менее, надо ясно понимать, что хороший программист может обойтись и без этой технологии, создавая графики в Netscape Navigator с помощью HTML.
C другой стороны, существуют куда более мощные средства графического представления данных. Но все они используют технологию ActiveX, а следовательно, пригодны лишь для использования в браузере Internet Explorer. Использование их в Netscape требует дополнительных модулей, а иногда и вовсе невозможно.
Одно из наиболее мощных альтернативных графических средств - ChartFX - разработано компанией SoftwareFX, которая специализируется на создании графических инструментов для программистов. Интернет-версия ChartFX позволяет пользователю (не программисту!) изменять цвета, тип и стиль графика уже в самом браузере. Браузер запоминает сделанные пользователем установки и при последующем возвращении на страницу представляет графику в удобном виде. Технология может быть использована в Netscape Navigator с соответствующим дополнительным модулем. Основными недостатками, однако, является куда более высокая цена (699 долларов за лицензию), а DLL-функции, которые "работают на график", потребляют в 10 раз больше ресурсов на винчестере.
Другой эффективной технологией является доработка СУБД MS Access, позволяющая сохранять отчеты (причем как графические, так и обычные) в специальном формате. Далее эти файлы сохраняются на сервере и вызываются в браузер через модуль ActiveX. Возможность передачи профессионально выглядящих отчетов по Сети в любую часть света представляет собой несомненное технологическое достижение. Более того, распечатка отчетов на принтер возможна прямо из модуля ActiveX, а не с помощью кнопки браузера "Print". Поэтому на принтере получаются готовые отчеты без лишней информации, обычно сбрасываемой на принтер браузером. Другим важным преимуществом этой технологии является ее доступность - она бесплатна. Разработчику необходимо установить последнюю версию Access и скачать необходимый материал Web-сайта компании Microsoft. Мы надеемся детально описать эту технологию в следующей статье (правда, в отличие от описанной выше, эта технология работает только с Access и не совместима с другими базами данных, которые не поддерживают нужного формата).
|
Прочие графические технологии не так популярны либо вследствие сложности применения, либо по причине нестабильности в работе.
В заключение хотим добавить, что настоящая статья не учебное пособие - она нужна для того, чтобы читатель решил, нужны ли ему вышеописанные возможности.
