diff --git a/CHANGELOG.md b/CHANGELOG.md index 98b4affdb..8654b5505 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,10 @@ - Shadow corrections bugfix [\#136](https://github.com/gitbrent/PptxGenJS/pull/136) ([kajda90](https://github.com/kajda90)) **Implemented Enhancements:** - - +- New chart feature: layout option [\#141](https://github.com/gitbrent/PptxGenJS/pull/141) ([kajda90](https://github.com/kajda90)) +- Charts: Optional displaying gridlines and axes [\#143](https://github.com/gitbrent/PptxGenJS/pull/143) ([kajda90](https://github.com/kajda90)) +- New chart type: doughnut charts [\#142](https://github.com/gitbrent/PptxGenJS/pull/142) ([kyrrigle](https://github.com/kyrrigle)) +- New chart features: Axis Titles [\#144](https://github.com/gitbrent/PptxGenJS/pull/144) ([kyrrigle](https://github.com/kyrrigle)) diff --git a/README.md b/README.md index c2c75544c..c6dd08c8b 100644 --- a/README.md +++ b/README.md @@ -322,21 +322,22 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS}); ### Chart Types * Chart type can be any one of `pptx.charts` -* Currently: `pptx.charts.AREA`, `pptx.charts.BAR`, `pptx.charts.LINE`, `pptx.charts.PIE` +* Currently: `pptx.charts.AREA`, `pptx.charts.BAR`, `pptx.charts.LINE`, `pptx.charts.PIE`, `pptx.charts.DOUGHNUT` ### Chart Size/Formatting Options | Option | Type | Unit | Default | Description | Possible Values | -| :-------------- | :------ | :------ | :-------- | :-------------------- | :--------------- | +| :-------------- | :------ | :------ | :-------- | :--------------------------------- | :--------------- | | `x` | number | inches | `1.0` | horizontal location | 0-n OR 'n%'. (Ex: `{x:'50%'}` will place object in the middle of the Slide) | | `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'}` | -| `chartColors` | array | | | data color | array of hex color codes. Ex: `['0088CC','FFCC00']` | -| `invertedColors`| array | | | colors when value is < 0 | array of hex color codes. Ex: `['0088CC','FFCC00']` | +| `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 }` | | `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 | | `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` | @@ -346,26 +347,39 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS}); | `titleColor` | string | | `000000` | title color | hex color code. Ex: `{ titleColor:'0088CC' }` | | `titleFontFace` | string | | `Arial` | font face | font name. Ex: `{ titleFontFace:'Arial' }` | | `titleFontSize` | number | points | `18` | font size | 1-256. Ex: `{ titleFontSize:12 }` | +| `titleRotate` | integer | degrees | | title rotation degrees | 0-360. Ex: `{ titleRotate:45 }` | ### Chart Axis Options -| Option | Type | Unit | Default | Description | Possible Values | -| :--------------------- | :------ | :------ | :-------- | :---------------------- | :----------------------------------------- | -| `axisLabelFormatCode` | string | | | format to show axis value | format string. Ex: `{ axisLabelFormatCode:'#,##0' }` [MicroSoft Number Format Codes](https://support.office.com/en-us/article/Number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68) | -| `axisLineColor` | string | | `888888` | axis line color | format string. Ex: `{ axisLineColor:'00FFFF' }` | -| `catAxisLabelColor` | string | | `000000` | category-axis color | hex color code. Ex: `{ catAxisLabelColor:'0088CC' }` | -| `catAxisLabelFontFace` | string | | `Arial` | category-axis font face | font name. Ex: `{ titleFontFace:'Arial' }` | -| `catAxisLabelFontSize` | number | points | `18` | category-axis font size | 1-256. Ex: `{ titleFontSize:12 }` | +| Option | Type | Unit | Default | Description | Possible Values | +| :--------------------- | :------ | :------ | :-------- | :----------------------- | :----------------------------------------- | +| `catAxisHidden` | boolean | | `false` | hide category-axis | `true` or `false` | +| `catAxisLabelColor` | string | | `000000` | category-axis color | hex color code. Ex: `{ catAxisLabelColor:'0088CC' }` | +| `catAxisLabelFontFace` | string | | `Arial` | category-axis font face | font name. Ex: `{ titleFontFace:'Arial' }` | +| `catAxisLabelFontSize` | number | points | `18` | category-axis font size | 1-256. Ex: `{ titleFontSize:12 }` | | `catAxisOrientation` | string | | `minMax` | category-axis orientation | `maxMin` (high->low) or `minMax` (low->high) | -| `gridLineColor` | string | | `888888` | grid-line color | hex color code. Ex: `{ gridLineColor:'0088CC' }` | -| `catAxisLabelPos` | string | string | `nextTo` | axis label position | `low`, `high`, or `nextTo` . Ex: `{ tickLblPos: 'low' }` | -| `valAxisLabelColor` | string | | `000000` | value-axis color | hex color code. Ex: `{ valAxisLabelColor:'0088CC' }` | -| `valAxisLabelFontFace` | string | | `Arial` | value-axis font face | font name. Ex: `{ titleFontFace:'Arial' }` | -| `valAxisLabelFontSize` | number | points | `18` | value-axis font size | 1-256. Ex: `{ titleFontSize:12 }` | +| `catAxisTitle` | string | | `Axis Title` | axis title | a string. Ex: `{ catAxisTitle:'Regions' }` | +| `catAxisTitleColor` | string | | `000000` | title color | hex color code. Ex: `{ catAxisTitleColor:'0088CC' }` | +| `catAxisTitleFontFace` | string | | `Arial` | font face | font name. Ex: `{ catAxisTitleFontFace:'Arial' }` | +| `catAxisTitleFontSize` | number | points | | font size | 1-256. Ex: `{ catAxisTitleFontSize:12 }` | +| `catAxisTitleRotate` | integer | degrees | | title rotation degrees | 0-360. Ex: `{ catAxisTitleRotate:45 }` | +| `catGridLine` | object | | `none` | category grid line style | object with properties `size` (pt), `color` and `style` (`'solid'`, `'dash'` or `'dot'`) or `'none'` to hide | +| `showCatAxisTitle` | boolean | | `false` | show category (vertical) title | `true` or `false`. Ex:`{ showCatAxisTitle:true }` | +| `showValAxisTitle` | boolean | | `false` | show values (horizontal) title | `true` or `false`. Ex:`{ showValAxisTitle:true }` | +| `valAxisHidden` | boolean | | `false` | hide value-axis | `true` or `false` | +| `valAxisLabelColor` | string | | `000000` | value-axis color | hex color code. Ex: `{ valAxisLabelColor:'0088CC' }` | +| `valAxisLabelFontFace` | string | | `Arial` | value-axis font face | font name. Ex: `{ titleFontFace:'Arial' }` | +| `valAxisLabelFontSize` | number | points | `18` | value-axis font size | 1-256. Ex: `{ titleFontSize:12 }` | | `valAxisLabelFormatCode` | string | | `General` | value-axis number format | format string. Ex: `{ axisLabelFormatCode:'#,##0' }` [MicroSoft Number Format Codes](https://support.office.com/en-us/article/Number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68) | -| `valAxisLineShow` | boolean | | true | show/hide axis line | `true` or `false` | | `valAxisMajorUnit` | number | float | `1.0` | value-axis tick steps | Float or whole number. Ex: `{ majorUnit:0.2 }` | | `valAxisMaxVal` | number | | | value-axis maximum value | 1-N. Ex: `{ valAxisMaxVal:125 }` | -| `valAxisOrientation` | string | | `minMax` | value-axis orientation | `maxMin` (high->low) or `minMax` (low->high) | +| `valAxisMinVal` | number | | | value-axis minimum value | 1-N. Ex: `{ valAxisMinVal: -10 }` | +| `valAxisOrientation` | string | | `minMax` | value-axis orientation | `maxMin` (high->low) or `minMax` (low->high) | +| `valAxisTitle` | string | | `Axis Title` | axis title | a string. Ex: `{ valAxisTitle:'Sales (USD)' }` | +| `valAxisTitleColor` | string | | `000000` | title color | hex color code. Ex: `{ valAxisTitleColor:'0088CC' }` | +| `valAxisTitleFontFace` | string | | `Arial` | font face | font name. Ex: `{ valAxisTitleFontFace:'Arial' }` | +| `valAxisTitleFontSize` | number | points | | font size | 1-256. Ex: `{ valAxisTitleFontSize:12 }` | +| `valAxisTitleRotate` | integer | degrees | | title rotation degrees | 0-360. Ex: `{ valAxisTitleRotate:45 }` | +| `valGridLine` | object | | | value grid line style | _the same as `catGridLine`_ | ### Chart Data Options | Option | Type | Unit | Default | Description | Possible Values | @@ -381,7 +395,6 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS}); | `dataLabelPosition` | string | | `bestFit` | data label position | `bestFit`,`b`,`ctr`,`inBase`,`inEnd`,`l`,`outEnd`,`r`,`t` | | `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 }` | -| `valueBarColors` | boolean | | `false` | forces chartColors on multi-data-series | `true` or `false` | ### Chart Examples ```javascript diff --git a/dist/pptxgen.js b/dist/pptxgen.js index 423c2e834..005d065fd 100644 --- a/dist/pptxgen.js +++ b/dist/pptxgen.js @@ -62,7 +62,7 @@ if ( NODEJS ) { var PptxGenJS = function(){ // CONSTANTS var APP_VER = "1.8.0-beta"; - var APP_REL = "20170810"; + var APP_REL = "20170814"; // var MASTER_OBJECTS = { 'chart': { name:'chart' }, @@ -70,7 +70,7 @@ var PptxGenJS = function(){ 'line' : { name:'line' }, 'rect' : { name:'rect' }, 'text' : { name:'text' } - } + }; var LAYOUTS = { 'LAYOUT_4x3' : { name: 'screen4x3', width: 9144000, height: 6858000 }, 'LAYOUT_16x9' : { name: 'screen16x9', width: 9144000, height: 5143500 }, @@ -95,8 +95,9 @@ var PptxGenJS = function(){ 'AREA': { 'displayName':'Area Chart', 'name':'area' }, 'BAR' : { 'displayName':'Bar Chart' , 'name':'bar' }, 'LINE': { 'displayName':'Line Chart', 'name':'line' }, - 'PIE' : { 'displayName':'Pie Chart' , 'name':'pie' } - } + 'PIE' : { 'displayName':'Pie Chart' , 'name':'pie' }, + 'DOUGHNUT': { 'displayName':'Doughnut Chart' , 'name':'doughnut' } + }; //var RAINBOW_COLORS = ['8A56E2','CF56E2','E256AE','E25668','E28956','E2CF56','AEE256','68E256','56E289','56E2CF','56AEE2','5668E2']; var PIECHART_COLORS = ['5DA5DA','FAA43A','60BD68','F17CB0','B2912F','B276B2','DECF3F','F15854','A7A7A7', '5DA5DA','FAA43A','60BD68','F17CB0','B2912F','B276B2','DECF3F','F15854','A7A7A7']; var BARCHART_COLORS = ['C0504D','4F81BD','9BBB59','8064A2','4BACC6','F79646','628FC6','C86360', 'C0504D','4F81BD','9BBB59','8064A2','4BACC6','F79646','628FC6','C86360']; @@ -114,7 +115,9 @@ var PptxGenJS = function(){ // var DEF_CELL_MARGIN_PT = [3, 3, 3, 3]; // TRBL-style var DEF_FONT_SIZE = 12; + var DEF_FONT_TITLE_SIZE = 18; var DEF_SLIDE_MARGIN_IN = [0.5, 0.5, 0.5, 0.5]; // TRBL-style + var DEF_CHART_GRIDLINE = { color: "888888", style: "solid", size: 1 }; // A: Create internal pptx object var gObjPptx = {}; @@ -907,6 +910,41 @@ var PptxGenJS = function(){ return arrObjSlides; } + /** + * Checks grid line properties and correct them if needed. + * @param {Object} glOpts chart.gridLine options + */ + function correctGridLineOptions(glOpts) { + if ( !glOpts || glOpts === 'none' ) return; + if ( glOpts.size !== undefined && (isNaN(Number(glOpts.size)) || glOpts.size <= 0) ) { + console.warn('Warning: chart.gridLine.size must be greater than 0.'); + delete glOpts.size; // delete prop to used defaults + } + if ( glOpts.style && ['solid', 'dash', 'dot'].indexOf(glOpts.style) < 0 ) { + console.warn('Warning: chart.gridLine.style options: `solid`, `dash`, `dot`.'); + delete glOpts.style; + } + } + + /** + * @param {Object} glOpts {size, color, style} + * @param {Object} defaults {size, color, style} + * @param {String} type "major"(default) | "minor" + */ + function createGridLineElement(glOpts, defaults, type) { + type = type || 'major'; + var tagName = 'c:'+ type + 'Gridlines'; + strXml = '<'+ tagName + '>'; + strXml += ' '; + strXml += ' '; + strXml += ' '; // should accept scheme colors as implemented in PR 135 + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ''; + return strXml; + } + /* ======================================================================================================= | # # # # # ##### @@ -946,37 +984,34 @@ var PptxGenJS = function(){ // OPTION: Title if ( rel.opts.showTitle ) { - strXml += ''; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '+ (decodeXmlEntities(rel.opts.title) || '') +''; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ''; + strXml += genXmlTitle({ + title: rel.opts.title || 'Chart Title', + fontSize: rel.opts.titleFontSize || DEF_FONT_TITLE_SIZE, + color: rel.opts.titleColor, + fontFace: rel.opts.titleFontFace, + rotate: rel.opts.titleRotate + }); strXml += ''; } strXml += ''; // IMPORTANT: Dont specify layout to enable auto-fit: PPT does a great job maximizing space with all 4 TRBL locations + if ( rel.opts.layout ) { + strXml += ''; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ''; + } + else { strXml += ''; + } // A: CHART TYPES ----------------------------------------------------------- switch ( rel.opts.type ) { @@ -1054,19 +1089,17 @@ var PptxGenJS = function(){ // Color bar chart bars various colors // Allow users with a single data set to pass their own array of colors (check for this using != ours) - if (( rel.data.length === 1 || rel.opts.valueBarColors ) && rel.opts.chartColors != BARCHART_COLORS ) { + if ( rel.data.length === 1 && rel.opts.chartColors != BARCHART_COLORS ) { // Series Data Point colors - obj.values.forEach(function (value, index) { - var invert = rel.opts.invertedColors ? 0 : 1; - var colors = value < 0 ? rel.opts.invertedColors : rel.opts.chartColors; + obj.values.forEach(function(value,index){ strXml += ' '; strXml += ' '; - strXml += ' '; - strXml += ' '; - strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; strXml += ' '; - strXml += ' '; - strXml += ' '; + strXml += ' '; + strXml += ' '; strXml += ' '; strXml += ' '; strXml += ' '; @@ -1145,14 +1178,26 @@ var PptxGenJS = function(){ // B: "Category Axis" { strXml += ''; + if (rel.opts.showCatAxisTitle) { + strXml += genXmlTitle({ + title: rel.opts.catAxisTitle || 'Axis Title', + fontSize: rel.opts.catAxisTitleFontSize, + color: rel.opts.catAxisTitleColor, + fontFace: rel.opts.catAxisTitleFontFace, + rotate: rel.opts.catAxisTitleRotate + }); + } strXml += ' '; strXml += ' '; - strXml += ' '; + strXml += ' '; strXml += ' '; + if ( rel.opts.catGridLine !== 'none' ) { + strXml += createGridLineElement(rel.opts.catGridLine, DEF_CHART_GRIDLINE); + } strXml += ' '; strXml += ' '; strXml += ' '; - strXml += ' '; + strXml += ' '; strXml += ' '; strXml += ' '; strXml += ' '; @@ -1179,42 +1224,30 @@ var PptxGenJS = function(){ // C: "Value Axis" { strXml += ''; + if (rel.opts.showValAxisTitle) { + strXml += genXmlTitle({ + title: rel.opts.valAxisTitle || 'Axis Title', + fontSize: rel.opts.valAxisTitleFontSize, + color: rel.opts.valAxisTitleColor, + fontFace: rel.opts.valAxisTitleFontFace, + rotate: rel.opts.valAxisTitleRotate + }); + } strXml += ' '; strXml += ' '; strXml += ' '; if (rel.opts.valAxisMaxVal) strXml += ''; + if (rel.opts.valAxisMinVal) strXml += ''; strXml += ' '; - strXml += ' '; + strXml += ' '; strXml += ' '; - - // TESTING: 20170527 - omitting this 'strXml' works fine in Keynote/PPT-Online!! - // TODO: gridLine options! (colors/style(solid/dashed) -OR- NONE (eg:omit this section) - strXml += ' \ - \ - \ - \ - \ - \ - \ - '; + if (rel.opts.valGridLine != 'none') strXml += createGridLineElement(rel.opts.valGridLine, DEF_CHART_GRIDLINE); strXml += ' '; strXml += ' '; strXml += ' '; strXml += ' '; strXml += ' '; - strXml += ' '; - - var showAxis = !!rel.opts.valAxisLineShow || rel.opts.valAxisLineShow === undefined; - if (!showAxis) { - strXml += ' '; - } else { - strXml += ' '; - strXml += ' '; - strXml += ' '; - } - strXml += ' '; - strXml += ' '; - strXml += ' '; + strXml += ' '; strXml += ' '; strXml += ' '; strXml += ' '; @@ -1239,6 +1272,7 @@ var PptxGenJS = function(){ break; case 'pie': + case 'doughnut': // Use the same var name so code blocks from barChart are interchangeable var obj = rel.data[0]; @@ -1253,7 +1287,7 @@ var PptxGenJS = function(){ */ // 1: Start pieChart - strXml += ''; + strXml += ''; strXml += ' '; strXml += ''; strXml += ' '; @@ -1312,7 +1346,9 @@ var PptxGenJS = function(){ strXml += ' '; strXml += ' '; strXml += ' '; + if (rel.opts.type == 'pie') { strXml += ' '; + } strXml += ' '; strXml += ' '; strXml += ' '; @@ -1333,7 +1369,7 @@ var PptxGenJS = function(){ \ \ \ - \ + ' + (rel.opts.type == 'pie' ? '' : '') + '\ \ \ \ @@ -1368,7 +1404,8 @@ var PptxGenJS = function(){ // 4: Close "SERIES" strXml += ' '; strXml += ' '; - strXml += ''; + if ( rel.opts.type == 'doughnut' ) strXml += ' '; + strXml += ''; // Done with CHART.BAR break; @@ -1414,6 +1451,57 @@ var PptxGenJS = function(){ return strXml; } + /** + * DESC: Convert degrees (0..360) to Powerpoint rot value + */ + function convertRotationDegrees(d) { + d = d || 0; + return (d > 360 ? (d - 360) : d) * 60000; + } + + /** + * DESC: Generate the XML for title elements used for the char and axis titles + */ + function genXmlTitle(opts) { + var strXml = ''; + strXml += ''; + strXml += ' '; + strXml += ' '; + if (opts.rotate !== undefined) { + strXml += ' '; + } + else { + strXml += ' '; // don't specify rotation to get default (ex. vertical for cat axis) + } + strXml += ' '; + strXml += ' '; + strXml += ' '; + var sizeAttr = ''; + // only set the font size if specified. Powerpoint will handle the default size + if (opts.fontSize !== undefined) { + sizeAttr = ' sz="' + opts.fontSize + '00"'; + } + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '+ (decodeXmlEntities(opts.title) || '') +''; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ' '; + strXml += ''; + return strXml; + } + /** * DESC: Generate the XML for text and its options (bold, bullet, etc) including text runs (word-level formatting) * EX: @@ -1968,7 +2056,7 @@ var PptxGenJS = function(){ // if ( slideObj.options.flipH ) locationAttr += ' flipH="1"'; if ( slideObj.options.flipV ) locationAttr += ' flipV="1"'; - if ( slideObj.options.rotate ) locationAttr += ' rot="' + ( (slideObj.options.rotate > 360 ? (slideObj.options.rotate - 360) : slideObj.options.rotate) * 60000 ) + '"'; + if ( slideObj.options.rotate ) locationAttr += ' rot="' + convertRotationDegrees(slideObj.options.rotate)+ '"'; // B: Add OBJECT to current Slide ---------------------------- switch ( slideObj.type ) { @@ -2875,7 +2963,7 @@ var PptxGenJS = function(){ // B: Options: misc if ( ['bar','col'].indexOf(options.barDir || '') < 0 ) options.barDir = 'col'; // IMPORTANT: 'bestFit' will cause issues with PPT-Online in some cases, so defualt to 'ctr'! - if ( ['bestFit','b','ctr','inBase','inEnd','l','outEnd','r','t'].indexOf(options.dataLabelPosition || '') < 0 ) options.dataLabelPosition = (options.type == 'pie' ? 'bestFit' : 'ctr'); + if ( ['bestFit','b','ctr','inBase','inEnd','l','outEnd','r','t'].indexOf(options.dataLabelPosition || '') < 0 ) options.dataLabelPosition = (options.type == 'pie' || options.type == 'doughnut' ? 'bestFit' : 'ctr'); if ( ['b','l','r','t','tr'].indexOf(options.legendPos || '') < 0 ) options.legendPos = 'r'; // barGrouping: "21.2.3.17 ST_Grouping (Grouping)" if ( ['clustered','standard','stacked','percentStacked'].indexOf(options.barGrouping || '') < 0 ) options.barGrouping = 'standard'; @@ -2887,6 +2975,22 @@ var PptxGenJS = function(){ // Spec has [plus,star,x] however neither PPT2013 nor PPT-Online support them if ( ['circle','dash','diamond','dot','none','square','triangle'].indexOf(options.lineDataSymbol || '') < 0 ) options.lineDataSymbol = 'circle'; options.lineDataSymbolSize = ( options.lineDataSymbolSize && !isNaN(options.lineDataSymbolSize ) ? options.lineDataSymbolSize : 6 ); + // `layout` allows the override of PPT defaults to maximize space + if ( options.layout ) { + ['x', 'y', 'w', 'h'].forEach(function(key) { + var val = options.layout[key]; + if (isNaN(Number(val)) || val < 0 || val > 1) { + console.warn('Warning: chart.layout.' + key + ' can only be 0-1'); + delete options.layout[key]; // remove invalid value so that default will be used + } + }); + } + + // use default lines only for y-axis if nothing specified + options.valGridLine = options.valGridLine || {}; + options.catGridLine = options.catGridLine || 'none'; + correctGridLineOptions(options.catGridLine); + correctGridLineOptions(options.valGridLine); // C: Options: plotArea options.showLabel = (options.showLabel == true || options.showLabel == false ? options.showLabel : false); @@ -2897,7 +3001,7 @@ var PptxGenJS = function(){ // D: Options: chart options.barGapWidthPct = (!isNaN(options.barGapWidthPct) && options.barGapWidthPct >= 0 && options.barGapWidthPct <= 1000 ? options.barGapWidthPct : 150); - options.chartColors = ( Array.isArray(options.chartColors) ? options.chartColors : (options.type == 'pie' ? PIECHART_COLORS : BARCHART_COLORS) ); + options.chartColors = ( Array.isArray(options.chartColors) ? options.chartColors : (options.type == 'pie' || options.type == 'doughnut' ? PIECHART_COLORS : BARCHART_COLORS) ); options.chartColorsOpacity = ( options.chartColorsOpacity && !isNaN(options.chartColorsOpacity) ? options.chartColorsOpacity : null ); // options.border = ( options.border && typeof options.border === 'object' ? options.border : null ); @@ -2908,7 +3012,7 @@ var PptxGenJS = function(){ if ( options.dataBorder && (!options.dataBorder.pt || isNaN(options.dataBorder.pt)) ) options.dataBorder.pt = 0.75; if ( options.dataBorder && (!options.dataBorder.color || typeof options.dataBorder.color !== 'string' || options.dataBorder.color.length != 6) ) options.dataBorder.color = 'F9F9F9'; // - options.dataLabelFormatCode = ( options.dataLabelFormatCode && typeof options.dataLabelFormatCode === 'string' ? options.dataLabelFormatCode : (options.type == 'pie' ? '0%' : '#,##0') ); + options.dataLabelFormatCode = ( options.dataLabelFormatCode && typeof options.dataLabelFormatCode === 'string' ? options.dataLabelFormatCode : (options.type == 'pie' || options.type == 'doughnut' ? '0%' : '#,##0') ); // options.lineSize = ( typeof options.lineSize === 'number' ? options.lineSize : 2 ); options.valAxisMajorUnit = ( typeof options.valAxisMajorUnit === 'number' ? options.valAxisMajorUnit : null ); diff --git a/examples/nodejs-demo.js b/examples/nodejs-demo.js index 4b173764f..182898901 100644 --- a/examples/nodejs-demo.js +++ b/examples/nodejs-demo.js @@ -10,6 +10,7 @@ // ============================================================================ const express = require('express'); // Not core - Only required for streaming const app = express(); // Not core - Only required for streaming +var fs = require('fs'); var GIF_ANIM_FIRE = ""; var AUDIO_MP3 = ""; @@ -29,8 +30,13 @@ STARTING TEST -------------`); // STEP 1: Load pptxgenjs and show version to verify everything loaded correctly -//var pptx = require('../dist/pptxgen.js'); // for LOCAL TESTING -var pptx = require("pptxgenjs"); +var pptx; +if (fs.existsSync('../dist/pptxgen.js')) { + pptx = require('../dist/pptxgen.js'); // for LOCAL TESTING +} +else { + pptx = require("pptxgenjs"); +} var runEveryTest = require("../examples/pptxgenjs-demo.js"); if (gConsoleLog) console.log(` * pptxgenjs version: ${pptx.getVersion()}`); // Loaded okay? diff --git a/examples/pptxgenjs-demo.html b/examples/pptxgenjs-demo.html index e4c82b954..822ddbcd5 100755 --- a/examples/pptxgenjs-demo.html +++ b/examples/pptxgenjs-demo.html @@ -452,40 +452,42 @@

Slide 7-n

Slide 1

Vertical bars
Horizontal bars
-
Various options

Slide 2

+
Grid/Axis options
+

Slide 3

Stacked Bars
PercentStacked Bars
-
Various options
-

Slide 3

+

Slide 4

Lots of Bars
+

Slide 5

+
Bar colors, majorUnit, Number Format
Line Chart -

Slide 4

+

Slide 6

Line Smoothing, Size, Symbol Size
-

Slide 5

+

Slide 7

lineDataSymbol and SymbolSize
-

Slide 6

+

Slide 8

Lots of Categories
Area Chart -

Slide 7

+

Slide 9

Opacity and other options
Pie Chart -

Slide 8

-
Line Chart data symbol options
-

Slide 9

-
Various Options: Values, Label formatting, etc.
+

Slide 10

+
Various options
+

Slide 11

+
Doughnut Type
diff --git a/examples/pptxgenjs-demo.js b/examples/pptxgenjs-demo.js index 5e7e9ee46..41a0b392e 100644 --- a/examples/pptxgenjs-demo.js +++ b/examples/pptxgenjs-demo.js @@ -1,7 +1,7 @@ /** * NAME: pptxgenjs-demo.js * AUTH: Brent Ely (https://github.com/gitbrent/) -* DATE: Apr 29, 2017 +* DATE: Aug 15, 2017 * DESC: Common test/demo slides for all library features * DEPS: Loaded by `pptxgenjs-demo.js` and `nodejs-demo.js` */ @@ -64,12 +64,18 @@ function runEveryTest() { function execGenSlidesFuncs(type) { // STEP 1: Instantiate new PptxGenJS object + var pptx; if ( NODEJS ) { - //var pptx = require('../dist/pptxgen.js'); // for LOCAL TESTING - var pptx = require("pptxgenjs"); + var fs = require('fs'); + if (fs.existsSync('../dist/pptxgen.js')) { + pptx = require('../dist/pptxgen.js'); // for LOCAL TESTING } else { - var pptx = new PptxGenJS(); + pptx = require("pptxgenjs"); + } + } + else { + pptx = new PptxGenJS(); } pptx.setLayout('LAYOUT_WIDE'); @@ -621,7 +627,145 @@ function genSlides_Chart(pptx) { slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar4 ); } - // SLIDE 2: Stacked Bar Chart --------------------------------------------------------- + // SLIDE 2: Bar Chart Grid/Axis Options ------------------------------------------------ + { + var slide = pptx.addNewSlide(); + slide.addTable( [ [{ text:'Chart Examples: Bar Chart Grid/Axis Options', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); + + var arrDataRegions = [ + { + name : 'Region 1', + labels: ['May', 'June', 'July', 'August'], + values: [26, 53, 100, 75] + }, + { + name : 'Region 2', + labels: ['May', 'June', 'July', 'August'], + values: [43.5, 70.3, 90.1, 80.05] + } + ]; + var arrDataHighVals = [ + { + name : 'California', + labels: ['Apartment', 'Townhome', 'Duplex', 'House', 'Big House'], + values: [2000, 2800, 3200, 4000, 5000] + }, + { + name : 'Texas', + labels: ['Apartment', 'Townhome', 'Duplex', 'House', 'Big House'], + values: [1400, 2000, 2500, 3000, 3800] + } + ]; + + // TOP-LEFT: H/bar + var optsChartBar1 = { x:0.5, y:0.6, w:6.0, h:3.0, + barDir: 'bar', + fill: 'F1F1F1', + + catAxisLabelColor : 'CC0000', + catAxisLabelFontFace: 'Helvetica Neue', + catAxisLabelFontSize: 14, + + catGridLine: 'none', + catAxisHidden: true, + valGridLine: { color: "cc6699", style: "dash", size: 1 }, + + showLegend : true, + title : 'No CatAxis, ValGridLine=dash', + titleColor : 'a9a9a9', + titleFontFace: 'Helvetica Neue', + titleFontSize: 14, + showTitle : true + }; + slide.addChart( pptx.charts.BAR, arrDataRegions, optsChartBar1 ); + + // TOP-RIGHT: V/col + var optsChartBar2 = { x:7.0, y:0.6, w:6.0, h:3.0, + barDir: 'col', + fill: 'E1F1FF', + + dataBorder : { pt:'1', color:'F1F1F1' }, + dataLabelColor : '696969', + dataLabelFontFace : 'Arial', + dataLabelFontSize : 11, + dataLabelPosition : 'outEnd', + dataLabelFormatCode: '#.0', + showValue : true, + + catAxisHidden: true, + catGridLine : 'none', + valAxisHidden: true, + valGridLine : 'none', + + showLegend: true, + legendPos : 'b', + showTitle : false + }; + slide.addChart( pptx.charts.BAR, arrDataRegions, optsChartBar2 ); + + // BTM-LEFT: H/bar - TITLE and LEGEND + slide.addText( '.', { x:0.5, y:3.8, w:6.0, h:3.5, fill:'F1F1F1', color:'F1F1F1'} ); + var optsChartBar3 = { x:0.5, y:3.8, w:6.0, h:3.5, + barDir : 'bar', + + border: { pt:'3', color:'CF0909' }, + fill: 'F1C1C1', + + catAxisLabelColor : 'CC0000', + catAxisLabelFontFace: 'Helvetica Neue', + catAxisLabelFontSize: 14, + catAxisOrientation : 'maxMin', + catAxisTitle: "Housing Type", + catAxisTitleColor: "428442", + catAxisTitleFontSize: 14, + showCatAxisTitle: true, + + valGridLine: 'none', + valAxisHidden: true, + catGridLine: { color: "cc6699", style: "dash", size: 1 }, + + titleColor : '33CF22', + titleFontFace: 'Helvetica Neue', + titleFontSize: 16, + + showTitle : true, + title: 'Sales by Region' + }; + slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar3 ); + + // BTM-RIGHT: V/col - TITLE and LEGEND + slide.addText( '.', { x:7.0, y:3.8, w:6.0, h:3.5, fill:'F1F1F1', color:'F1F1F1'} ); + var optsChartBar4 = { x:7.0, y:3.8, w:6.0, h:3.5, + barDir: 'col', + barGapWidthPct: 25, + chartColors: ['0088CC', '99FFCC'], + chartColorsOpacity: 50, + valAxisMinVal: 1000, + valAxisMaxVal: 5000, + + catAxisLabelColor : '0000CC', + catAxisLabelFontFace: 'Times', + catAxisLabelFontSize: 11, + catAxisOrientation : 'minMax', + + dataBorder : { pt:'1', color:'F1F1F1' }, + dataLabelColor : 'FFFFFF', + dataLabelFontFace : 'Arial', + dataLabelFontSize : 10, + dataLabelPosition : 'ctr', + showValue : true, + + valAxisHidden : true, + catAxisTitle : 'Housing Type', + showCatAxisTitle : true, + + showLegend: false, + showTitle : false + }; + slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar4 ); + } + + // SLIDE 3: Stacked Bar Chart --------------------------------------------------------- { var slide = pptx.addNewSlide(); slide.addTable( [ [{ text:'Chart Examples: Bar Chart: Stacked/PercentStacked', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); @@ -690,27 +834,17 @@ function genSlides_Chart(pptx) { }; slide.addChart( pptx.charts.BAR, arrDataRegions, optsChartBar2 ); - // BTM-LEFT: H/bar - TITLE and LEGEND + // BTM-LEFT: H/bar - 100% layout without axis labels var optsChartBar3 = { x:0.5, y:3.8, w:6.0, h:3.5, barDir : 'bar', barGrouping: 'percentStacked', - - border: { pt:'3', color:'CF0909' }, - fill: 'F1C1C1', - - catAxisLabelColor : 'CC0000', - catAxisLabelFontFace: 'Helvetica Neue', - catAxisLabelFontSize: 14, - catAxisOrientation : 'minMax', - - titleColor : '33CF22', - titleFontFace: 'Helvetica Neue', - titleFontSize: 16, - - showTitle : true, - title: 'Sales by Region' + dataBorder : { pt:'1', color:'F1F1F1' }, + catAxisHidden: true, + valAxisHidden: true, + showTitle : false, + layout : {x:0.1, y:0.1, w:1, h:1} }; - slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar3 ); + slide.addChart( pptx.charts.BAR, arrDataRegions, optsChartBar3 ); // BTM-RIGHT: V/col - TITLE and LEGEND slide.addText( '.', { x:7.0, y:3.8, w:6.0, h:3.5, fill:'F1F1F1', color:'F1F1F1'} ); @@ -726,14 +860,12 @@ function genSlides_Chart(pptx) { chartColors: ['5DA5DA','FAA43A'], showLegend: true, - legendPos : 't', - showTitle: true, - title : 'Chart Title' + legendPos : 't' }; slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar4 ); } - // SLIDE 3: Bar Chart - Lots of Bars -------------------------------------------------- + // SLIDE 4: Bar Chart - Lots of Bars -------------------------------------------------- { var slide = pptx.addNewSlide(); slide.addTable( [ [{ text:'Chart Examples: Lots of Bars (>26 letters)', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); @@ -749,14 +881,116 @@ function genSlides_Chart(pptx) { var optsChart = { x:0.5, y:0.5, w:'90%', h:'90%', barDir: 'col', - title: 'Chart With >26 Cols' + title: 'Chart With >26 Cols', + showTitle: true, + titleFontSize: 20, + titleRotate: 10, + showCatAxisTitle: true, + catAxisTitle: "Letters", + catAxisTitleColor: "4286f4", + catAxisTitleFontSize: 14, + + showValAxisTitle: true, + valAxisTitle: "Column Index", + valAxisTitleColor: "c11c13", + valAxisTitleFontSize: 16, }; // TEST `getExcelColName()` to ensure Excel Column names are generated correctly above >26 chars/cols slide.addChart(pptx.charts.BAR, arrDataHighVals, optsChart); } - // SLIDE 4: Line Chart: Line Smoothing, Line Size, Symbol Size ------------------------- + // SLIDE 5: Bar Chart: Data Series Colors, majorUnits, and valAxisLabelFormatCode ---------------- + { + var slide = pptx.addNewSlide(); + slide.addTable( [ [{ text:'Chart Examples: Bar Colors, valAxisMajorUnit, v Format %', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); + + // TOP-LEFT + slide.addChart( + pptx.charts.BAR, + [ + { + name : 'Colored Series', + labels: ['Jan', 'Feb','Mar', 'Apr', 'May', 'Jun'], + values: [20, 30, 10, 25, 15, 5] + } + ], + { x:0.5, y:0.6, w:'45%', h:3, + valAxisMaxVal:100, + barDir: 'bar', + valAxisMajorUnit: 50, + chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384'], + barGapWidthPct: 25 + } + ); + + // TOP-RIGHT + slide.addChart( + pptx.charts.BAR, + [ + { + name : 'Too Many Colors Series', + labels: ['Jan', 'Feb','Mar', 'Apr', 'May', 'Jun'], + values: [.20, .30, .10, .25, .15, .05] + } + ], + { x:7, y:0.6, w:'45%', h:3, + valAxisMaxVal:1, + barDir: 'bar', + showValue: true, + dataLabelPosition: 'outEnd', + dataLabelFormatCode: '#%', + valAxisLabelFormatCode: '#%', + valAxisMajorUnit: 0.2, + chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384', '7D666A','A3C961','EF907B','9BA0A3'], + barGapWidthPct: 25 + } + ); + + // BOTTOM-LEFT + slide.addChart( + pptx.charts.BAR, + [ + { + name : 'Two Color Series', + labels: ['Jan', 'Feb','Mar', 'Apr', 'May', 'Jun'], + values: [.20, .30, .10, .25, .15, .05] + } + ], + { x:0.5, y:3.6, w:'45%', h:3, + valAxisMaxVal:1, + barDir: 'bar', + showValue: true, + dataLabelPosition: 'outEnd', + dataLabelFormatCode: '#%', + valAxisLabelFormatCode: '0.#0', + chartColors: ['DE4216','154384'], + barGapWidthPct: 25 + } + ); + + // BOTTOM-RIGHT + slide.addChart( + pptx.charts.BAR, + [ + { + name : 'Many values', + labels: 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P'.split(','), + values: [1.20, 2.30, 3.10, 4.25, 2.15, 6.05, 8.01, 2.02, 9.9, 0.9, 2.2, 3.33, 6.66, 7.77, 8.88] + } + ], { x:7, y:3.6, w:'45%', h:3, + valAxisMaxVal:10, + barDir: 'bar', + showValue: true, + dataLabelPosition: 'outEnd', + chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384', '7D666A','A3C961','EF907B','9BA0A3'], + barGapWidthPct: 25, + valAxisMajorUnit: 1 + } + ); + } + + // SLIDE 6: Line Chart: Line Smoothing, Line Size, Symbol Size ------------------------- { var slide = pptx.addNewSlide(); slide.addTable( [ [{ text:'Chart Examples: Line Chart Smoothing, Line Size, Symbol Size', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); @@ -793,7 +1027,7 @@ function genSlides_Chart(pptx) { slide.addChart( pptx.charts.LINE, arrDataLineStat, optsChartLine2 ); } - // SLIDE 5: Line Chart: TEST: `lineDataSymbol` + `lineDataSymbolSize` ------------------ + // SLIDE 7: Line Chart: TEST: `lineDataSymbol` + `lineDataSymbolSize` ------------------ { var intWgap = 4.25; var opts_lineDataSymbol = ['circle','dash','diamond','dot','none','square','triangle']; @@ -814,7 +1048,7 @@ function genSlides_Chart(pptx) { }); } - // SLIDE 6: Line Chart: Lots of Cats --------------------------------------------------- + // SLIDE 8: Line Chart: Lots of Cats --------------------------------------------------- { var slide = pptx.addNewSlide(); slide.addTable( [ [{ text:'Chart Examples: Line Chart: Lots of Lines', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); @@ -848,7 +1082,7 @@ function genSlides_Chart(pptx) { slide.addChart( pptx.charts.LINE, arrDataTimeline, optsChartLine1 ); } - // SLIDE 7: Area Chart: Misc ----------------------------------------------------------- + // SLIDE 9: Area Chart: Misc ----------------------------------------------------------- { var slide = pptx.addNewSlide(); slide.addTable( [ [{ text:'Chart Examples: Area Chart', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); @@ -894,7 +1128,7 @@ function genSlides_Chart(pptx) { slide.addChart( pptx.charts.AREA, arrDataTimeline2ser, optsChartLine4 ); } - // SLIDE 8: Pie Charts: All 4 Legend Options ------------------------------------------- + // SLIDE 10: Pie Charts: All 4 Legend Options ------------------------------------------- { var slide = pptx.addNewSlide(); slide.addTable( [ [{ text:'Chart Examples: Pie Charts: Legends', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); @@ -927,7 +1161,7 @@ function genSlides_Chart(pptx) { slide.addChart( pptx.charts.PIE, dataChartPieLocs, {x:9.8, y:4.0, w:3.2, h:3.2, dataBorder:{pt:'1',color:'F1F1F1'}, showLegend:true, legendPos:'b', showTitle:true, title:'Title & Legend'} ); } - // SLIDE 9: Pie Chart ------------------------------------------------------------------ + // SLIDE 11: Doughnut Chart ------------------------------------------------------------------ { var slide = pptx.addNewSlide(); slide.addTable( [ [{ text:'Chart Examples: Pie Chart', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); @@ -938,7 +1172,6 @@ function genSlides_Chart(pptx) { dataBorder : { pt:'2', color:'F1F1F1' }, dataLabelColor : 'FFFFFF', dataLabelFontSize: 14, - //dataLabelPosition: 'ctr', legendPos : 'r', @@ -948,13 +1181,15 @@ function genSlides_Chart(pptx) { showLegend : true, showTitle : false, + holeSize: 70, + title : 'Project Status', titleColor : '33CF22', titleFontFace: 'Helvetica Neue', titleFontSize: 24 }; slide.addText( '.', {x:0.5, y:1.0, w:6.0, h:6.0, fill:'F1F1F1', color:'F1F1F1'} ); - slide.addChart(pptx.charts.PIE, dataChartPieStat, optsChartPie1 ); + slide.addChart(pptx.charts.DOUGHNUT, dataChartPieStat, optsChartPie1 ); var optsChartPie2 = { x:7.0, y:1.0, w:6, h:6, @@ -967,131 +1202,7 @@ function genSlides_Chart(pptx) { showTitle : false, title: 'Resource Totals by Location' }; - slide.addChart(pptx.charts.PIE, dataChartPieLocs, optsChartPie2 ); - } - // SLIDE 10: Data Series Colors, majorUnits, and valAxisLabelFormatCode ---------------- - { - var slide = pptx.addNewSlide(); - slide.addTable( [ [{ text:'Chart Examples: Bar Colors, valAxisMajorUnit, v Format %', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); - - // TOP-LEFT - slide.addChart( - pptx.charts.BAR, - [ - { - name : 'Colored Series', - labels: ['Jan', 'Feb','Mar', 'Apr', 'May', 'Jun'], - values: [20, 30, 10, 25, 15, 5] - } - ], - { x:0.5, y:0.6, w:'45%', h:3, - valAxisMaxVal:100, - barDir: 'bar', - valAxisMajorUnit: 50, - chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384'], - barGapWidthPct: 25 - } - ); - - // TOP-RIGHT - slide.addChart( - pptx.charts.BAR, - [ - { - name : 'Too Many Colors Series', - labels: ['Jan', 'Feb','Mar', 'Apr', 'May', 'Jun'], - values: [.20, .30, .10, .25, .15, .05] - } - ], - { x:7, y:0.6, w:'45%', h:3, - valAxisMaxVal:1, - barDir: 'bar', - showValue: true, - dataLabelPosition: 'outEnd', - dataLabelFormatCode: '#%', - valAxisLabelFormatCode: '#%', - valAxisMajorUnit: 0.2, - chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384', '7D666A','A3C961','EF907B','9BA0A3'], - barGapWidthPct: 25 - } - ); - - // BOTTOM-LEFT - slide.addChart( - pptx.charts.BAR, - [ - { - name : 'Two Color Series', - labels: ['Jan', 'Feb','Mar', 'Apr', 'May', 'Jun'], - values: [.20, .30, .10, .25, .15, .05] - } - ], - { x:0.5, y:3.6, w:'45%', h:3, - valAxisMaxVal:1, - barDir: 'bar', - showValue: true, - dataLabelPosition: 'outEnd', - dataLabelFormatCode: '#%', - valAxisLabelFormatCode: '0.#0', - chartColors: ['DE4216','154384'], - barGapWidthPct: 25 - } - ); - - // BOTTOM-RIGHT - slide.addChart( - pptx.charts.BAR, - [ - { - name : 'Many values', - labels: 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P'.split(','), - values: [1.20, 2.30, 3.10, 4.25, 2.15, 6.05, 8.01, 2.02, 9.9, 0.9, 2.2, 3.33, 6.66, 7.77, 8.88] - } - ], { x:7, y:3.6, w:'45%', h:3, - valAxisMaxVal:10, - barDir: 'bar', - showValue: true, - dataLabelPosition: 'outEnd', - chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384', '7D666A','A3C961','EF907B','9BA0A3'], - barGapWidthPct: 25, - valAxisMajorUnit: 1 - } - ); - } - - // SLIDE 11: Tornado chart - { - var slide = pptx.addNewSlide(); - slide.addTable( [ [{ text:'Tornado Chart - Grid and Axis Formatting', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } ); - - slide.addChart( - pptx.charts.BAR, - [ - { - name: 'High', - labels: ['City A', 'City A', 'City C'], - values: [.20, .32, .41] - }, { - name: 'Low', - labels: ['City A', 'City A', 'City C'], - values: [-0.11, -0.22, -0.29] - } - ], { x:0.5, y:0.5, w:'90%', h:'90%', - valAxisMaxVal:1, - barDir: 'bar', - axisLabelFormatCode: '#%', - gridLineColor: 'D8D8D8', - axisLineColor: 'D8D8D8', - valAxisLineShow: false, - barGrouping: 'stacked', - catAxisLabelPos: 'low', - valueBarColors: true, - //dataLabelPosition: 'outEnd', - chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384', '7D666A','A3C961','EF907B','9BA0A3'], - invertedColors: [ '0065A2', '428526', 'C99100', '51A7C1', 'BD3813', '123970', '6A575A', '8BAB52', 'CB7A69', '84888B' ], // DOCTHIS - barGapWidthPct: 25, - valAxisMajorUnit: 0.2 - }); + slide.addChart(pptx.charts.DOUGHNUT, dataChartPieLocs, optsChartPie2 ); } }