PptxGenJS-Demo

Home: https://github.com/gitbrent/PptxGenJS/

by Shirly Manor

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@latest/dist/pptxgen.min.js"></script>
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="./favicon-32x32.png" />
   
  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ROI Calculator</title>
            
            <button class="generate" onclick="createChartInPowerPoint();">Generate PowerPoint</button>
           
     
  
   
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js">
    <script src="./script.js"></script>

</head>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
    /* Colors */
:root {
    --bord-background-color--: #00474b;
    --nums--color--: #26c2ad;
    --light-color--: #9fe8e0;
    --input-color--: #dddedf;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    appearance: none;
}

body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #c5e4e7;
    height: 100vh;
    font-family: monospace;
}

.container {
    width: 80%;
    height: 900px;
    background-color: #fff;
    border-radius: 30px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
}
.container > div {
    flex-basis: calc(95% / 2);
}

    /* The Results Side */
.results {
    background-color: var(--bord-background-color--);
    border-radius: 25px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.up > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.up div:nth-child(1) {
    margin: 15px 0;
}
.results p:nth-child(1) {
    margin-bottom: 6px;
    color: white;
    font-weight: bold;
    font-size: 20px;
}
.results p:nth-child(2) {
    color: #ffffff70;
    font-size: 14px;
}
.amount {
    color: var(--nums--color--);
    font-size: 35px;
    font-weight: bold;
}

.results button {
    padding: 15px;
    font-weight: bold;
    color: var(--bord-background-color--);
    border: 0;
    background-color: var(--nums--color--);
    font-size: 18px;
    border-radius: 6px;
}

/* The Inputs Side */

.inputs > div {
    margin: 15px 0;
    position: relative;
}
.inputs p {
    font-size: 15px;
    font-weight: bold;
}
.inputs .arr input , .num-persons input{
    display: block;
    width: 95%;
    margin: 10px;
    padding: 5px 20px;
    text-align: right;
    position: relative;
    border: 0;
    background: #f3f8fb;
    border-radius: 6px;
    font-size: 25px;
    font-family:...

JavaScript

function createChartInPowerPoint() {
  // Create a new Presentation instance
  let pptx = new PptxGenJS();

  // Define the chart data as objects
  var chartData = [
    { 
      seriesName: "Series 1",
      categories: ["Category 1", "Category 2", "Category 3"],
      values: [5, 7, 3]
    },
    {
      seriesName: "Series 2",
      categories: ["Category 1", "Category 2", "Category 3"],
      values: [2, 4, 6]
    }
  ];

  // Create a Slide
  var slide = pptx.addSlide();
// slide.addChart(pptx.charts.BAR, data, {showLegend:true, chartColors:['0000FF']});
  // Add a Bar chart to the Slide
  slide.addChart(pptx.ChartType.Bar, chartData, {showLegend:true, chartColors:['0000FF']});

  // Save the presentation as a file
  pptx.writeFile({ fileName:'CustomerReport' }) 
}

// Call the function to create the bar chart in PowerPoint



// Call the function to create the chart in PowerPoint
//createChartInPowerPoint();


// Call the function to create the chart in PowerPoint
//createChartInPowerPoint();