How to show charts using c3.js in desk page in erpnext?

Hi all,

I want to show different charts using c3 js in erpnext application in desk page.
Please help me out for doing this.

I had tried to below written code on desk page, but unfortunately not worked at all.

 page.chart = new frappe.ui.Chart({
    // attach the chart here
    wrapper: $('<div>').appendTo(page.body),

    // pass the data, like
    // ['x', '2016-01-01', '2016-01-02']
    // ['Value', 20, 30]
    data: {
        x: 'x',
        xFormat: '%Y-%m-%d',
        columns: [data[0], data[1]],
    legend: {
        show: false
    axis: {
        x: {
            type: 'timeseries',
        y: {
            min: 0,
            padding: {bottom: 10}


Create a new app and then try to set the charts