jQuery multiline highcharts

Question

I have an MVC application and would like to clarify some questions on how to implement a chart with database data. I am using jQuery to get the values from the database, but did not understand how to take these values and generate a chart using Highcharts, I read a lot on the internet, but it was not clear how to get and put the values on the x and y axis.

For the values of X and Y axes, I am using the following:

Dictionary <decimal, decimal> dataResult = new Dictionary <decimal, decimal> ();

To query the database and assemble the following:

foreach (var item in query) 
{
     dataResult.Add (Convert.ToDecimal (item.valorinicial), Convert.ToDecimal (item.preco)); 

} 

To pass the value:

return Json (dataResult, JsonRequestBehavior.AllowGet);

To generate the Chart, I switched to:

var options = {
                chart: {
                    renderTo: "container",
                },
                series: [{}]
            };



        $.getJSON("/GraficosLev/GetDadosByGraf", { ...parametros passados.... },
            function (data) {
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        ignoreHiddenSeries: false
                    },

                    xAxis: {
                    },


                    series: data
                });
        });

For the search of the data:

Dictionary<decimal, decimal> dataResult = new Dictionary<decimal, decimal>();

        public object GetValuesByGraf(int? idRod, int? idLev, string codLev, string kmIni, string kmFim)
        {
            string tpLev = (from l in db.TIPO_LEVA where l.id == idLev select l.tipo_levantamento).FirstOrDefault();
            //Conta o numero de datas Selecionadas
            string[] codLevant = codLev.Split(',');

            foreach (string i in codLevant)
            {
                //pega os valores do id do codigo de levantmanto para pegar os levantamentos
                int idCodLev = (from l in db.LEV1
                               where l.cod_levantamento == i
                               select l.id).FirstOrDefault();

                if (tpLev =="I")
                {
                    var query = (from iri in db.IRR10
                                      where iri.cod_levantamento_id == idCodLev
                                      select iri);

                    foreach (var item in query)
                    {
                        dataResult.Add(Convert.ToDecimal(item.inicial), Convert.ToDecimal(item.iri));

                    }
                }
            }



            return dataResult;
        }

Answer 1

would not be "date" instead of "y"

 name: val.key,
 data: val.Value

Answer 2

Observing the responses and comments I noticed that in setting the renderTo is for the container. This really is the id of the element to be Chart?

You can also set your Chart using jquery:

$('#container').highcharts(options);

Use jquery ($('#container')) or go straight to json (renderTo: 'container') do the same effect, so just use one of the options and check if the id of the element matches what is in the renderTo.

Your code could look like this:

$(document).ready(function () {
    $("#Submit").click(function (evt) {
     //
     //Algumas Variaveis
     //

        jQuery.get("/ChartLev/GetByGraf", { ...passo os parametros....} }, function (values) {
            $.each(values, function (key, val) {
                data.push({
                    name: val.key,
                    data: val.Value
                })
            });
        });
        var options = {
            chart: {
                backgroundColor: '#ffffff',
                borderColor: '#a2a2a1',
                borderWidth: 0,
                borderRadius: 0,
                type: 'area',
                plotBackgroundColor: '#fffdf6'
            },
            colors: ['#3399FF'],
            legend: {
                enabled: false
            },

            title: {
                text: 'Graf'
            },
            tooltip: {
                borderRadius: 0,
                borderWidth: 0,
                shadow: false,
                style: {
                    fontSize: '7pt',
                    color: '#000000'
                },
                formatter: function() {
                    return this.value
                }
            },
            xAxis: {

                labels: {
                    rotation: -45,
                    x: 0,
                    y: 40,
                    style: {
                        color: '#333333'
                    }
                },
                lineWidth: 1,
                lineColor: '#333333',
                minPadding: 0,
                maxPadding: 0,
                title: {
                    text: ''
                },
                tickInterval: 2,
                tickmarkPlacement: 'on'
            },
            yAxis: {
                gridLineWidth: 0,
                labels: {
                    formatter: function() {
                        return this.value},
                    style: {
                        color: '#333333'
                    }
                },
                lineWidth: 1,
                lineColor: '#333333',
                min: 0,
                minPadding: 0,
                maxPadding: 0,
                title: {
                    text: ''
                }
            },
            series: data
        };
        $('#container').highcharts(options);
    });
});

And in your html:

<div id="container"></div>

Answer 3

In your case (starting value and price), the chart could be mounted using this example.

Using this Nuget package.

Controller

public ActionResult BasicBar()
{
    Highcharts chart = new Highcharts("chart")
        .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar })
        .SetTitle(new Title { Text = "Historic World Population by Region" })
        .SetSubtitle(new Subtitle { Text = "Source: Wikipedia.org" })
        .SetXAxis(new XAxis
            {
                Categories = new[] { "Africa", "America", "Asia", "Europe", "Oceania" },
                Title = new XAxisTitle { Text = string.Empty }
            })
        .SetYAxis(new YAxis
        {
                Min = 0,
                Title = new YAxisTitle
                {
                    Text = "Population (millions)",
                    Align = AxisTitleAligns.High
                }
        })
        .SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +' millions'; }" })
        .SetPlotOptions(new PlotOptions
        {
            Bar = new PlotOptionsBar
            {
                DataLabels = new PlotOptionsBarDataLabels { Enabled = true }
            }
        })
        .SetLegend(new Legend
        {
            Layout = Layouts.Vertical,
            Align = HorizontalAligns.Right,
            VerticalAlign = VerticalAligns.Top,
            X = -100,
            Y = 100,
            Floating = true,
            BorderWidth = 1,
            BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")),
            Shadow = true
        })
        .SetCredits(new Credits { Enabled = false })
        .SetSeries(new[]
        {
            new Series { Name = "Year 1800", Data = new Data(new object[] { 107, 31, 635, 203, 2 }) },
            new Series { Name = "Year 1900", Data = new Data(new object[] { 133, 156, 947, 408, 6 }) },
            new Series { Name = "Year 2008", Data = new Data(new object[] { 973, 914, 4054, 732, 34 }) }
        });

        return View(chart);
    }

View

@model DotNet.Highcharts.Highcharts

@{
    ViewBag.Title = "Meu gráfico";
}

<h2>Meu gráfico</h2>

@(Model)

Have more examples in this file.

There’s one more package at the Nuget, the Highcharts.net , but this did not find examples of use, although it is done by a Brazilian and has positive comments on the project page: http://highcharts.codeplex.com/. I think it would be the case to test case by case.