Tuesday, May 17, 2011

How to get rid of white frame in System.Web.Helpers.Chart

I'm using MVC3 and Web Helpers.
The resulting chart has white frame around it:
My goal is to make this frame transparent.



Here is my Chart Controller ( Controllers/ChartController.cs)


    public class ChartController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult ShowTotal() // produces "png" image
        {
            myEntities db = new myEntities();

            var list = (from t in db.Tags
                        from v in t.Visits
                        where v.Action.ToLower() == "fetch"
                        select new {
                            act = t.Name,
                            count = t.Visits.Count }).Distinct().ToList();

            new System.Web.Helpers.Chart(300, 200, System.Web.Helpers.ChartTheme.Yellow)
                    .AddTitle("Totals")
                    .DataBindTable(list, "act") // take "list" and use column "act" as xSeries
                    .Write("png");
            return null;
        }
    }

Correspondent view in View/Chart/Index.cshtml:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<img src="@Url.Action("ShowTotal")" />

The result picture has ugly white frame around it. I setup green background for the body to highlight this fact:
All chart styling happens when I setup the chart theme in "System.Web.Helpers.ChartTheme.Yellow"

Chart theme is just XML string with description of the style. 
If you press F12 on the above "Yellow" you can see the definition of the string:

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



The problem was in "fancy" themes "Blue", "Green" and "Yellow":
<BorderSkin SkinStyle=""Emboss"" />
BorderSkin definition should be corrected this way:

<BorderSkin PageColor =""Transparent"" SkinStyle=""Emboss"" />


There are two ways to fix the problem:
  1. Copy the whole string in you program, change BorderSkin definition, and pass this string as the theme to the Chart constructor:
    new Chart(300, 200, myTheme) . . .
  2. As a temporary solution, change the theme "on-a-fly" (temporary until Microsoft fix the theme):
    String myTheme = ChartTheme.Yellow.Replace(@"BorderSkin SkinStyle", @"BorderSkin PageColor =""Transparent"" SkinStyle");
    new Chart(300, 200, myTheme) . . .
The result will be as expected:





No comments:

Post a Comment