pptx demo

by Exceeder

HTML

<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/dist/pptxgen.bundle.js"></script>

Weekly data:
<button onclick="createPpt()">
Create PowerPoint
</button>

JavaScript

window.createPpt = function() {
  var pptx = new PptxGenJS();
  //slide 1
  var slide = pptx.addNewSlide();
  slide.addText('Example Presentation Title', { x:1.5, y:1.5, fontSize:24, color:'363636' });
   slide.addText('Smaller Text Description', { x:1.5, y:2.0, fontSize:14, color:'777777' });
  
  //slide 2
  slide = pptx.addNewSlide();
  slide.addText('Demo: Table', { x:0.5, y:0.25, fontSize:18, fontFace:'Arial', color:'0088CC' });


  // TABLE 1: Multi-row table (each rows array element is an array of cells)
  // --------
  var headerOpts = { fill: 'CCCCCC', bold: true, valign:'t', align:'l', fontFace:'Verdana'   };
  var rows = [
      [ { text:'Week', options: headerOpts},
          { text:'Performance', options: headerOpts},
          { text:'ROI', options: headerOpts }],
      ['2018/12/01 - 2018/12/07', '123.45', '42.77'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['2018/12/08 - 2018/12/15', '197.88', '32.74'],
      ['this_is_not_really_a_week_just_a long text', '197.88', '32.74']
               
  ];
  var tabOpts = { x:0.5, y:1.0, w:9.0, fill:'F7F7F7', fontSize:18, color:'2f3f59', autoFit: true, shrinkText: true, align: 'r' };
  slide.addTable( rows, tabOpts );

 
 slide = pptx.addNewSlide();
slide.addText('Demo: Chart', { x:0.5, y:0.25, fontSize:16, fontFace:'Verdana', color:'0088CC' });

// Chart Type: LINE
var dataChartAreaLine = [
  {
    name  : 'Actual Sales',
    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
   ...