SharePoint how to export chart to Excel

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/289493

  •  20-02-2021
  •  | 
  •  

Domanda

Good day,

I have the script to show ViewsLastMonths2 and ViewsLastMonths2Unique on SP 2016 page. I show ViewsLastMonths2 on diagram by Chart.js https://www.chartjs.org/

I export ViewsLastMonths2 data to Excel. But I can't export the Chart to excel.

How can I show in Excel file ? This information didn't help https://docs.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-charts

My script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<style type="text/css">
.recentitems {
padding: 5px;
margin: 2px;
}
 
a.itemtitle {
font-style: italic;
font-weight: 500;
}
 
#visited h2 {
text-align: center;
font-size: 24px;
font-weight: 600;
}

#myChart{
    max-width: 750px;
    max-height: 550px;

}
 
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MostRecentItems</title>
        <link rel="stylesheet" href="/SiteAssets/Script/jquery-ui.css" />
<script src="/SiteAssets/Script/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/SiteAssets/Script/jquery-ui.min.js"></script>
<script src="/SiteAssets/Script/chart/Chart.js" type="text/javascript"></script>
<script src="/SiteAssets/Script/jquery-3.1.1.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
$(document).ready(function () {
 
 var titleLabel=[];
 var titleView=[];
 
 $.ajax({
 url: "<My_Site>/_api/search/query?querytext='Path:<My_Site>/Lists/1/+ContentClass:STS_ListItem+ContentClass:STS_ListItem_DocumentLibrary'&selectproperties='Title,path,ViewsLifeTime,ViewsLastMonths2,ViewsLastMonths2Unique'&rowlimit=5000&sortlist='ViewsLifeTime:descending'",
 
 type: "GET",
 headers: {
 "Accept": "application/json;odata=verbose"
 },
 success: function(data) {
 //log the json to analyze and visualize

 var items=data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;

 //log the actual 10 items that is going to be displayed
 //console.log(items);
 
 var i=0;
 
    var data = [];
 
 $.each(items, function(index, item) { 
 
 var ret= items[index].Cells.results[6].Value;
 
 var title = keyValue(this, 'Title');
 
 var docDesc = keyValue(this, 'DocDescISM');
 
  var ViewsLastMonths2 = keyValue(this, 'ViewsLastMonths2');
  
   var ViewsLastMonths2Unique = keyValue(this, 'ViewsLastMonths2Unique');
 
 
 //replacing any spaces in the URL
 var itemlinks= ret.replace(/ /g,"%20");
 
    // if (i<10){
            data.push({title: title, docDesc:docDesc, ViewsLastMonths2:ViewsLastMonths2, ViewsLastMonths2Unique:ViewsLastMonths2Unique, itemlinks:itemlinks});
    
    // }

 });
 
 data.sort(function(a, b){  
    return b.ViewsLastMonths2-a.ViewsLastMonths2
    })
  $.each(data, function(i,v){
      if (i<10){
             titleLabel.push(v.title);
         titleView.push(v.ViewsLastMonths2);
         $('#popular tr:last').after('<tr><td><a target="_blank" class=itemtitle href='+v.itemlinks+'>'+v.title+'</a></td><td>'+ v.ViewsLastMonths2 +'</td><td>' + v.ViewsLastMonths2Unique + '</td></tr>');
         i++;
      }
});
 
 
 
 var ctx = $('#myChart');

 
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [titleLabel[0], titleLabel[1], titleLabel[2], titleLabel[3], titleLabel[4], titleLabel[5], titleLabel[6], titleLabel[7], titleLabel[8], titleLabel[9]],
            datasets: [{
                label: '# of Votes',
                data: [titleView[0], titleView[1], titleView[2], titleView[3], titleView[4], titleView[5], titleView[6], titleView[7], titleView[8], titleView[9]],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(50, 255, 50, 0.2)',
                    'rgba(206, 47, 202, 0.2)',
                    'rgba(166, 206, 65, 0.2)',
                    'rgba(21, 1, 133, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(50, 255, 50, 1)',
                    'rgba(206, 47, 202, 1)',
                    'rgba(166, 206, 65, 1)',
                    'rgba(21, 1, 133, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}

 
 
 });
 
 
    function keyValue(row, fldName) {
        var ret = null;
        $.each(row.Cells.results, function () {
            if (this.Key == fldName) {
                ret = this.Value;
            }
        });
        return ret;
    } 
 
 

 });
  function exportToExcel() {
             
            var detailsTable = document.getElementsByClassName("popular");

            var r_count = detailsTable[0].rows.length;
          

            var oExcel = new ActiveXObject("Excel.Application");

            var oBook = oExcel.Workbooks.Add;

            var oSheet = oBook.Worksheets(1);
            
            for (var y = 0; y < detailsTable[0].rows.length; y++){

                for (var x = 0; x < detailsTable[0].rows(y).cells.length; x++) {

                    oSheet.Cells(y + 1, x + 1) = detailsTable[0].rows(y).cells(x).innerText;

                }

            }
            

         var sheet = oSheet;
            var dataRange = sheet.getRange("C2:D11");
            var chart = sheet.charts.add("Line", dataRange, "auto");
                chart.title.text = "Sales Data";
    chart.legend.position = "right";
    chart.legend.format.fill.setSolidColor("white");
    chart.dataLabels.format.font.size = 15;
    chart.dataLabels.format.font.color = "black";

            

            oExcel.Visible = true;

            oExcel.UserControl = true;

        }
</script>
 
</head>
 
<body>
<br/>
<br/>
<br/>
<a href="javascript:exportToExcel();">Export to Excel</a>
<br/>
<br/>
<br/>
<table id="popular" class="popular" style="width:100%">
         <tr>
            <th>Title</th>
            <th>View Count</th>
            <th>Unique</th>
         </tr>
</table>
<br/>
<canvas id="myChart" width="10px" height="10px"></canvas>
</body>
 
</html>

Nessuna soluzione corretta

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a sharepoint.stackexchange
scroll top