displaying different categoryAxis values than the dataSource

[Steve]

I'm displaying a chart that shows values by the day of week. The JSON payload I get back includes 1-7 as the day of week. How can I either use the 1-7 as indexers into an array of the daysOfWeek, or can I use a static list of values?

var daysOfWeekArray = new Array();

daysOfWeekArray[0] = "Mon";

daysOfWeekArray[1] = "Tue";

daysOfWeekArray[2] = "Wed";

daysOfWeekArray[3] = "Thu";

daysOfWeekArray[4] = "Fri";

daysOfWeekArray[5] = "Sat";

daysOfWeekArray[6] = "Sun";

 

var daysOfWeekJSON = [

    { "DayOfWeek": "Mon" },

    { "DayOfWeek": "Tues" },

    { "DayOfWeek": "Wed" },

    { "DayOfWeek": "Thur" },

    { "DayOfWeek": "Fri" },

    { "DayOfWeek": "Sat" },

    { "DayOfWeek": "Sun" }];

 

var customersByDayOfWeek =

        [

        { "DayOfWeek": 1, "TableType_Id": "Bar ", "Seated": 285 },

        { "DayOfWeek": 1, "TableType_Id": "Lounge ", "Seated": 39 },

        { "DayOfWeek": 1, "TableType_Id": "Dining ", "Seated": 36 },

        { "DayOfWeek": 2, "TableType_Id": "Bar ", "Seated": 195 },

        { "DayOfWeek": 2, "TableType_Id": "Lounge ", "Seated": 32 },

        { "DayOfWeek": 2, "TableType_Id": "Dining ", "Seated": 18 },

        { "DayOfWeek": 3, "TableType_Id": "Bar ", "Seated": 193 },

        { "DayOfWeek": 3, "TableType_Id": "Lounge ", "Seated": 28 },

        { "DayOfWeek": 3, "TableType_Id": "Dining ", "Seated": 21 },

        { "DayOfWeek": 4, "TableType_Id": "Bar ", "Seated": 199 },

        { "DayOfWeek": 4, "TableType_Id": "Lounge ", "Seated": 30 },

        { "DayOfWeek": 4, "TableType_Id": "Dining ", "Seated": 12 },

        { "DayOfWeek": 5, "TableType_Id": "Bar ", "Seated": 195 },

        { "DayOfWeek": 5, "TableType_Id": "Lounge ", "Seated": 29 },

        { "DayOfWeek": 5, "TableType_Id": "Dining ", "Seated": 19 },

        { "DayOfWeek": 6, "TableType_Id": "Bar ", "Seated": 195 },

        { "DayOfWeek": 6, "TableType_Id": "Lounge ", "Seated": 23 },

        { "DayOfWeek": 6, "TableType_Id": "Dining ", "Seated": 24 },

        { "DayOfWeek": 7, "TableType_Id": "Bar ", "Seated": 191 },

        { "DayOfWeek": 7, "TableType_Id": "Lounge ", "Seated": 30 },

        { "DayOfWeek": 7, "TableType_Id": "Dining ", "Seated": 21 }

        ]

                     

$("#customersByDayOfWeek").kendoChart({

    theme: $(document).data("kendoSkin") || "default",

    dataSource: {

        data: customersByDayOfWeek,

        //transport: {

        //    read: {

        //        url: reportsAPI,

        //        dataType: "json"

        //    }

        //},

        group: {

            field: "TableType_Id"

        }

    },

    title: {

        text: "Customers Per Month, By Table Type"

    },

    legend: {

        position: "bottom"

    },

    seriesDefaults: {

        type: "column",

        labels: {

            visible: true,

            format: "{0:n0}"

        }

    },

    series: [{

        field: "Seated",

        name: "",

        colorField: "userColor"

    }],

    valueAxis: {

        labels: {

            format: "{0}"

        }

    },

    categoryAxis: {

        data: daysOfWeekJSON,

        field: "DayOfWeek"

    }

});

[Hristo Germanov]

Hello Steve Lasker,

Thank you for contacting us.

1) You can pass a static list of strings to the chart's categoryAxis.  http://jsbin.com/izefoc/1/edit
2) You can hook up to the dataBound event of the chart and there you can modify the chart options before rendering.  http://jsbin.com/izefoc/2/edit

Greetings,
Hristo Germanov
the Telerik team