Setting up a for a MVC project

  • Add FusionCharts.js in your scripts folder.
  • Add All SWF files in a specific folder in your project. In our case we added it into /Content/FusionChartsSWF/

           
 

  • Create a Html Helper

    
            
            
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Text;
    using Libero.FusionCharts.Abstract;
    
    namespace MvcApplication1
    {
        public static class FChartHtmlHelper
        {
            private static string UrlSWF = @"/Content/FusionChartsSWF/";
            private static string PrefixSWF = @"FCF_";
            private static string SufixSWF = @".swf";
    
            /// <summary>
            /// Render a Fusion Chart.
            /// </summary>
            /// <param name="helper">Extension</param>
            /// <param name="controlId">Unique Id for the controler.</param>
            /// <param name="chart">An object. Will be cast to a FusionChartBase type.</param>
            /// <param name="width">Charts width.</param>
            /// <param name="height">Charts height</param>
            /// <returns>HTML to show a Fusion Chart</returns>
            public static string FChart(this HtmlHelper helper, string controlId, object chart, int width, int height)
            {
                FusionChartBase convChart = (FusionChartBase)chart;
                return RenderChart(controlId, convChart.ToXML(), convChart.ChartType, width, height);
            }
    
            /// <summary>
            /// Render a Fusion Chart.
            /// </summary>
            /// <param name="helper">Extension</param>
            /// <param name="controlId">Unique Id for the controler.</param>
            /// <param name="chart">An object that inherit from FusionChartBase.</param>
            /// <param name="width">Charts width.</param>
            /// <param name="height">Charts height</param>
            /// <returns>HTML to show a Fusion Chart</returns>
            public static string FChart(this HtmlHelper helper, string controlId, FusionChartBase chart, int width, int height)
            {
                return RenderChart(controlId, chart.ToXML(), chart.ChartType, width, height);
            }
    
            /// <summary>
            /// Render a Fusion Chart.
            /// </summary>
            /// <param name="helper">Extension</param>
            /// <param name="controlId">Unique Id for the controler.</param>
            /// <param name="xmlData">Data for the Chart in XML format.</param>
            /// <param name="chartType">Chart type, string format.</param>
            /// <param name="width">Charts width.</param>
            /// <param name="height">Charts height</param>
            /// <returns>HTML to show a Fusion Chart</returns>
            public static string FChart(this HtmlHelper helper, string controlId, string xmlData, string chartType, int width, int height)
            {
                return RenderChart(controlId, xmlData, chartType, width, height);
            }
    
            private static string RenderChart(string controlId, string xmlData, string chartType, int width, int height)
            {
                String sControlId = controlId;
                String sJsVarId = "_lib_JS_" + controlId;
                String sDivId = "_lib_DIV_" + controlId;
                String sObjId = "_lib_OBJ_" + controlId;
                String sWidth = width.ToString();
                String sHeight = height.ToString();
    
    
                StringBuilder oBuilder = new StringBuilder();
    
                oBuilder.AppendLine(@"<div id=""" + sDivId + @""" align=""center""></div>");
    
                oBuilder.AppendLine(@"<script type=""text/javascript"">");
    
                oBuilder.AppendLine(@"var " + sControlId + @" = (function() {");
                oBuilder.AppendLine(@"    return {");
                oBuilder.AppendLine(@"        containerId: '" + sDivId + "',");
                oBuilder.AppendLine(@"        xmlData: '',");
                oBuilder.AppendLine(@"        chartType: '',");
                oBuilder.AppendLine(@"        showChart: function() {");
                oBuilder.AppendLine();
                oBuilder.AppendFormat(@"          var chartURL = '{0}' + '{1}' + this.chartType.replace('Chart', '{2}');", UrlSWF, PrefixSWF, SufixSWF);
                oBuilder.AppendLine(@"            var " + sJsVarId + @" = new FusionCharts(chartURL, """ + sObjId + @""", """ + sWidth + @""", """ + sHeight + @""");");
                oBuilder.AppendLine(@"            " + sJsVarId + @".setDataXML(this.xmlData);");
                oBuilder.AppendLine(@"            " + sJsVarId + @".render(""" + sDivId + @""");");
                oBuilder.AppendLine(@"        }");
                oBuilder.AppendLine(@"    }");
                oBuilder.AppendLine(@"})();");
    
                oBuilder.AppendLine(@"setTimeout(function(){");
                oBuilder.AppendLine(@"    " + sControlId + @".xmlData = """ + xmlData.Replace(@"""", @"'") + @""";");
                oBuilder.AppendLine(@"    " + sControlId + @".chartType = """ + chartType + @""";");
                oBuilder.AppendLine(@"    " + sControlId + @".showChart();");
                oBuilder.AppendLine(@"},0);");
    
                oBuilder.AppendLine(@"</script>");
    
                return oBuilder.ToString();
            }
        }
    }
     

Last edited Dec 3, 2010 at 7:54 PM by robertobarbedo, version 3

Comments

rahimi Jun 8, 2013 at 3:24 PM 
Hi
when I use view with razor(@Html.FChart("Chart01", ViewData["MyChart"], 600, 400) ) , the page is displayed correctly but without graphic .

Marc105 Feb 28, 2012 at 5:14 PM 
Hi,
I created a new Proyect, and the Html Helper, but gives me an error with this line:
using Libero.FusionCharts.Abstract;
How can I add the library in a new Proyect?