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

displaying different categoryAxis values than the dataSource

1 Answer 57 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 28 Dec 2012, 06:59 PM
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"
    }
});

1 Answer, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 02 Jan 2013, 01:04 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Steve
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Share this question
or