Thread Details
  • State Verified Answer
  • Replies 4 replies
  • Subscribers 355 subscribers
  • Views 1309 views
  • Users 0 members are here
Forum Actions
Related

Graph widget in modules

Homin Lee

Is it possible to use/display graphs that are used in the reports (pie chart, etc) in another module, say the Task module?

For instance, I have grouped Leads under a Project by creating a relation between the two.  I keep track of leads under a project and at the end of each day, I keep count of the leads and the statuses they are in for each of the projects worked on that day.  I already have the means to get the count but I'd like it to have it plotted on a graph and attached to a Task as a means of keeping track of the work done for the day for each of the projects.  Many of these leads will get modified next day so running a report a week later will yield a different result.

Parents
  • +1

    Certainly it can be implemented by creating some custom views. We did something like that for a couple of customers.

    André Lopes
    Lampada Global
    Skype: andre.lampada
  • 0 in reply to André Lopes

    Are you able to provide some pointers?

    I have tried to follow the instructions on https://sugarclub.sugarcrm.com/dev-club/b/dev-blog/posts/how-to-build-chart-layouts-for-sugar-7 to learn but I have trouble getting it up and running.  We are using Sugar on-demand 11.1 so I don't know if we can install 3rd party modules.

    manifest.php

    ......

    $installdefs = array(
    'id' => 'Chart_Example_v1',
    'copy' => array(
    0 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/layouts/single-chart-layout/single-chart-layout.php',
    'to' => 'custom/modules/Accounts/clients/base/layouts/single-chart-layout/single-chart-layout.php',
    ),
    1 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.hbs',
    'to' => 'custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.hbs',
    ),
    2 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.js',
    'to' => 'custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.js',
    ),
    3 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.php',
    'to' => 'custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.php',
    ),
    ),
    );

    All of the codes are the same as they are on the link above, except for single-chart-view.js 

    I made the two changes below:

    // this.chart = nv.models.lineChart()   // causes error, so replaced with below
    this.chart = sucrose.charts.lineChart()

    // d3.select(this.el).select('svg')  // causes error, so replaced with below
    d3sugar.select(this.el).select('svg')

     

    single-chart-view.js 

    ({
    plugins: ['Chart'],
    className: 'single-chart-view',
    chartData: {},
    total: 0,

    initialize: function (options) {
    this._super('initialize', [options]);
    // this.chart = nv.models.lineChart()
    this.chart = sucrose.charts.lineChart()
    .x(function (d) {
    return d.widget_points;
    })
    .y(function (d) {
    return d.num_widgets;
    })
    .showTitle(true)
    .tooltips(false);
    },

    loadData: function() {
    this.chartData = {
    data: [
    {
    key: "Blue Stuff",
    values: [
    {
    widget_points: 1, num_widgets: 10
    },
    {
    widget_points: 2, num_widgets: 9
    },
    {
    widget_points: 3, num_widgets: 8
    },
    {
    widget_points: 4, num_widgets: 7
    },
    {
    widget_points: 5, num_widgets: 6
    },
    ],
    color: "#0000ff"
    },
    {
    key: "Red Stuff",
    values: [
    {
    widget_points: 1, num_widgets: 1
    },
    {
    widget_points: 2, num_widgets: 2
    },
    {
    widget_points: 3, num_widgets: 3
    },
    {
    widget_points: 4, num_widgets: 4
    },
    {
    widget_points: 5, num_widgets: 5
    },
    ],
    color: "#ff0000"
    },
    ],
    properties: {
    title: 'Example Chart Data'
    }
    };
    this.total = 1;
    },

    renderChart: function () {
    if (!this.isChartReady()) {
    return;
    }

    // d3.select(this.el).select('svg')
    d3sugar.select(this.el).select('svg')
    .datum(this.chartData)
    .transition().duration(500)
    .call(this.chart);
    this.chart_loaded = _.isFunction(this.chart.update);
    this.displayNoData(!this.chart_loaded);
    }
    })

    I was able to install the package above but when I navigate to the URL below: xxxxx.sugarondemand.com/#Accounts/layout/single-chart-layout

    There is a message saying 'No Data Available'.  There are no JS errors in the browser console.

Reply
  • 0 in reply to André Lopes

    Are you able to provide some pointers?

    I have tried to follow the instructions on https://sugarclub.sugarcrm.com/dev-club/b/dev-blog/posts/how-to-build-chart-layouts-for-sugar-7 to learn but I have trouble getting it up and running.  We are using Sugar on-demand 11.1 so I don't know if we can install 3rd party modules.

    manifest.php

    ......

    $installdefs = array(
    'id' => 'Chart_Example_v1',
    'copy' => array(
    0 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/layouts/single-chart-layout/single-chart-layout.php',
    'to' => 'custom/modules/Accounts/clients/base/layouts/single-chart-layout/single-chart-layout.php',
    ),
    1 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.hbs',
    'to' => 'custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.hbs',
    ),
    2 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.js',
    'to' => 'custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.js',
    ),
    3 => array(
    'from' => '<basepath>/Files/custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.php',
    'to' => 'custom/modules/Accounts/clients/base/views/single-chart-view/single-chart-view.php',
    ),
    ),
    );

    All of the codes are the same as they are on the link above, except for single-chart-view.js 

    I made the two changes below:

    // this.chart = nv.models.lineChart()   // causes error, so replaced with below
    this.chart = sucrose.charts.lineChart()

    // d3.select(this.el).select('svg')  // causes error, so replaced with below
    d3sugar.select(this.el).select('svg')

     

    single-chart-view.js 

    ({
    plugins: ['Chart'],
    className: 'single-chart-view',
    chartData: {},
    total: 0,

    initialize: function (options) {
    this._super('initialize', [options]);
    // this.chart = nv.models.lineChart()
    this.chart = sucrose.charts.lineChart()
    .x(function (d) {
    return d.widget_points;
    })
    .y(function (d) {
    return d.num_widgets;
    })
    .showTitle(true)
    .tooltips(false);
    },

    loadData: function() {
    this.chartData = {
    data: [
    {
    key: "Blue Stuff",
    values: [
    {
    widget_points: 1, num_widgets: 10
    },
    {
    widget_points: 2, num_widgets: 9
    },
    {
    widget_points: 3, num_widgets: 8
    },
    {
    widget_points: 4, num_widgets: 7
    },
    {
    widget_points: 5, num_widgets: 6
    },
    ],
    color: "#0000ff"
    },
    {
    key: "Red Stuff",
    values: [
    {
    widget_points: 1, num_widgets: 1
    },
    {
    widget_points: 2, num_widgets: 2
    },
    {
    widget_points: 3, num_widgets: 3
    },
    {
    widget_points: 4, num_widgets: 4
    },
    {
    widget_points: 5, num_widgets: 5
    },
    ],
    color: "#ff0000"
    },
    ],
    properties: {
    title: 'Example Chart Data'
    }
    };
    this.total = 1;
    },

    renderChart: function () {
    if (!this.isChartReady()) {
    return;
    }

    // d3.select(this.el).select('svg')
    d3sugar.select(this.el).select('svg')
    .datum(this.chartData)
    .transition().duration(500)
    .call(this.chart);
    this.chart_loaded = _.isFunction(this.chart.update);
    this.displayNoData(!this.chart_loaded);
    }
    })

    I was able to install the package above but when I navigate to the URL below: xxxxx.sugarondemand.com/#Accounts/layout/single-chart-layout

    There is a message saying 'No Data Available'.  There are no JS errors in the browser console.

Children
No Data