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

Creating a group chart

8 Answers 60 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Misahael
Top achievements
Rank 1
Misahael asked on 23 Jan 2014, 01:51 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:
public ActionResult LeerExt_GraficoServicio(string txtFechaInicio, string txtFechaFin)
        {
            return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin));
        }

8 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 24 Jan 2014, 03:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Misahael
Top achievements
Rank 1
answered on 28 Jan 2014, 02:14 PM
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?
0
Iliana Nikolova
Telerik team
answered on 28 Jan 2014, 04:10 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Misahael
Top achievements
Rank 1
answered on 28 Jan 2014, 04:44 PM
Hi Iliana,

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

I attach the error that I have.
0
Iliana Nikolova
Telerik team
answered on 29 Jan 2014, 03:57 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Misahael
Top achievements
Rank 1
answered on 30 Jan 2014, 02:09 PM
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.
0
Iliana Nikolova
Telerik team
answered on 31 Jan 2014, 04:12 PM
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

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

0
Misahael
Top achievements
Rank 1
answered on 06 Feb 2014, 02:20 PM
Hi Iliana,

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

Regards.
Tags
Charts
Asked by
Misahael
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Misahael
Top achievements
Rank 1
Share this question
or