CODEWITHSUNDEEP
user-interfacechartskendo-uikendo-chart
yinjiale
yinjiale

Reputation: 1

Kendo UI chart categoryaxis date group by day

my json :

 var stats = [
     { value: 30, date: new Date("2015/04/12"), No: 1 },
     { value: 50, date: new Date("2015/04/12"), No: 2 },
     { value: 45, date: new Date("2015/04/12"), No: 3 },
     { value: 30, date: new Date("2015/04/13"), No: 1 },
     { value: 50, date: new Date("2015/04/13"), No: 2 },
     { value: 45, date: new Date("2015/04/13"), No: 3 },
     { value: 30, date: new Date("2015/04/14"), No: 1 },
     { value: 50, date: new Date("2015/04/14"), No: 2 },
     { value: 45, date: new Date("2015/04/14"), No: 3 }
];

my code:

function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "72小时能耗状况图"
        },
        dataSource: {
            data: stats
        },
        seriesColors: ["#3A5FCD"],
        series: [{
            type: "column",
            field: "value",
            categoryField: "date"
        }],
        categoryAxis: {
            baseUnit: "days",
            majorGridLines: {
                visible: false
            }
        },
        valueAxis: {
            line: {
                visible: false
            }
        }
    });
}

I want everyday has three bars, for 1,2,3. and different day have different color.

How can I modify the code?

Can you understand me?

Upvotes: 0

Views: 1872

Answers (1)

ezanker
ezanker

Reputation: 24738

Setup a dataSource object with grouping on the "No" field:

var statsDataSource = new kendo.data.DataSource({
    data: stats,
    group: {
        field: "No"
    },
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
});

Then use that dataSource when creating the chart:

$("#chart").kendoChart({
    title: { text: "72小时能耗状况图" },
    theme: "Metro",
    dataSource: statsDataSource,                
    series: [{
        type: "column",
        field: "value",
        categoryField: "date",
        name: "#= group.value #"
    }],
    legend: {
        position: "bottom"
    },
    valueAxis: {
        line: {
           visible: false
        }
    },
    categoryAxis: {
      baseUnit: "days",
      majorGridLines: {
          visible: false
      }
    }
});

DEMO

Upvotes: 1

Related Questions