This is a migrated thread and some comments may be shown as answers.

How create a group chart in the CategoryAxis and DataSource?

1 Answer 129 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Misahael
Top achievements
Rank 1
Misahael asked on 24 Jan 2014, 01:31 PM


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

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 24 Jan 2014, 03:17 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Misahael
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or