[Razor] Porting the Bar Chart Sample

[Stijn]

We're currently evaluating Ext.NET to see if it can do what we need.

As an exercise, I've tried to port the Bar Chart Sample to the Razor engine. It's not easy without documentation, but it's mostly working now.

I'm still missing the action behind the Reload Data button.
I'm still missing the mouseover tooltips for the bars, I'm not sure how to set the handler for this.
I'm not sure what the NumericAxis label is supposed to do, so I'm not sure if it's working or not.
It doesn't seem to be possible to translate the SeriesLabel.TextAnchor property.

Below is the code from the view. Any help for above points is appreciated.

@Html.X().ResourceManager()

@(Html.X().ChartTheme()
	.ThemeName("White")
	.Axis(Html.X().SpriteAttributes()
		.Stroke("rgb(8,69,148)")
		.StrokeWidth(1)
	)
	.AxisLabel(Html.X().SpriteAttributes()
		.Fill("rgb(8,69,148)")
		.Font("12px Arial")
		.FontFamily("Arial")
	)
	.AxisTitle(Html.X().SpriteAttributes()
		.Font("bold 18px Arial")
	)
)
 
@(Html.X().Panel()
	.Title("Bar Chart")
	.Width(800)
	.Height(600)
	.Layout(LayoutType.Fit)
	.TopBar(t => 
		{
			t.Add(Html.X().Toolbar()
				.Add(Html.X().Button()
					.Text("Reload Data")
					.Icon(Icon.ArrowRefresh)
			));
		}
	)
	.Add(Html.X().Chart()
		.Shadow(true)
		.Theme("White")
		.Animate(true)
		.Store(s => s.Add(Html.X().Store()
			.DataSource(Ext.Net.Examples.ChartData.GenerateData())
			.Model(m => m.Add(Html.X().Model()
				.Fields(f =>
					{
						f.Add(Html.X().ModelField()
							.Name("Name")
						);
						f.Add(Html.X().ModelField()
							.Name("Data1")
						);
					}
				)
			))
		))
		.Background(Html.X().DrawBackground()
			.Gradient(Html.X().Gradient()
				.GradientID("backgroundGradient")
				.Angle(45)
				.Stops(s =>
					{
						s.Add(Html.X().GradientStop()
							.Offset(0)
							.Color("#ffffff")
						);
						s.Add(Html.X().GradientStop()
							.Offset(100)
							.Color("#eaf1f8")
						);
					}
				)
			)
		)
		.Axes(a =>
			{
				a.Add(Html.X().NumericAxis()
					.Fields(new[] { "Data1" })
					.Position(Position.Bottom)
					.Grid(true)
					.Title("Number of Hits")
					.Minimum(0)
					.Label(Html.X().AxisLabel()
						.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
					)
				);
				a.Add(Html.X().CategoryAxis()
					.Fields(new[] { "Name" })
					.Title("Month of the Year")
				);
			}
		)
		.Series(s =>
			{
				s.Add(Html.X().BarSeries()
					.Axis(Position.Bottom)
					.Highlight(true)
					.XField(new[] { "Name" })
					.YField(new[] { "Data1" })
					//.Tips(t =>
					//    {
					//        t.TrackMouse = true;
					//        t.Width = 140;
					//        t.Height = 28;
					//        t.Renderer.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1') + ' views');";
					//    }
					//)
					.Label(Html.X().SeriesLabel()
						.Display(SeriesLabelDisplay.InsideEnd)
						.Field("Data1")
						.Orientation(Orientation.Horizontal)
						.Color("#333")
					)
				);
			}
		)
	)
)

[Iguion]

I am also trying to do this. Is there not a razor chart example?