Kendo Scatter chart - grouping not working

2 posts, 0 answers
  1. Lisa
    Lisa avatar
    37 posts
    Member since:
    May 2011

    Posted 01 Aug 2013 Link to this post

    Hi - I'm trying to create a Scatter Chart bound  to remote data, and grouped.  I'm not getting something right.  Attached is a screen shot that shows the data I'm getting from my JSON call, what the chart currently looks like(note the series name, something is wrong with where I am doing my grouping) and an example of a chart I'm working from.

    I have looked at the demos for the scatter chart, I'm just not seeing what I'm missing.

    Thanks - here is the code that creates the chart:

           kcSchoolCrosstab = $("#SchoolCrosstab").kendoChart({
               title: {
                   text: "Crosstab",
                   font: "bold 16px Arial,Helvetica,Sans-Serif"
               legend: {
                   visible: false
               dataSource: {
                   transport: {
                       read: function (options) {
                           if (!(ktvSchoolFilter && ktvSchoolFilter.getSelectedSchoolCodes() && getSelectedSchoolYear())) {
                           kendo.ui.progress(kcSchoolCrosstab.element, true);
                           username: WSIPCContext.UserName,
                           districtId: WSIPCContext.DistrictId,
                           schoolCodes: ktvSchoolFilter.getSelectedSchoolCodes(),
                           schoolYear: getSelectedSchoolYear,
                           //                      countOfEvents: 3,
                           countOfEvents: getRiskCatCount(),
                           whereIds: "1"
                       }).success(function (data) {
                       }).always(function () {
                           kendo.ui.progress(kcSchoolCrosstab.element, false);
                       group: {
                           field: "GradeLevel"
                       sort: {
                           field: "StudentCount"
               series: [{
                   type: "scatter",
                   xField: "StudentRiskFactor",
                   yField: 'StudentCount',
                   color: "#4F82BE",
                   name: "#= group.value"
               legend: {
                   position: "bottom"
               xAxis: {
                   labels: {
                       step: 2,
                       format: "{0}%"
                   title: {
                       text: "Avg. School Risk Score"
               yAxis: {
                   labels: {
                       skip: 2,
                       step: 2
                   title: {
                       text: "Avg. School Count",
                       margin: {
                           right: 10
               chartArea: {
                   height: 300,
                   width: 520

    Thanks - Lisa
  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 02 Aug 2013 Link to this post

    Hi Lisa,

    I have already replied to the same question in your other ticket, however I am pasting my reply here too:

    The provided Chart's configuration looks OK and I am not quite sure what causes the issue in your application. Please keep in mind the series will be the actual groups i.e. you will have as many series as different GradeLevel present in the data. Is it possible to provide a runnable example which demonstrates the issue and which I can test locally? This way I would be able to check what exactly is going wrong and provide concrete recommendations. Thank you in advance for your time and cooperation.

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top