How to elegantly plot charts in ASP.NET MVC 3 using Highcharts?

I've been working with highcharts and MVC 3 for two years by now (I never done anything complicated, just load data and make it work stuff), and I worked with two different scenarios:

• Chart code written in the directly in the view, loading data through Json
• Html helper responsible to plot the chart

The Html helper approach seems to me a more elegant choice ... but then, just to illustrate to you guys, here is how it looks like (just part of it):

public static string DisplayChart(
            this HtmlHelper helper,
            ChartOptions options,
            TimedChartSeries[] data)
{
    string[] axisList = data.GroupBy(t => t.Unit).Select(t => t.Key).ToArray();
    string result = "";
    result += "<script type=\"text/javascript\">\n";
    result += "var " + options.ChartName + ";\n";
    result += "$(document).ready(function() {\n";
    result += options.ChartName + "= new Highcharts.Chart({\n";
    result += "chart: {renderTo: '" + options.DivName + "',zoomType: ''},\n";
    result += "title: { text: '" + options.Title + "'},\n";
    result += "subtitle: {text: '" + options.SubTitle + "'},\n";

    result += "xAxis: { type: 'datetime'," +
        "\n dateTimeLabelFormats: {month: '%e. %b', year: '%b' },"
        + "labels:{rotation: -45}\n},\n";


    string axes = "";

    for (int i = 0; i < axisList.Length; i++)
    {
        var temporaryData = data.First(t => t.Unit == axisList[i]);
        if (i != 0)
            axes += ", ";

        axes += "{labels:{\n " +
            "formatter : function(){return this.value + '" + temporaryData.Unit + "';},\n" +
            "style:{color:'#" + temporaryData.Color.Name.Remove(0, 2) + "'}},\n" +
            "title:{text:'',style:{color:'#" + temporaryData.Color.Name.Remove(0, 2) + "'}},\n" +
            "}\n";
    }

    result += "yAxis: [\n" + axes + "],\n";

    string units = "";

    for (int i = 0; i < data.Length; i++)
    {
        if (i != 0)
            units += ", ";

        units += "'" + data[i].Title + "': '" + data[i].Unit + "'\n";
    }

    result += "tooltip:{\nshared: true,\n backgroundColor: 'none' ,\nborderColor: 'none'," +
        "\nshadow:false\n ,crosshairs: true,\n" +
        "formatter: function() {var s = '<table class=\"table-list\"><tr><th>Hora</th><th>'+ test(this.x) +'</th></tr>';" +
        "\n$.each(this.points, function(i, point) {" +
        "\ns += '<tr><td>'+point.series.name + '</td><td>'+point.y+'</td></tr>'});s+='</table>';" +
        "\n$('#tooltip').html(s);}},";

    result += "lang: {" + 
    "months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho'," +
    "'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']," +
    "weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado']},";

    string series = "";
    int x = 0;
    for (int j = 0; j < axisList.Length; j++)
    {

        var temporaryData = data.Where(t => t.Unit == axisList[j]).ToArray();
        for (int i = 0; i < temporaryData.Length; i++)
        {
            if (x > 0)
                series += ", ";
            series += "{name: '" + temporaryData[i].Title + "',\n color: '#" + temporaryData[i].Color.Name.Remove(0, 2) +
                "', \ntype: '" + temporaryData[i].Type + "',\nunit:'" + temporaryData.First().Unit + "', \nyAxis:" + j + " , \ndata:[" + FromArrayToString(temporaryData[i].Data) +
                "],  marker: { enabled: false}}\n";
            x++;
        }
    }



    result += "series: [\n" + series + "]\n";

    result += "});});";

    result += "\nfunction test(i)\n{\nvar j = new Date(i + 2*60*60*1000);\n" +
        "return new Date(i + 3*60*60*1000).format('d/m/Y H:i:s.')+j.getMilliseconds();\n}\n</script>";

    result += "\n<div id=\"" + options.DivName + "\" style=\"width:" + options.Width + ";height: " + options.Height + "\"></div>" +
        "<div id=\"tooltip\"></div>";

    return result;
}

It's really simple to call this helper:

@Html.Raw(Html.DisplayChart((ChartOptions)Model.Options,(TimedChartSeries[])Model.Series))

As you guys can see, I have to use the Html.Raw helper in order to make it work ... that is problem nº 1 (and it probably has an easy solution). But the second problem is really great: the chart becomes entirely tied to my domain. If I wanted to plot a, say, bar chart displaying data of the last 3 years in months (each month being represented by a bar), it would be impossible to use this helper.

And it also looks kind of ugly.

So, guys, which option do you think is more elegant, the Json or the Helper approach?