在vtiger中集成highcharts?

时间:2013-02-22 06:33:25

标签: vtiger

我正在尝试将vtiger图表更改为高清图。但我是vtiger的新手,所以请帮我改变vtiger图布局。

3 个答案:

答案 0 :(得分:1)

我已将vTiger中的Highcharts与自定义dashbaord集成。

请按照以下步骤在vTiger中集成高级图表:

  • 包含所有highcharts JS文件
  • 添加新的tpl文件 /layouts/vlayout/modules/Home/Dashboards/customreports.tpl和

  • 将其包含在DashboardPreProcess.tpl文件

  • 您的JS文件应如下所示:

jQuery.Class(" Home_ChartView_Js" {

},{
    lead_by_status : function(){

        var form=jQuery('#frm_slreport');

        form.find('.btn_sl_report').on('click',function(e){
            console.log("Click");
        var sl_fromdate  = form.find('[name="sl_fromdate"]').val();
        var sl_todate  = form.find('[name="sl_todate"]').val();
        console.log(sl_fromdate);
        console.log(sl_todate);

                /* AJAX CALL */

        var progressIndicatorElement = jQuery.progressIndicator({
            'position' : 'html',
            'blockInfo' : {
            'enabled' : true,
            'elementToBlock' : jQuery('#sl_report')
        }
        });
        var params = {};
        params['module'] = 'Accounts';
        params['parent'] = '';
        params['view'] = 'LoadChartData';
        params['mode'] = 'loadChart_lead_by_status';
        params['edate'] = sl_todate;
        params['start_date'] = sl_fromdate;
        //console.log(params);

        AppConnector.request(params).then(function(data){
                var returnedData = JSON.parse(data);
                var fdata=returnedData.result.fdata;
                console.log(fdata);
                                    //fdata=JSON.parse(fdata);
                var data1=[{
                                name: 'Counter',
                                colorByPoint: true,
                                data: eval(fdata)
                           }];
                $('#sl_report').highcharts({
                        chart: {
                        type: 'column'
                        },
                        title: {
                        text: sl_fromdate+' to '+sl_todate
                        },
                        xAxis: {
                        type: 'category'
                        },

                        legend: {
                        enabled: false
                        },

                        plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true
                            }
                        }
                        },

                        series: data1,
                        drilldown: {}
                });

                progressIndicatorElement.progressIndicator({mode : 'hide'});
        });



                /* AJAX CALL */



    });
    },

});

  • btn_sl_report id应出现在customreports.tpl
  • 使用您在Ajax调用中提到的函数名更新视图文件。

希望它能帮助您在vTiger中集成highcharts。

答案 1 :(得分:0)

你是什​​么意思? 虽然你可以查看这些文件:

  

VTRoot-> /modules/Dashboard/horizo​​ntal_bargraph.php
   VTRoot-> /modules/Dashboard/vertical_bargraph.php
   VTRoot-> /modules/Potentials/Charts.php

来源:来自

  

VTRoot-> /modules/Dashboard/Chart_pipeline_by_lead_source.php

答案 2 :(得分:0)

转到layouts / vlayout / modules / Vtiger / resources / dashboards / Widget.js

您将在那里看到图表代码。删除当前库代码并在那里添加Highchart代码。您将从Vtiger获取数据。您应该为Highchart准备数据并在那里进行更新。