I am trying to pass the matrix type report into a google chart, but for that i need to parse the data.i have tried to do that but i didn't get any matrix grouping function since i am new to report metadat API not getting the idea how to get the data into list and then pass it to the javascript chart. Inhave tried with ReportFactWithSummaries but still no luck. Can anyone please suggest me how to do this. I have below Matrix report:-

enter image description here

and wanted to show it in chart as below:-

enter image description here

Vf Page:-
<apex:page standardStylesheets="false" showHeader="false" sidebar="false" controller="DemoController">
    <apex:stylesheet value="{!URLFOR($Resource.dashing,'/dashing/dashing_css.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.dashing,'/dashing/dashing_js.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.dashing,'/dashing/Chart.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.dashing,'/dashing/utils.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.dashing,'/gauge.min.js')}"/>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
        #g1, #g2, #g3, #g4, #g5, #g6 {
        width:200px; height:160px;
        display: inline-block;
        margin: 1em;
      #gauge1-txt {
            width: 280px;
            text-align: center;
            font-weight: bold;
        #txt {
            width: 280px;
            text-align: center;


        var config1 = {
            type: 'line',
            data: {
                labels: ["","January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    borderColor: window.chartColors.red,
                    backgroundColor: window.chartColors.red,
                    data: [ 0,10,20,30,20,35,25,5],
                    fill: false,
                }, {
                    label: "My Second dataset",
                    borderColor: window.chartColors.blue,
                    backgroundColor: window.chartColors.blue,
                    data: [ 0,20,10,25,20,15,45,10],
                    fill: false,
                    label: "My Third dataset",
                    borderColor: window.chartColors.yellow,
                    backgroundColor: window.chartColors.yellow,
                    data: [0,50, 40,15, 10,45, 15,5],
                    fill: false,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                    display: true,
                    text: "Chart"
                tooltips: {
                    mode: 'index',
                    callbacks: {
                        // Use the footer callback to display the sum of the items showing in the tooltip
                        footer: function(tooltipItems, data) {
                            var sum = 0;

                            tooltipItems.forEach(function(tooltipItem) {
                                sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                            return 'Sum: ' + sum;
                hover: {
                    mode: 'index',
                    intersect: true
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            show: true,
                            labelString: 'Month'
                        gridLines: {
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            show: true,
                            labelString: 'Value'
                        gridLines: {

        window.onload = function() {

            var ctx1 = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx1, config1);



        setInterval(function() {

            if(window.myLine !== undefined){
                var ctx1 = document.getElementById("canvas").getContext("2d");
                window.myLine = new Chart(ctx1, config1);
        }, 15000);
    <apex:form id="form">
        <div id="container">
            <div class="gridster ready">            
                <ul style="position: relative;height:740px;">                    

                       <li data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w">
                        <!--<div style="background-color:#ff9618" class="widget widget-graph convergence rickshaw_graph">-->
                        <div class="widget widget-meter synergy" style="background-color:#47bbb3;">
                            <!--<div id="barchart_values"></div>-->
                            <canvas id="canvas" height="200" width="200" style="width: 250px; height: 200px;"></canvas>



public class DemoController {
     public String reportName {get;set;}
    public String reportName1 {get;set;}
    public Map<String,String> finalMap {get;set;}
    public List<PieWedgeData> dataWedgeList {get;set;} 
    public List<CaseReport> caseReportList {get;set;}
    public DemoController(){
        reportName1 = '';
    // Wrapper class
    public class PieWedgeData {

        public String name { get; set; }
        public Integer data { get; set; }

        public PieWedgeData(String name, Integer data) {
            this.name = name;
            this.data = data;
       public PageReference getCaseChart(){

        Reports.reportResults results = Reports.ReportManager.runReport('00Oo0000009V8KJ',false);
        Reports.ReportMetadata rm = results.getReportMetadata();
        reportName = rm.getName();
        reportName1 = rm.getName();
        //get factMap
        Map<String,Reports.ReportFact> factMap = new Map<String,Reports.ReportFact>();
        Map<String,Reports.ReportFactWithSummaries> summaryMap = new Map<String,Reports.ReportFactWithSummaries>();
        factMap = results.getfactMap();
        Reports.Dimension dim = results.getGroupingsDown();
        List<Reports.GroupingValue> groupingValList = dim.getGroupings();

        finalMap = new Map<String,String>();
        caseReportList = new List<CaseReport>();
        dataWedgeList = new List<PieWedgeData>();
        for(Reports.GroupingValue grp: groupingValList){
            String factMapKey = grp.getKey() + '!T';
            Reports.ReportFactWithSummaries summaryDetails = (Reports.ReportFactWithSummaries)results.getFactMap().get(factMapKey);
            CaseReport cr = new CaseReport();
            cr.label = ''+grp.getValue();
            cr.value = ''+summaryDetails.getAggregates()[0].getValue();

            dataWedgeList.add(new PieWedgeData(''+grp.getValue(), Integer.valueOf(cr.value)));


        return null;

    public class CaseReport{
        public String Label {get;set;}
        public String Value {get;set;}

  • You have no merge fields in VF page referencing any assembled data fetched by controller – cropredy Apr 3 '17 at 5:32
  • that only i need to figure out since i am new to javascript. @Cropredy – RAT__ Apr 3 '17 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.