We are about to do a new dashboard project and i have to ensure that all our charts are themed the same (potentially hundreds and of many different types: pie/line/area/funnel/gauges etc). I'll be coming up with our own color scheme, font styles, spacing and placement standards etc but i will not be personally styling each chart i'd like to make it so a dev can make it look in theme with as little effort as possible. Also many of these charts will be completely implemented in code rather than in the designer.
So i had thought, ill just theme out a perfect example of each type of chart we expect to use styled programmatically and then give a bunch of code to the devs that they can paste into their code-behind. Is there a better way to do this? Some of it can probably be CSS like fonts but i may as well not use CSS since there will be lots of spacing that need to be properties set on the chart control (ie keep it all in the same place rather than spread bits of the style internally and externally). Maybe make a class that contains styles to centralize it in one place? Ideas, thoughts?
I recommend using the XML presets for this purpose. You can create, save, and load them using the Quick Design dialog (chart/gauge) or the UltraGauge Designer (gauge). The Chart Wizard also has an option to modify the "default preset" which is loaded each time the control is added to a web form.
Yeah, could do that except that these would be created/loaded programatically. The preset option require each dev on the team to have these custom presets loaded onto their local machine (or i guess define a network share to set as preset location). Which would need to be redeployed every time they were updated so it doesnt sound very practical for our case.
From looking at the preset XML files it just replaces the default code with a pre-designed version, so its not really referencing a theme its just applying it as a once off. (i assume the images get copied over to the local project when a preset is applied?). But the problem here is that its not really saved as part of the project that can be checked in and preserved.
perhaps you could take the more sophisticated approach of creating a class which derives from UltraChart. you can use the control's constructor to apply whatever styling that needs to be applied. i also recommend overriding the ChartType property, since the chart automatically changes/resets some properties under Axis when the ChartType changes.
Im going to mark this as answered,
Im still not sure what the best case scenario would be for styling but im pretty happy with what we ended up with. We ended up not creating the charts programatically which meant all of the code we could get away with was defined in the aspx page instead of the codebehind - this at least for me in styling each one sped things up since i didnt have to recompile with every adjustment
New charts end up being a copy and paste job from something else we've already done thats similar. With pieces that are found to be common extracted into a seperate chart style helper class (colors, and common elments for each chart type). Like our watermark for example was used in every chart, with code like this (if anyone's interested).
public static class CommonChartElements
{
public static BoxAnnotation GetWatermark()
BoxAnnotation wm = new BoxAnnotation();
wm.Height = 13;
wm.Width = 56;
wm.Visible = true;
wm.Border.Thickness = 0;
wm.PE.ImagePath = HttpContext.Current.Request.PhysicalApplicationPath + System.Configuration.ConfigurationManager. AppSettings["dashboardWatermark"].ToString();
wm.PE.ElementType = PaintElementType.Image;
wm.PE.ImageFitStyle = ImageFitStyle.Centered;
//wm.Location.LocationX = 320;
//wm.Location.LocationY = 26;
wm.Location.Type = LocationType.Pixels;
return wm;
}
And then called from the chart page:
protected void SetWatermark()
BoxAnnotation wm = Theme.CommonChartElements.GetWatermark();
wm.Location.LocationX = 315;
wm.Location.LocationY = 22;
UltraChart1.Annotations.Add(wm);