ASP.NET

ASP.NET MVC 3 Beta Chart Helper. Styling. Please, Help! RSS

3 replies

Last post Nov 11, 2010 01:14 AM by shapper

‹ Previous Thread|Next Thread ›

- Reply
shapper

Contributor

3932 Points

3789 Posts
ASP.NET MVC 3 Beta Chart Helper. Styling. Please, Help!

Nov 07, 2010 01:28 PM|LINK
Hello,

I am using ASP.NET MVC 3 Beta new Chart Helper and a custom ChartResult that returns it:
```
public virtual ChartResult Visits() {


      Chart chart = new Chart(700, 240, ChartTheme.Blue);
      chart.AddSeries(chartType: "Area", xValue: data[0], yValues: data[1]);
      return new ChartResult(chart, "jpg");


    } // Visits
```
I am able to use one of the ChartThemes but I want to define my own styling.

I am not able to find any property or method for that in chart object.

Can I implement my own ChartTheme?

Could someone help me out in figuring this out?

Thank you,

Miguel
- Reply
Bober Song -...

All-Star

34686 Points

2167 Posts

Re: ASP.NET MVC 3 Beta Chart Helper. Styling. Please, Help!

Nov 10, 2010 07:41 AM|LINK

Hi shapper ,

As far as I know, it is OK for your requirement.

For detail, please double check the following links.

http://www.dotnetcurry.com/ShowArticle.aspx?ID=597
http://tuturtinular.com/tag-mvc-chart-view-helper
http://weblogs.asp.net/gunnarpeipman/archive/2010/10/10/asp-net-mvc-3-beta-built-in-support-for-charts.aspx

I hope it is helpful to you.

Please mark the replies as answers if they help or unmark if not.

If you have any feedback about my replies, please contact msdnmg@microsoft.com

Microsoft One Code Framework

shapper

Contributor

3932 Points

3789 Posts

Re: ASP.NET MVC 3 Beta Chart Helper. Styling. Please, Help!

Nov 10, 2010 09:45 AM|LINK

Yes,

I visited all those links before and no one addresses the styling of charts.

The best I can find is using the predefined themes like:

Chart chart = new Chart(400, 200, ChartTheme.Blue)
                                        .AddTitle("Price enquiries")
                                        .DataBindTable(data, "X")
                                        .Write("png");

Which is useless in most cases I am working.

I tried to find properties or method on the class that would allow for customization but no luck.

I am trying to do the same as I am doing here with System.Web.UI.DataVisualization.Charting.Chart:

      // Define chart
      Chart chart = new Chart {
        BackColor = Color.FromArgb(255, 250, 250, 250),
        DataSource = data,
        Height = 120,
        Width = 700
      };

      // Remove legends
      chart.Legends.Clear();

      // Define chart area
      ChartArea area = new ChartArea {
        BackColor = Color.Transparent,
        AxisX = new Axis {
          Interval = 7,
          IntervalType = DateTimeIntervalType.Days,
          IsMarginVisible = false,
          LabelStyle = new LabelStyle { ForeColor = Color.FromArgb(255, 128, 128, 128), Font = new Font("Arial", 10, FontStyle.Regular), Format = "MMM dd" },
          LineColor = Color.FromArgb(255, 208, 208, 208),
          MajorGrid = new Grid { LineColor = Color.FromArgb(255, 242, 242, 242), LineDashStyle = ChartDashStyle.Solid },
          MajorTickMark = new TickMark { LineColor = Color.Transparent, Size = 4.8f }
        },
        AxisY = new Axis {
          IntervalAutoMode = IntervalAutoMode.VariableCount,
          LabelStyle = new LabelStyle { ForeColor = Color.FromArgb(255, 128, 128, 128), Font = new Font("Arial", 10, FontStyle.Regular) },
          LineColor = Color.Transparent,
          MajorGrid = new Grid { LineColor = Color.FromArgb(255, 242, 242, 242), LineDashStyle = ChartDashStyle.Solid },
          MajorTickMark = new TickMark { LineColor = Color.Transparent, Size = 0.8f }
        },
        Position = new ElementPosition { Height = 90, Width = 99, X = 0, Y = 10 }
      };

      // Add chart area
      chart.ChartAreas.Add(area);

      // Define series
      Series series = new Series {
        BorderColor = Color.FromArgb(255, 0, 120, 255),
        BorderWidth = 4,
        ChartType = SeriesChartType.Area,
        Color = Color.FromArgb(100, 190, 220, 240),
        MarkerBorderColor = Color.White,
        MarkerColor = Color.FromArgb(255, 0, 120, 255),
        MarkerSize = 10,
        MarkerStyle = MarkerStyle.Circle
      };

      // Define series points
      series.Points.DataBindXY(data[0].Select(d => DateTime.ParseExact(d, "yyyyMMdd", null)).ToArray(), data[1].Select(v => Int32.Parse(v)).ToArray());

      // Add series
      chart.Series.Add(series);

I think the new Chart Helper code is based on this so I am not sure why I can't find a way to do it.

Maybe create custom Themes? I couldn't find that option either.

Thank You,

Miguel

shapper

Contributor

3932 Points

3789 Posts

Re: ASP.NET MVC 3 Beta Chart Helper. Styling. Please, Help!

Nov 11, 2010 01:14 AM|LINK

I am not sure but it seems when using the new Helpers you loose a lot of the Strong Typed.

For example you can't define a Series object with its porperties and add it to the Chart.

If this true I think the new Helpers are a step back ... If I am wrong let me know.

Here is the complete Chart helper sintax. Note that the Theme is defined on a String ... Better to do that with Stronged Typed objects not?

// Methods


public Chart(
int width,
int height,
[Optional, DefaultParameterValue(null)] string template,
[Optional, DefaultParameterValue(null)] string templatePath);


public Chart AddLegend(
[Optional, DefaultParameterValue(null)] string title,
[Optional, DefaultParameterValue(null)] string name);


public Chart AddSeries(
[Optional, DefaultParameterValue(null)] string name,
[Optional, DefaultParameterValue("Column")] string chartType,
[Optional, DefaultParameterValue(null)] string chartArea,
[Optional, DefaultParameterValue(null)] string axisLabel,
[Optional, DefaultParameterValue(null)] string legend,
[Optional, DefaultParameterValue(1)] int markerStep,
[Optional, DefaultParameterValue(null)] IEnumerable xValue,
[Optional, DefaultParameterValue(null)] string xField,
[Optional, DefaultParameterValue(null)] IEnumerable yValues,
[Optional, DefaultParameterValue(null)] string yFields);


public Chart AddTitle(
[Optional, DefaultParameterValue(null)] string text,
[Optional, DefaultParameterValue(null)] string name);


public Chart DataBindCrossTable(
IEnumerable dataSource,
string groupByField,
string xField,
string yFields,
[Optional, DefaultParameterValue(null)] string otherFields,
[Optional, DefaultParameterValue("Ascending")] string pointSortOrder);


public Chart DataBindTable(
IEnumerable dataSource,
[Optional, DefaultParameterValue(null)] string xField);


public byte[] GetBytes([Optional, DefaultParameterValue("jpeg")] string format);


public static Chart GetFromCache(string key);


public Chart Save(
string path,
[Optional, DefaultParameterValue("jpeg")] string format);


public string SaveToCache(
[Optional, DefaultParameterValue(null)] string key,
[Optional, DefaultParameterValue(20)] int minutesToCache,
[Optional, DefaultParameterValue(true)] bool slidingExpiration);


public Chart SaveXml(string path);


public Chart SetXAxis(
[Optional, DefaultParameterValue("")] string title,
[Optional, DefaultParameterValue(0.0)] double min,
[Optional, DefaultParameterValue((double) 1.0 / (double) 0.0)] double max);


public Chart SetYAxis(
[Optional, DefaultParameterValue("")] string title,
[Optional, DefaultParameterValue(0.0)] double min,
[Optional, DefaultParameterValue((double) 1.0 / (double) 0.0)] double max);


public WebImage ToWebImage([Optional, DefaultParameterValue("jpeg")] string format);


public Chart Write([Optional, DefaultParameterValue("jpeg")] string format);


public static Chart WriteFromCache(
string key,
[Optional, DefaultParameterValue("jpeg")] string format);


 	

// Properties


public string FileName { get; }


public int Height { get; }


public int Width { get; }


// ChartTheme


// Defines built-in formatting for a chart.


// Fields


public const string Blue = "<Chart BackColor=\"#D3DFF0\" BackGradientStyle=\"TopBottom\" BackSecondaryColor=\"White\" BorderColor=\"26, 59, 105\" BorderlineDashStyle=\"Solid\" BorderWidth=\"2\" Palette=\"BrightPastel\">\r\n <ChartAreas>\r\n <ChartArea Name=\"Default\" _Template_=\"All\" BackColor=\"64, 165, 191, 228\" BackGradientStyle=\"TopBottom\" BackSecondaryColor=\"White\" BorderColor=\"64, 64, 64, 64\" BorderDashStyle=\"Solid\" ShadowColor=\"Transparent\" /> \r\n </ChartAreas>\r\n <Legends>\r\n <Legend _Template_=\"All\" BackColor=\"Transparent\" Font=\"Trebuchet MS, 8.25pt, style=Bold\" IsTextAutoFit=\"False\" /> \r\n </Legends>\r\n <BorderSkin SkinStyle=\"Emboss\" /> \r\n </Chart>";


public const string Green = "<Chart BackColor=\"#C9DC87\" BackGradientStyle=\"TopBottom\" BorderColor=\"181, 64, 1\" BorderWidth=\"2\" BorderlineDashStyle=\"Solid\" Palette=\"BrightPastel\">\r\n <ChartAreas>\r\n <ChartArea Name=\"Default\" _Template_=\"All\" BackColor=\"Transparent\" BackSecondaryColor=\"White\" BorderColor=\"64, 64, 64, 64\" BorderDashStyle=\"Solid\" ShadowColor=\"Transparent\">\r\n <AxisY LineColor=\"64, 64, 64, 64\">\r\n <MajorGrid Interval=\"Auto\" LineColor=\"64, 64, 64, 64\" />\r\n <LabelStyle Font=\"Trebuchet MS, 8.25pt, style=Bold\" />\r\n </AxisY>\r\n <AxisX LineColor=\"64, 64, 64, 64\">\r\n <MajorGrid LineColor=\"64, 64, 64, 64\" />\r\n <LabelStyle Font=\"Trebuchet MS, 8.25pt, style=Bold\" />\r\n </AxisX>\r\n <Area3DStyle Inclination=\"15\" IsClustered=\"False\" IsRightAngleAxes=\"False\" Perspective=\"10\" Rotation=\"10\" WallWidth=\"0\" />\r\n </ChartArea>\r\n </ChartAreas>\r\n <Legends>\r\n <Legend _Template_=\"All\" Alignment=\"Center\" BackColor=\"Transparent\" Docking=\"Bottom\" Font=\"Trebuchet MS, 8.25pt, style=Bold\" IsTextAutoFit =\"False\" LegendStyle=\"Row\">\r\n </Legend>\r\n </Legends>\r\n <BorderSkin SkinStyle=\"Emboss\" />\r\n</Chart>";


public const string Vanilla = "<Chart Palette=\"SemiTransparent\" BorderColor=\"#000\" BorderWidth=\"2\" BorderlineDashStyle=\"Solid\">\r\n<ChartAreas>\r\n <ChartArea _Template_=\"All\" Name=\"Default\">\r\n <AxisX>\r\n <MinorGrid Enabled=\"False\" />\r\n <MajorGrid Enabled=\"False\" />\r\n </AxisX>\r\n <AxisY>\r\n <MajorGrid Enabled=\"False\" />\r\n <MinorGrid Enabled=\"False\" />\r\n </AxisY>\r\n </ChartArea>\r\n</ChartAreas>\r\n</Chart>";


public const string Vanilla3D = "<Chart BackColor=\"#555\" BackGradientStyle=\"TopBottom\" BorderColor=\"181, 64, 1\" BorderWidth=\"2\" BorderlineDashStyle=\"Solid\" Palette=\"SemiTransparent\" AntiAliasing=\"All\">\r\n <ChartAreas>\r\n <ChartArea Name=\"Default\" _Template_=\"All\" BackColor=\"Transparent\" BackSecondaryColor=\"White\" BorderColor=\"64, 64, 64, 64\" BorderDashStyle=\"Solid\" ShadowColor=\"Transparent\">\r\n <Area3DStyle LightStyle=\"Simplistic\" Enable3D=\"True\" Inclination=\"30\" IsClustered=\"False\" IsRightAngleAxes=\"False\" Perspective=\"10\" Rotation=\"-30\" WallWidth=\"0\" />\r\n </ChartArea>\r\n </ChartAreas>\r\n</Chart>";


public const string Yellow = "<Chart BackColor=\"#FADA5E\" BackGradientStyle=\"TopBottom\" BorderColor=\"#B8860B\" BorderWidth=\"2\" BorderlineDashStyle=\"Solid\" Palette=\"EarthTones\">\r\n <ChartAreas>\r\n <ChartArea Name=\"Default\" _Template_=\"All\" BackColor=\"Transparent\" BackSecondaryColor=\"White\" BorderColor=\"64, 64, 64, 64\" BorderDashStyle=\"Solid\" ShadowColor=\"Transparent\">\r\n <AxisY>\r\n <LabelStyle Font=\"Trebuchet MS, 8.25pt, style=Bold\" />\r\n </AxisY>\r\n <AxisX LineColor=\"64, 64, 64, 64\">\r\n <LabelStyle Font=\"Trebuchet MS, 8.25pt, style=Bold\" />\r\n </AxisX>\r\n </ChartArea>\r\n </ChartAreas>\r\n <Legends>\r\n <Legend _Template_=\"All\" BackColor=\"Transparent\" Docking=\"Bottom\" Font=\"Trebuchet MS, 8.25pt, style=Bold\" LegendStyle=\"Row\">\r\n </Legend>\r\n </Legends>\r\n <BorderSkin SkinStyle=\"Emboss\" />\r\n</Chart>";

I think I am going to stick to the way I just used before. What do you think?

And I have a ChartResult for that which makes things even easier.

Thank You,

Miguel

‹ Previous Thread|Next Thread ›

ASP.NET MVC 3 Beta Chart Helper. Styling. Please, Help! RSS

3 replies

shapper