Maani Chart Implementation Simplified for ASP.NET Applications

• Download source - 503.23 KB

Introduction

There are many animated flash charts available in the software industry. However, maani charts are a simple, yet powerful tool to create attractive charts and graphs from XML data; quick response to feature requests, clickable charts with editable links and drill-down and charts can be displayed inside another flash file.

Maani.Web Library

Maani.Web library helps to create the required XML data. It is built by a set of interfaces and filters. Filter defines any number of filters to enhance the look of or highlight different graphic elements. They are Bevel, Blur, Glow and Shadow. The XmlSerializer<T> class helps to serialize the generic collection object where the objects are encoded into XML.

Maani.Web library also helps to render XML data for composite and drill-down charts. However, clickable charts with editable links and drill-down charts require a license key which is domain specific. Look at composite and drill down charts samples in maani.us.

The demo application has two ASPX pages. One is specific to design page and the other is an XML data source page where the dynamic XML is being rendered. The design page Default.aspx has the following script that embeds the XML flash charts into web page.

if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
	alert("This page requires AC_RunActiveContent.js.");
} else {
	var hasRightVersion = DetectFlashVer(requiredMajorVersion, 
				requiredMinorVersion, requiredRevision);
	if(hasRightVersion) { 
		AC_FL_RunContent(
			'codebase', 

'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',
			'width', '700',
			'height', '480',
			'scale', 'noscale',
			'salign', 'TL',
			'bgcolor', '#ffffff',
			'wmode', 'opaque',
			'movie', 'charts',
			'src', 'charts',
			'FlashVars', 

'timeout=36000&library_path=charts_library&xml_source=
	ChartDataSource/SampleDataSource.aspx?unique_id=', 
			'id', 'my_chart',
			'name', 'my_chart',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'quality', 'high',
			'align', 'middle',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'play', 'true',
			'devicefont', 'false'
			); 
	} else { 
		var alternateContent = 'This content requires the Adobe Flash Player. '
		+ '<a href="%22%22%22http://www.macromedia.com/go/getflash/%22%22%22">Get Flash</a>.';
		document.write(alternateContent); 
	}
}	

The SampleDataSource.aspx page renders XML data. In this sample, GroupResult class that holds the custom data and the following script binds the data into a chart.

Chart chart = new Chart();

        // Data Collection
        List<groupresult /> list = new List<groupresult />(){
                new GroupResult(){BrandName="Brand 1", Year =2005, Value=165},
                new GroupResult(){BrandName="Brand 1", Year =2006, Value=250},
                new GroupResult(){BrandName="Brand 1", Year =2007, Value=540},
                new GroupResult(){BrandName="Brand 1", Year =2008, Value=672},
                new GroupResult(){BrandName="Brand 1", Year =2009, Value=222},
                new GroupResult(){BrandName="Brand 2", Year =2005, Value=345},
                new GroupResult(){BrandName="Brand 2", Year =2006, Value=654},
                new GroupResult(){BrandName="Brand 2", Year =2008, Value=213},
                new GroupResult(){BrandName="Brand 2", Year =2009, Value=120},
                new GroupResult(){BrandName="Brand 3", Year =2005, Value=31},
                new GroupResult(){BrandName="Brand 3", Year =2006, Value=20},
                new GroupResult(){BrandName="Brand 3", Year =2007, Value=55},
                new GroupResult(){BrandName="Brand 3", Year =2008, Value=666},
                new GroupResult(){BrandName="Brand 3", Year =2009, Value=747},
                new GroupResult(){BrandName="Brand 4", Year =2005, Value=55},
                new GroupResult(){BrandName="Brand 4", Year =2006, Value=443},
                new GroupResult(){BrandName="Brand 4", Year =2007, Value=134},
                new GroupResult(){BrandName="Brand 4", Year =2008, Value=646},
                new GroupResult(){BrandName="Brand 4", Year =2009, Value=22}};

        // Set x series labels
        Row row = new Row();
        chart.Data.Rows.Add(row);
        row.XYSeriesMembers.Add(string.Empty);
        foreach (var result in list.GroupBy(ac => ac.Year))
        {
            row.XYSeriesMembers.Add(result.Key.ToString());
        }

        foreach (var result in list.GroupBy(ac => ac.BrandName))
        {
            // Set y series labels
            row = new Row();
            row.XYSeriesMembers.Add(result.Key);
            chart.Data.Rows.Add(row);
            foreach (GroupResult groupResult in list.Where
				(ac => ac.BrandName == result.Key))
            {
                // Set numeric values
                NumericData data = new NumericData() { Bevel = 
		ChartUtilities.BEVEL_BACKGROUND, Shadow = ChartUtilities.SHADOW_LOW };
                data.ToolTip = string.Format("{0}\n{1}", groupResult.BrandName, 
		((double)groupResult.Value).ToString("#,##0.00"));
                data.Value = (double)groupResult.Value;
                row.NumericData.Add(data);
            }
        }

        chart.ApplyPredefinedFilters();
        chart.ApplyPredefinedStyles(false);

        // Set background styles
        chart.Background.TextBackground[0].Value = "revenue";
        chart.Background.TextBackground[1].Value = "(in $millions)";

        // Set transition type.
        // Valid values are dissolve, drop, spin, scale, zoom, blink, 
        // slide_right, slide_left, slide_up, slide_down, and none. 
        // The default is none, which draws the chart immediately without a transition.
        // chart.Transition.TransitionType = TransitionType.slide_left;

        // Set chart type
        chart.Type = (ChartType)Enum.Parse(typeof(ChartType), 
			Session["chartType"].ToString(), true);
        
        // Set chart styles 
        if (chart.Type == ChartType.Polar)
        {
            // Set circular area drawing style
            chart.AxisCategory.Orientation = Maani.Web.Orientation.circular;
            chart.Preference.Grid = GridStyle.circular;
        }
        else if (chart.Type == ChartType.Line)
        {
            // Show circle point labels
            chart.Preference.PointShape = PointShape.circle;
            chart.Guide.Radius = 5;
            chart.Guide.RadiusColor = "FF0000";
        }
        else if (chart.Type == ChartType.Pie || chart.Type == ChartType.ThreeDPie)
        {
            chart.Preference.Selectable = true;
            // Set labels style
            chart.Label.ShowPercentage = true;
            chart.Label.Positiion = LabelPosition.inside;
        }

        // write the chart xml string to the current HTTP output
        Response.Write(chart.GetXml());

ApplyPredefinedFilters and ApplyPredefinedStyles methods apply set of pre defined filters and styles, and the styles and filters can be modified anywhere in code behind file.

public static void ApplyPredefinedStyles(this Chart chart, bool randomize)
{
    // Show as randomize colors or not
    if(randomize) chart.FillColors.Randomize();
    
    // Set label attributes for the category-axis.
    chart.AxisCategory = new AxisCategory() { Alpha = 75, FontSize = 10, 
    	Orientation = Orientation.diagonal_up, Shadow = SHADOW_MEDIUM };
    
    // Set tick marks on the chart axis.
    chart.AxisTicks.ShowCategoryTicks = true;
    
    // Set label attributes for the value-axis.
    chart.AxisValue.Steps = 4;
    
    // Set background image
    chart.Background.ImageBackground.Add(new SizeableImageBackground() 
    	{ ImageUrl = "images/blue_bg_lg.png", Height = 320 });
    
    // Set background text images
    chart.Background.TextBackground.Add(new TextBackground() 
    	{ Shadow = SHADOW_MEDIUM, FontColor = "f8f8ff", 
    	Alpha = 90, Rotation = -90, FontSize = 40, X = 0, Y = 400, 
    	Width = 300, Height = 200, HorizontalAlignment = HorizontalAlignment.center });
    chart.Background.TextBackground.Add(new TextBackground() 
    	{ Shadow = SHADOW_LOW, FontColor = "000033", 
    	Alpha = 50, Rotation = -90, FontSize = 14, X = 15, Y = 330, 
    	Width = 300, Height = 50, HorizontalAlignment = HorizontalAlignment.center, 
    	VerticalAlignment= VerticalAlignment.middle });
    
    // Set chart's border attributes.
    chart.BorderThickness = new ChartBorder(0) 
    	{ BorderColor = "000000", BottomThickness = 1 };
    
    // Set preferences for some charts. 
    // Each chart type has different preferences, or no preferences at all.
    chart.Preference = new ChartPref() 
    	{ PointShape = PointShape.none, FillShape = true, LineThickness = 3 };
    
    // Set the look of the series graphs of bar and column chart types
    chart.Series = new ChartSeries() { BarGap = 2, SetGap = 50 };
    
    // Set attributes of the labels that appear over the graphs
    chart.Label = new ChartLabel() { FontSize = 10, Alpha = 90, 
    	FontColor = "6600CC", Positiion = LabelPosition.outside };
    
    // Set chart's rectangle
    chart.Rect = new ChartRect() { X = 90, Y = 110, Width = 600, Height = 250 };
    
    // Sets one or two guide lines to connect the 
    // cursor position with the axes and simplify reading their values. 
    chart.Guide = new ChartGuide() { ShowHorizontalGuide = true, 
    	ShowVerticalGuide = true, Thickness = 1, Alpha = 25, 
    	LineThickness = 2, LineAlpha = 50, Type = GuideLineType.dashed };
    
    // Set legend's attributes. The legend is the area that 
    // identifies the colors assigned to the graphs
    chart.Legend = new Legend() { Alpha = 95, FontSize = 11, 
    	FontBold = true, FontColor = "5f5f5f", 
    	Margin = 5, Width = 640, Height = 70, X = 50, Y = 20, 
    	Style = LayoutStyle.horizontal };
    
    // Set maani licence key
    chart.License = ConfigurationManager.AppSettings["MaaniLicense"]; 
}

If required, download the latest XML/SWF Charts, decompress the download package, and place the following files in the same directory:

• charts.swf
• charts_library
• AC_RunActiveContent.js

Screenshots

History

• 7^th October 2009 - Initial release