Features

FlexChart

FlexChart

This view shows the basic features of FlexChartges.

Features

Overview
FlexGrid
Batch Editing
Unobtrusive Validation
FlexChart
Input
OrangesApplesPearsBananasPineapples02468

Settings

Description

Steps for getting started with the FlexChart control in Razor Pages:

  1. Add a public property FruitsSales for items source binding.
  2. Initialize the FlexChart control in Razor page view using <c1-flex-chart></c1-flex-chart> tag.
  3. Set the value of items sources as @Model.FruitsSales.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@page
@model FlexChartModel
@{
    ViewData["DemoSettings"] = true;
    ClientSettingsModel demoSettingModel = (ClientSettingsModel)ViewData["DemoSettingsModel"];
}
  
<c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Name">
    <c1-items-source source-collection="@Model.FruitsSales"></c1-items-source>
    <c1-flex-chart-series binding="MarPrice">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="AprPrice">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="MayPrice">
    </c1-flex-chart-series>
</c1-flex-chart>
  
@section Scripts{
    <script type="text/javascript">
    convertStacking = function (value) {
        return value === "Stacked 100%" ? "Stacked100pc" : value;
    };
    convertPalette = function (value) {
        return wijmo.chart.Palettes[value];
    };
    updateGroupWidth = function (control, value) {
        control.options = { groupWidth: value === "50 pixels" ? 50 : value };
  
    };
    </script>
}
  
@section Summary{
    This view shows the basic features of FlexChartges.
}
  
@section Description{
    <p>
        Steps for getting started with the FlexChart control in Razor Pages:
    </p>
    <ol>
        <li>Add a public property <b>FruitsSales</b> for items source binding.</li>
        <li>Initialize the FlexChart control in Razor page view using <b>&lt;c1-flex-chart&gt;&lt;/c1-flex-chart&gt;</b> tag.</li>
        <li>Set the value of items sources as <b>@@Model.FruitsSales</b>.</li>
    </ol>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPagesExplorer.Models;
  
namespace RazorPagesExplorer.Pages
{
    public class FlexChartModel : PageModel
    {
        public readonly IEnumerable<Fruit> FruitsSales = Fruit.GetFruitsSales();
        public void OnGet()
        {
            ViewData["DemoSettingsModel"] = new ClientSettingsModel
            {
                Settings = CreateIndexSettings(),
                DefaultValues = GetIndexDefaultValues()
            };
        }
  
        private static IDictionary<string, object[]> CreateIndexSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false, true}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}}
            };
  
            return settings;
        }
  
        private static IDictionary<string, object> GetIndexDefaultValues()
        {
            var defaultValues = new Dictionary<string, object>
            {
                {"GroupWidth", "70%"}
            };
  
            return defaultValues;
        }
    }
}