Web Matrix. Отображение данных: диаграммы

Создание диаграмм при помощи массивов данных

1.Откроем проект, "Web Matrix. Работа с данным" – SmallBakery:

увеличить изображение
Рис. 11.1.

2.Перейдем в рабочее пространство ( workspace ) "Файлы", и создадим новый CSHTML файл ChartArrayBasic.cshtml:

увеличить изображение
Рис. 11.2.

3.Заменим исходный код страницы ChartArrayBasic.cshtml на:

@{
    var key = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] {"2", "6", "4", "5", "3"})
        .Write();
}

В данном фрагменте кода, сначала создается новая диаграмма и задается её ширина и высота (600x400):

var key = new Chart(width: 600, height: 400)

Далее добавляется заголовок диаграммы с помощью AddTitle:

.AddTitle("Chart Title")

После добавляем данные к диаграмме с помощью метода AddSeries, где xValue – значение по горизонтали, yValues - значения по вертикали:

AddSeries(
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] {"2", "6", "4", "5", "3"})

И метод write используется для отображения диаграммы на странице:

.Write();

4. Запустим веб-страницу. В браузере отобразиться диаграмма:

увеличить изображение
Рис. 11.3.

Создание диаграмм при помощи запросов к базе данных

1.Cоздадим новый CSHTML файл ChartDataQuery.cshtml:

увеличить изображение
Рис. 11.4.

2.Заменим исходный код страницы ChartDataQuery.cshtml на:

@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT name, price FROM Product");
    var key = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .DataBindTable(dataSource: data, xField: "name")
        .Write();
}

В данном фрагменте кода, сначала открывается база данных SmallBakery (которую создали в "Web Matrix. Работа с данным" ):

var db = Database.Open("SmallBakery");

Далее создается SQL запрос на выборку к базе данных (в нашем случае запрос будет возвращать имя и цену товара):

var data = db.Query("SELECT name, price FROM Product");

После чего создается диаграмма с заголовком "Product Sales" и размерами 600 на 400. С помощью метода DataBindTable,в котором указывается источник данных (в данном случае SQL запрос ) и параметр xField, который формирует значения по координате х из колонки таблицы баз данных с именем "name":

DataBindTable(dataSource: data, xField: "name")

Можно так же было использовать метод AddSeries,для формирования диаграммы:

.AddSeries("Default",
    xValue: data, xField: "Name",
    yValues: data, yFields: "Price")

3.Запустим веб-страницу. В браузере отобразится диаграмма, которая строится по данным из таблицы в базе данных:

увеличить изображение
Рис. 11.5.