Creating a group chart

[Misahael]

Hi, 
I have a little problem when the data is shown. 
I want a chart with the hours of service of a company, I have three fields, HOURS_SERVICE, TYPE_SERVICE, COMPANY.

The chart must show the hours of each type of service by company, I've tried this:
I attach two files: the first is the chart that I want and the second is the chart that's showing with Kendo

My View:

@model IEnumerable<SIS_CSC.ViewMoldels.HorasTrabajadasTecnicosViewModel>

<div>

 

    <h2 align="centre"> REPORTE DE SERVICIOS POR EMPRESA</h2>

 

    @(Html.Kendo().Chart(Model)

    .Name("Chart")

    .Title("Gráfico de horas de servicio de los clientes por tipo de trabajo")

    .DataSource(datasource => datasource

        .Read(read => read.Action("LeerExt_GraficoServicio", "Consultas").Data("getParameter"))

        .Group(group => group.Add(model => model.TIPO_SERVICIO))

        )

        .CategoryAxis(axis => axis

             .Categories(model => model.EMPRESA)

             .Title("Cliente")                         

             .Labels(label => label.Rotation(-90))

             .MajorGridLines(major => major.Visible(false))                 

        )

       .SeriesDefaults(

            seriesDefaults => seriesDefaults.Column().Stack(true)

                )

        .Series(series => {

            series.Column(model => model.TOTAL_HORAS)

                .Name("");

        })

        .Legend(legend => legend

            .Position(ChartLegendPosition.Right)

        )

        .ValueAxis(axis => axis.Numeric()

            .Title("Horas de servicio")

            .Labels(labels => labels

                .Format("{0}")

                .Skip(1)

                .Step(1)

            )

        )

        .Tooltip(tooltip => tooltip

            .Visible(true)

            .Format("{0,00}")

            .Template("#= series.name #: #= value #")

        )

        )

</div>

<script type="text/javascript">
    function getParameter() {
        return {
            txtFechaInicio: $("#txtFechaInicio").val(),
            txtFechaFin: $("#txtFechaFin").val(),
        };
    }

    function BindChart() {
        $("#Chart").data("kendoChart").dataSource.read();
        $("#Chart").data("kendoChart").redraw();
        //$("#Chart").data("kendoChart").refresh();
    }
</script>


My Controller:

public ActionResult LeerExt_GraficoServicio(string txtFechaInicio, string txtFechaFin)

        {

            return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin));

        }


[Iliana Dyankova]

Hello Christian,

I believe the illustrated outcome is due to a different number of points in each of the groups. As an explanation:

• By design the categorical charts require a matching set of data points;
• The categories in a grouped chart are created depending on the first series.

In case there is a different number of values you need to use series.categoryField instead: 

@(Html.Kendo().Chart(Model)
  //....
  .Series(series => { series
      .Column(model => model.TOTAL_HORAS, categoryExpression: model => model.EMPRESA);
  })
  .CategoryAxis(axis => axis
     .Title("Cliente")
     .Labels(label => label.Rotation(-90))
     .MajorGridLines(lines => lines.Visible(false))
   )
)

Regards,
Iliana Nikolova
Telerik

[Misahael]

Hi Iliana,

thanks for the support, but I can't find that method in the Razor view

Can you help me, how I configure the categoryField in Razor, please?

[Iliana Dyankova]

Hi Christian,

The correct syntax in a Razor view is actually categoryExpression. Please test the code snippet suggested in my previous post and let me know if you still observe any problems. 

Regards,
Iliana Nikolova
Telerik

[Misahael]

Hi Iliana,

thanks for the correction, but still doesn't work.

I attach the error that I have.

[Iliana Dyankova]

Hi Christian,

The categoryExpression options was introduced in Kendo UI Q2 2012 release (roadmap) - could you ensure you are using v2012.2.710 or later? In case you are using a correct version but the issue still persists, please provide a runnable example which I can test locally - this way I would be able to check what exactly is going wrong and advice you further. 

Regards,
Iliana Nikolova
Telerik

[Misahael]

Hi Iliana,

Yes I have the version 2012.3.1315 and the problem persists.
I can't send you the example because the project it's too big and the limit is 2MB. 
Can I send you only the files? Or how can I attach a large file? 8MB

Regards.

[Iliana Dyankova]

Hi Christian,

First of all let me apologize - I double checked and it appears the series.categoryField option is added in Kendo UI Q2 2013 release (roadmap). Hence in order to be able to use such an option you should upgrade to v2013.2.716 or later.

Regards,
Iliana Nikolova
Telerik

[Misahael]

Hi Iliana,

The support that you provided me was very helpful. That's exactly what I was looking for
Thanks.

Regards.