Geek Answers Handbook

Javascript MVC Objects

I am writing an API and a website that displays data diagrams. I wrote an abstract "Chart" object that has things like the Series collection, various display options, and other things that you expect to find on a Chart object.

I use this abstract Chart object to allow users of my API to create a chart that the API can format to many different outputs. For example, he can use MSCharts to create a chart image, and then fill it with the appropriate settings from my own abstract chart object.

I am also trying to get it so that part of my site for this project can output a beautiful dynamic JavaScript diagram using jqPlot. My initial plan was to have an MVC Partial view that took a Chart object as a model and translated it into JavaScript. This has become a terrible pain for formatting, switching to Razor code for making decisions, dropping JavaScript output, and so on.

$.jqplot("chart", data, {
    @if (chart.Animate) { <text>animate: true,</text> }
    @if (chart.Animate) { <text>animateReplot: true,</text> }
    title: '@Model.Title',                
...

It's relatively simple, but when you get information about formatting a series, it becomes unreasonably complex, not what I want to support.

My next plan was that an MVC action can simply output the entire chart object using return Json(...

This works well with dot (C # code)

chart = new
{
  animate = abstractedChart.Animate,
  animateReplot = abstractedChart.Animate,
  title = v.Title,
  axes = new
      {
      xaxis = new
           {

...

But it crashes when you start formatting a series. jqPlot wants me to do something like this:

series: [{
    renderer: $.jqplot.LineRenderer
....

"" JavaScript MVC .

, -, JavaScript, Partial View Html.Raw(), , .

, - ?

+4
1

javascript- , . JSON JS, , MVC. , , - javascript- JSON jqplot. - :

var jqPlotMapper = {
    mapOptions : function (chartOptions)
    {
        return { seriesDefaults:{
                renderer: this.getSeriesRenderer(chartOptions.chartType)
        }};
    },    
    getSeriesRenderer : function (chartType)
    {
        switch(chartType)
        {
            case "line": return $.jqplot.LineRenderer;
            case "bar": return $.jqplot.BarRenderer;    
        }
    }
};

$(document).ready(function(){
    var chart = {};
    chart.Data = [[2, 6, 7, 10]];
    chart.Options = { chartType: "bar"};
    plot1 = $.jqplot('chart1', chart.Data, jqPlotMapper.mapOptions(chart.Options));
});
0

More articles:


All Articles