@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><c1-flex-chart></c1-flex-chart></b> tag.</li>
<li>Set the value of items sources as <b>@@Model.FruitsSales</b>.</li>
</ol>
}
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;
}
}
}