Skip to content

Commit

Permalink
Added Data Table to chart options (Issue #182)
Browse files Browse the repository at this point in the history
  • Loading branch information
GitBrent authored and GitBrent committed Sep 17, 2017
1 parent b36fd1e commit 108b091
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 37 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@

**Implemented Enhancements:**
- New image option: sizing [\#177](https://github.com/gitbrent/PptxGenJS/pull/177) ([kajda90](https://github.com/kajda90))
- New chart option: show Data Table [\#182](https://github.com/gitbrent/PptxGenJS/issues/182) ([akashkarpe](https://github.com/akashkarpe))
- New chart option: catAxisLabelFrequency [\#184](https://github.com/gitbrent/PptxGenJS/pull/184) ([kajda90](https://github.com/kajda90))






## [v1.8.0](https://github.com/gitbrent/pptxgenjs/tree/v1.8.0) (2017-09-12)
[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.7.0...v1.8.0)

Expand Down
18 changes: 12 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,16 +340,17 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
* Chart type can be any one of `pptx.charts`
* Currently: `pptx.charts.AREA`, `pptx.charts.BAR`, `pptx.charts.LINE`, `pptx.charts.PIE`, `pptx.charts.DOUGHNUT`

### Multi Chart Types
### Multi-Type Charts
* Chart types can be any one of `pptx.charts`, although `pptx.charts.AREA`, `pptx.charts.BAR`, and `pptx.charts.LINE` will give the best results.
* There should be at least two chart-types. There should always be two value axes and category axes.
* Multi Charts have a different function signature than standard. There are two parameters:
* `chartTypes`: array of objects, each with `type`, `data`, and `options` objects.
* `chartTypes`: Array of objects, each with `type`, `data`, and `options` objects.
* `options`: Standard options as used with single charts. Can include axes options.
* Columns makes the most sense in general. Line charts cannot be rotated to match up with horizontal bars (a PowerPoint limitation).
* Can optionally have a secondary value axis.
* If there is secondary value axis, a secondary category axis is required in order to render, but currently always uses the primary labels. It is recommended to use `catAxisHidden: true` on the secondary category axis.
* Standard options are used, and the chart-type-options are mixed in to each.

```javascript
// Syntax
slide.addChart({MULTI_TYPES_AND_DATA}, {OPTIONS_AND_AXES});
Expand All @@ -362,15 +363,20 @@ slide.addChart({MULTI_TYPES_AND_DATA}, {OPTIONS_AND_AXES});
| `y` | number | inches | `1.0` | vertical location | 0-n OR 'n%'. |
| `w` | number | inches | `50%` | width | 0-n OR 'n%'. (Ex: `{w:'50%'}` will make object 50% width of the Slide) |
| `h` | number | inches | `50%` | height | 0-n OR 'n%'. |
| `border` | object | | | chart border | object with `pt` and `color` values. Ex: `border:{pt:'1', color:'f1f1f1'}` |
| `border` | object | | | chart border | object with `pt` and `color` values. Ex: `border:{pt:'1', color:'f1f1f1'}` |
| `chartColors` | array | | | data colors | array of hex color codes. Ex: `['0088CC','FFCC00']` |
| `chartColorsOpacity` | number | percent | `100` | data color opacity percent | 1-100. Ex: `{ chartColorsOpacity:50 }` |
| `fill` | string | | | fill/background color | hex color code. Ex: `{ fill:'0088CC' }` |
| `holeSize` | number | percent | `50` | doughnut hole size | 1-100. Ex: `{ holeSize:50 }` |
| `invertedColors`| array | | | data colors for negative numbers | array of hex color codes. Ex: `['0088CC','FFCC00']` |
| `legendFontSize`| number | points | `10` | legend font size | 1-256. Ex: `{ legendFontSize: 13 }`|
| `legendPos` | string | | `r` | chart legend position | `b` (bottom), `tr` (top-right), `l` (left), `r` (right), `t` (top) |
| `layout` | object | | | positioning plot within chart area | object with `x`, `y`, `w` and `h` props, all in range 0-1 (proportionally related to the chart size). Ex: `{x: 0, y: 0, w: 1, h: 1}` fully expands plot to the chart area |
| `layout` | object | | | positioning plot within chart area | object with `x`, `y`, `w` and `h` props, all in range 0-1 (proportionally related to the chart size). Ex: `{x: 0, y: 0, w: 1, h: 1}` fully expands chart within the plot area |
| `showDataTable` | boolean | | `false` | show Data Table under the chart | `true` or `false` (Not available for Pie/Doughnut charts) |
| `showDataTableKeys` | boolean | | `true` | show Data Table Keys (color blocks) | `true` or `false` (Not available for Pie/Doughnut charts) |
| `showDataTableHorzBorder` | boolean | | `true` | show Data Table horizontal borders | `true` or `false` (Not available for Pie/Doughnut charts) |
| `showDataTableVertBorder` | boolean | | `true` | show Data Table vertical borders | `true` or `false` (Not available for Pie/Doughnut charts) |
| `showDataTableOutline` | boolean | | `true` | show Data Table table outline | `true` or `false` (Not available for Pie/Doughnut charts) |
| `showLabel` | boolean | | `false` | show data labels | `true` or `false` |
| `showLegend` | boolean | | `false` | show chart legend | `true` or `false` |
| `showPercent` | boolean | | `false` | show data percent | `true` or `false` |
Expand Down Expand Up @@ -436,8 +442,8 @@ slide.addChart({MULTI_TYPES_AND_DATA}, {OPTIONS_AND_AXES});
| `gridLineColor` | string | | `000000` | grid line color | hex color code. Ex: `{ gridLineColor:'0088CC' }` |
| `lineDataSymbol` | string | | `circle` | symbol used on line marker | `circle`,`dash`,`diamond`,`dot`,`none`,`square`,`triangle` |
| `lineDataSymbolSize` | number | points | `6` | size of line data symbol | 1-256. Ex: `{ lineDataSymbolSize:12 }` |
| `lineDataSymbolLineSize`| number | points | `0.75` | size of data symbol outline | 1-256. Ex: `{ lineDataSymbolLineSize:12 }` |
| `lineDataSymbolLineColor`| number | points | `0.75` | size of data symbol outline | 1-256. Ex: `{ lineDataSymbolLineSize:12 }` |
| `lineDataSymbolLineSize` | number | points | `0.75` | size of data symbol outline | 1-256. Ex: `{ lineDataSymbolLineSize:12 }` |
| `lineDataSymbolLineColor`| number | points | `0.75` | size of data symbol outline | 1-256. Ex: `{ lineDataSymbolLineSize:12 }` |
| `shadow` | object | | | data element shadow options | `'none'` or [shadow options](#chart-element-shadow-options) |
| `lineSize` | number | points | `2` | thickness of data line (0 is no line) | 0-256. Ex: `{ lineSize: 1 }` |
| `valueBarColors` | boolean | | `false` | forces chartColors on multi-data-series | `true` or `false` |
Expand Down
83 changes: 59 additions & 24 deletions dist/pptxgen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ if ( NODEJS ) {
var PptxGenJS = function(){
// APP
var APP_VER = "1.9.0-beta";
var APP_REL = "20170914";
var APP_REL = "20170916";

// CONSTANTS
var MASTER_OBJECTS = {
Expand Down Expand Up @@ -136,16 +136,16 @@ var PptxGenJS = function(){
var gObjPptx = {};

// B: Set Presentation Property Defaults
gObjPptx.author = 'PptxGenJS';
gObjPptx.company = 'PptxGenJS';
gObjPptx.revision = '1';
gObjPptx.subject = 'PptxGenJS Presentation';
gObjPptx.title = 'PptxGenJS Presentation';
gObjPptx.fileName = 'Presentation';
gObjPptx.fileExtn = '.pptx';
gObjPptx.author = 'PptxGenJS';
gObjPptx.company = 'PptxGenJS';
gObjPptx.revision = '1';
gObjPptx.subject = 'PptxGenJS Presentation';
gObjPptx.title = 'PptxGenJS Presentation';
gObjPptx.fileName = 'Presentation';
gObjPptx.fileExtn = '.pptx';
gObjPptx.pptLayout = LAYOUTS['LAYOUT_16x9'];
gObjPptx.rtlMode = false;
gObjPptx.slides = [];
gObjPptx.rtlMode = false;
gObjPptx.slides = [];
/** @type {object} master slide layout object */
gObjPptx.masterSlide = {
slide: {},
Expand Down Expand Up @@ -174,7 +174,7 @@ var PptxGenJS = function(){
this.masters = ( typeof gObjPptxMasters !== 'undefined' ? gObjPptxMasters : {} );
/* LEGACY/DEPRECATED ^^^ - WILL BE REMOVED in 2.0 */
// Declare only after `this.colors` is initialized
var SCHEME_COLOR_NAMES = Object.keys(this.colors).map(function(clrKey) {return this.colors[clrKey]}.bind(this));
var SCHEME_COLOR_NAMES = Object.keys(this.colors).map(function(clrKey){return this.colors[clrKey]}.bind(this));

// D: Fall back to base shapes if shapes file was not linked
gObjPptxShapes = ( gObjPptxShapes || this.shapes );
Expand Down Expand Up @@ -443,7 +443,7 @@ var PptxGenJS = function(){
var tmpOpt;
var tmpData = [], options;
if (Array.isArray(type)) {
// For multi-charts there needs to be data for each type,
// For multi-type charts there needs to be data for each type,
// as well as a single data source for non-series operations.
// The data is indexed below to keep the data in order when segmented
// into types.
Expand All @@ -460,7 +460,7 @@ var PptxGenJS = function(){
options = ( tmpOpt && typeof tmpOpt === 'object' ? tmpOpt : {} );

// STEP 1: TODO: check for reqd fields, correct type, etc
// inType in CHART_TYPES
// `type` exists in CHART_TYPES
// Array.isArray(data)
/*
if ( Array.isArray(rel.data) && rel.data.length > 0 && typeof rel.data[0] === 'object'
Expand Down Expand Up @@ -523,11 +523,16 @@ var PptxGenJS = function(){
correctShadowOptions(options.shadow);

// C: Options: plotArea
options.showLabel = (options.showLabel == true || options.showLabel == false ? options.showLabel : false);
options.showLegend = (options.showLegend == true || options.showLegend == false ? options.showLegend : false);
options.showPercent = (options.showPercent == true || options.showPercent == false ? options.showPercent : true );
options.showTitle = (options.showTitle == true || options.showTitle == false ? options.showTitle : false);
options.showValue = (options.showValue == true || options.showValue == false ? options.showValue : false);
options.showDataTable = (options.showDataTable == true || options.showDataTable == false ? options.showDataTable : false);
options.showDataTableHorzBorder = (options.showDataTableHorzBorder == true || options.showDataTableHorzBorder == false ? options.showDataTableHorzBorder : true );
options.showDataTableVertBorder = (options.showDataTableVertBorder == true || options.showDataTableVertBorder == false ? options.showDataTableVertBorder : true );
options.showDataTableOutline = (options.showDataTableOutline == true || options.showDataTableOutline == false ? options.showDataTableOutline : true );
options.showDataTableKeys = (options.showDataTableKeys == true || options.showDataTableKeys == false ? options.showDataTableKeys : true );
options.showLabel = (options.showLabel == true || options.showLabel == false ? options.showLabel : false);
options.showLegend = (options.showLegend == true || options.showLegend == false ? options.showLegend : false);
options.showPercent = (options.showPercent == true || options.showPercent == false ? options.showPercent : true );
options.showTitle = (options.showTitle == true || options.showTitle == false ? options.showTitle : false);
options.showValue = (options.showValue == true || options.showValue == false ? options.showValue : false);

// D: Options: chart
options.barGapWidthPct = (!isNaN(options.barGapWidthPct) && options.barGapWidthPct >= 0 && options.barGapWidthPct <= 1000 ? options.barGapWidthPct : 150);
Expand Down Expand Up @@ -2248,7 +2253,6 @@ var PptxGenJS = function(){
/* ----------------------------------------------------------------------- */

// STEP 1: Create chart

{
var strXml = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
// CHARTSPACE: BEGIN vvv
Expand Down Expand Up @@ -2329,18 +2333,49 @@ var PptxGenJS = function(){

rel.opts.hasArea = hasArea(rel.opts.type);

if(rel.opts.valAxes){
if ( rel.opts.valAxes ) {
strXml += makeValueAxis(mix(rel.opts, rel.opts.valAxes[0]), AXIS_ID_VALUE_PRIMARY, AXIS_ID_CATEGORY_PRIMARY);
if (rel.opts.valAxes[1]) {
if ( rel.opts.valAxes[1] ) {
strXml += makeValueAxis(mix(rel.opts, rel.opts.valAxes[1]), AXIS_ID_VALUE_SECONDARY, AXIS_ID_CATEGORY_SECONDARY);
}
} else {
}
else {
strXml += makeValueAxis(rel.opts, AXIS_ID_VALUE_PRIMARY, AXIS_ID_CATEGORY_PRIMARY, AXIS_ID_CATEGORY_SECONDARY);
}
}

// C: Chart Properties + Options: Fill, Border, Legend
// C: Chart Properties and plotArea Options: Border, Data Table, Fill, Legend
{
// NOTE: DataTable goes between '</c:valAx>' and '<c:spPr>'
if ( rel.opts.showDataTable ) {
strXml += '<c:dTable>';
strXml += ' <c:showHorzBorder val="'+ (rel.opts.showDataTableHorzBorder == false ? 0 : 1) +'"/>';
strXml += ' <c:showVertBorder val="'+ (rel.opts.showDataTableVertBorder == false ? 0 : 1) +'"/>';
strXml += ' <c:showOutline val="'+ (rel.opts.showDataTableOutline == false ? 0 : 1) +'"/>';
strXml += ' <c:showKeys val="'+ (rel.opts.showDataTableKeys == false ? 0 : 1) +'"/>';
strXml += ' <c:spPr>';
strXml += ' <a:noFill/>';
strXml += ' <a:ln w="9525" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="tx1"><a:lumMod val="15000"/><a:lumOff val="85000"/></a:schemeClr></a:solidFill><a:round/></a:ln>';
strXml += ' <a:effectLst/>';
strXml += ' </c:spPr>';
strXml += ' <c:txPr>\
<a:bodyPr rot="0" spcFirstLastPara="1" vertOverflow="ellipsis" vert="horz" wrap="square" anchor="ctr" anchorCtr="1"/>\
<a:lstStyle/>\
<a:p>\
<a:pPr rtl="0">\
<a:defRPr sz="1197" b="0" i="0" u="none" strike="noStrike" kern="1200" baseline="0">\
<a:solidFill><a:schemeClr val="tx1"><a:lumMod val="65000"/><a:lumOff val="35000"/></a:schemeClr></a:solidFill>\
<a:latin typeface="+mn-lt"/>\
<a:ea typeface="+mn-ea"/>\
<a:cs typeface="+mn-cs"/>\
</a:defRPr>\
</a:pPr>\
<a:endParaRPr lang="en-US"/>\
</a:p>\
</c:txPr>\
</c:dTable>';
}

strXml += ' <c:spPr>';

// OPTION: Fill
Expand Down Expand Up @@ -3676,7 +3711,7 @@ var PptxGenJS = function(){
* Gets the version of this library
*/
this.getVersion = function getVersion() {
return APP_VER;
return APP_VER +'.'+ APP_REL;
};

/**
Expand Down
18 changes: 12 additions & 6 deletions examples/pptxgenjs-demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* NAME: pptxgenjs-demo.js
* AUTH: Brent Ely (https://github.com/gitbrent/)
* DATE: Sep 14, 2017
* DATE: Sep 16, 2017
* DESC: Common test/demo slides for all library features
* DEPS: Loaded by `pptxgenjs-demo.js` and `nodejs-demo.js`
*/
Expand Down Expand Up @@ -834,7 +834,7 @@ function genSlides_Chart(pptx) {
// SLIDE 3: Stacked Bar Chart ----------------------------------------------------------
function slide3() {
var slide = pptx.addNewSlide();
slide.addTable( [ [{ text:'Chart Examples: Bar Chart: Stacked/PercentStacked', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } );
slide.addTable( [ [{ text:'Chart Examples: Bar Chart: Stacked/PercentStacked and Data Table', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } );

var arrDataRegions = [
{
Expand Down Expand Up @@ -908,7 +908,12 @@ function genSlides_Chart(pptx) {
catAxisHidden: true,
valAxisHidden: true,
showTitle : false,
layout : {x:0.1, y:0.1, w:1, h:1}
layout : {x:0.1, y:0.1, w:1, h:1},
showDataTable: true,
showDataTableKeys: true,
showDataTableHorzBorder: false,
showDataTableVertBorder: false,
showDataTableOutline: false
};
slide.addChart( pptx.charts.BAR, arrDataRegions, optsChartBar3 );

Expand All @@ -922,11 +927,12 @@ function genSlides_Chart(pptx) {
catAxisLabelFontFace: 'Times',
catAxisLabelFontSize: 12,
catAxisOrientation : 'minMax',

chartColors: ['5DA5DA','FAA43A'],

showLegend: true,
legendPos : 't'
legendPos : 't',

showDataTable: true,
showDataTableKeys: false
};
slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar4 );
}
Expand Down

0 comments on commit 108b091

Please sign in to comment.