How create a group chart in the CategoryAxis and DataSource?

[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: The datasource

public ActionResult LeerExt_GraficoServicio(string txtFechaInicio, string txtFechaFin)
        {
            return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin));
        }

[Iliana Dyankova]

Hello Christian,

I already posted a reply in your other thread, however I am pasting my answer here too:

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))

   )

)




On a side note, please refrain from posting duplicate questions as we monitor all threads - posting same question more than once produces unnecessary overload. Thank you in advance for your understanding.

Regards,
Iliana Nikolova
Telerik