Dates with JSON /Highcharts

Question

I have a problem with dates while plotting a Highcharts chart using JSON object.

Data referring to date information is being displayed as follows:

The Server sends JSON as follows to the client:

  [HttpGet]
        public JsonResult DadosAtendimentosParticularesPorDentistas()
        {
            DateTime DataAtual = DateTime.Now;
            DateTime InicioMes = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

            var _listaProducao = _session.CreateSQLQuery("SELECT DATA_ATENDIMENTO, VALOR FROM T_LANCAMENTO_PRODUCAO_PARTICULAR " +
                                                       "WHERE DATA_ATENDIMENTO BETWEEN :INICIO AND :FIM")
                                       .SetParameter("INICIO", InicioMes.AddMonths(-3))
                                       .SetParameter("FIM", DataAtual)
                                       .List();



            return Json(_listaProducao, JsonRequestBehavior.AllowGet);
        }

My chart is generated through the following code in the client:

<script type="text/javascript">

function producaoDentista(data) {

    $('#testegrafico').highcharts({

        chart: {
            type: 'spline'
        },
        title: {
            text: 'Grafico de Faturamento',
            x: -20
        },
        subtitle: {
            text: 'Amostragem de Convenio e Particular',
            x: -20
        },
        xAxis: {
            type: "datetime",
            categories: Date,
            tickPixelInterval: 150,
            maxZoom: 5,
            dateTimeLabelFormats: {
                month: '%b %e, %Y',
                year: '%Y'
            }

            //dateTimeLabelFormats: {
            //    month: '%b %e, %Y',
            //    year: '%Y'
            //}
        },
        yAxis: {
            title: {
                text: 'Valor em R$'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
        },
        series: [{

            name: 'Atendimento Particular',
            data: data
            //name: 'Atendimento Particular',
            //data: data,
            //tooltip: {
            //    pointFormat: 'R$:{point.y:.2f}',
            //}
        //}, {
        //    name: 'Atendimento Convênio',
        //    data: [2.0, 3.1, 10, 40.59, 100, 200, 500, 10, 500,11, 33]
        ,}]
    });
}
$(document).ready(function () {
    $.ajax({
        url: 'GraficoAtendimento/DadosAtendimentosParticularesPorDentistas',
        type: 'GET',
        async: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            producaoDentista(data)
        }
    });
});

And my JSON object, is composed as follows:

[["\/Date(1418223600000)\/",80],["\/Date(1415631600000)\/",10],  
 ["\/Date(1415804400000)\/",40],["\/Date(1420077600000)\/",8],  
 ["\/Date(1420164000000)\/",10],["\/Date(1420164000000)\/",30],
 ["\/Date(1420164000000)\/",140],["\/Date(1420164000000)\/",10],
 ["\/Date(1420423200000)\/",560]]

I’m stuck trying to resolve this issue, but I’m not succeeding, someone would know to give me a help or an explanation of how I should perform this treatment?

Answer 1

You are passing the data to the graph as pure JSON, you must convert to an object, which will be a array with the data.

To convert do the following:

series: [{

        name: 'Atendimento Particular',
        data: JSON.parse(data)

I believe using the JSON.parse(data) should convert the date to the format you want.