Column Charts (Bootstrap)

Navigation
4

I'm developing a system that needs to display column graphics.

The system is using Bootsrap and MVC 4 C #.

Can anyone tell me if there is any framework for creating graphics?

    
asked by anonymous 17.06.2014 / 17:30

2 answers

1

Have a present at ASP.NET MVC that makes column charts easily ( it also has the other templates ). No System.Web.Helpers.Chart you create an instance and work with the data in that class .

Example:

In your View put this code snippet: 

<img src="@Url.Action("Imagem", "Estudo")" border="0" />

And in the Controller this method: 

public void Imagem()
{
    ICollection<Grafico> grafico = new List<Grafico>(){
        new Grafico(){ Titulo = "Campo 1", Soma = 500M},
        new Grafico(){ Titulo = "Campo 2", Soma = 100M},
        new Grafico(){ Titulo = "Campo 3", Soma = 200M},
        new Grafico(){ Titulo = "Campo 4", Soma = 300M},
        new Grafico(){ Titulo = "Campo 5", Soma = 400M},
        new Grafico(){ Titulo = "Campo 5", Soma = 100M}
    };      

    System.Web.Helpers.Chart ch = 
                new System.Web.Helpers.Chart(500, 400, ChartTheme.Blue);
    ch.AddSeries(
        name: "Campo",
        chartType: "Column",
        axisLabel: "Campo",
        xField: "Campo",
        yFields: "Soma",
        xValue: grafico.Select(x => x.Titulo).ToArray(),
        yValues: grafico.Select(x => x.Soma).ToArray()
        ).AddLegend();

    ch.ToWebImage()
        .Write();
}

Result:

With DotNet.Highcharts , download the installation package at Package Management Console with the command: 

PM> Install-Package DotNet.Highcharts

In the View:

Obs: Set your View this way. 

@model DotNet.Highcharts.Highcharts
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Grafico</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/highcharts.js"></script>
</head>
<body>
    <div> 
        @(Model)
    </div>
</body>
</html>

In the Controller this method: 

public ActionResult Grafico()
{
    ICollection<Grafico> grafico = new List<Grafico>(){
        new Grafico(){ Titulo = "Campo 1", Soma = 500M},
        new Grafico(){ Titulo = "Campo 2", Soma = 100M},
        new Grafico(){ Titulo = "Campo 3", Soma = 200M},
        new Grafico(){ Titulo = "Campo 4", Soma = 300M},
        new Grafico(){ Titulo = "Campo 5", Soma = 400M},
        new Grafico(){ Titulo = "Campo 6", Soma = 100M}
    };

    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
    .InitChart(new DotNet.Highcharts.Options.Chart
    {
        DefaultSeriesType = ChartTypes.Column,
        MarginRight = 130,
        MarginBottom = 25,
        ClassName = "chart"
    })
    .SetXAxis(new XAxis
    {
        Categories = grafico.Select(x => x.Titulo).ToArray()
    }).SetSeries(new Series
    {
        Data = new Data(grafico.Select(x => (object)x.Soma).ToArray())
    });
    chart.SetTitle(new Title() { Text = "Campos" });
    chart.SetPlotOptions(new PlotOptions() { Bar = new PlotOptionsBar() { ShowInLegend = true, Visible = true } });            

    return View(chart);
}

Result:

    
17.06.2014 / 20:03
0

There are some. I'll put some of them to you:

Or, further, the following list of packages can be useful:

link

    
17.06.2014 / 17:40
Printing of pvc badge with thermal printer How to know which SQL is generated by the ORM Entity Framework?