displaying different categoryAxis values than the dataSource

2 posts, 0 answers
  1. Steve
    Steve avatar
    3 posts
    Member since:
    Dec 2012

    Posted 28 Dec 2012 Link to this post

    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"
        }
    });
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 02 Jan 2013 Link to this post

    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!
Back to Top