Skip to content

Commit

Permalink
Merge pull request #151 from gitbrent/pr/140
Browse files Browse the repository at this point in the history 
Pr/140 Issue #140
  • Loading branch information
@gitbrent
gitbrent authored Aug 17, 2017
2 parents 4d53ad0 + 55a8153 commit c5e9b30
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 21 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ bower_components/
.icloud
*.icloud
package-lock.json
/.idea
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,7 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
| `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 }` |
| `valAxisMinVal` | number | | | value-axis minimum value | 1-N. Ex: `{ valAxisMinVal: -10 }` |
Expand All @@ -395,6 +396,7 @@ 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
Expand Down
2 changes: 1 addition & 1 deletion dist/pptxgen.bundle.js.map
View file

Large diffs are not rendered by default.

32 changes: 23 additions & 9 deletions dist/pptxgen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1089,17 +1089,19 @@ 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.chartColors != BARCHART_COLORS ) {
if (( rel.data.length === 1 || rel.opts.valueBarColors ) && rel.opts.chartColors != BARCHART_COLORS ) {
// Series Data Point colors
obj.values.forEach(function(value,index){
obj.values.forEach(function (value, index) {
var invert = rel.opts.invertedColors ? 0 : 1;
var colors = value < 0 ? rel.opts.invertedColors : rel.opts.chartColors;
strXml += ' <c:dPt>';
strXml += ' <c:idx val="'+index+'"/>';
strXml += ' <c:invertIfNegative val="1"/>';
strXml += ' <c:bubble3D val="0"/>';
strXml += ' <c:spPr>';
strXml += ' <c:invertIfNegative val="'+invert+'"/>';
strXml += ' <c:bubble3D val="0"/>';
strXml += ' <c:spPr>';
strXml += ' <a:solidFill>';
strXml += ' <a:srgbClr val="'+rel.opts.chartColors[index % rel.opts.chartColors.length]+'"/>';
strXml += ' </a:solidFill>';
strXml += ' <a:srgbClr val="'+(colors[index % colors.length])+'"/>';
strXml += ' </a:solidFill>';
strXml += ' <a:effectLst>';
strXml += ' <a:outerShdw blurRad="38100" dist="23000" dir="5400000" algn="tl">';
strXml += ' <a:srgbClr val="000000">';
Expand Down Expand Up @@ -1197,7 +1199,7 @@ var PptxGenJS = function(){
strXml += ' <c:numFmt formatCode="General" sourceLinked="0"/>';
strXml += ' <c:majorTickMark val="out"/>';
strXml += ' <c:minorTickMark val="none"/>';
strXml += ' <c:tickLblPos val="'+ (rel.opts.barDir == 'col' ? 'low' : 'nextTo') +'"/>';
strXml += ' <c:tickLblPos val="'+ (rel.opts.catAxisLabelPos || rel.opts.barDir == 'col' ? 'low' : 'nextTo') +'"/>';
strXml += ' <c:spPr>';
strXml += ' <a:ln w="12700" cap="flat"><a:solidFill><a:srgbClr val="888888"/></a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>';
strXml += ' </c:spPr>';
Expand Down Expand Up @@ -1247,7 +1249,19 @@ var PptxGenJS = function(){
strXml += ' <c:minorTickMark val="none"/>';
strXml += ' <c:tickLblPos val="'+ (rel.opts.barDir == 'col' ? 'nextTo' : 'low') +'"/>';
strXml += ' <c:spPr>';
strXml += ' <a:ln w="12700" cap="flat"><a:solidFill><a:srgbClr val="888888"/></a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>';
strXml += ' <a:ln w="12700" cap="flat">';

var showAxis = !!rel.opts.valAxisLineShow || rel.opts.valAxisLineShow === undefined;
if (!showAxis) {
strXml += ' <a:noFill/>';
} else {
strXml += ' <a:solidFill>';
strXml += ' <a:srgbClr val="'+(rel.opts.axisLineColor ? rel.opts.axisLineColor : "888888")+'"/>';
strXml += ' </a:solidFill>';
}
strXml += ' <a:prstDash val="solid"/>';
strXml += ' <a:round/>';
strXml += ' </a:ln>';
strXml += ' </c:spPr>';
strXml += ' <c:txPr>';
strXml += ' <a:bodyPr rot="0"/>';
Expand Down
10 changes: 5 additions & 5 deletions examples/pptxgenjs-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -431,7 +431,7 @@ <h3>Slide 7-n</h3>
</fieldset>
</div>
<div id="buttonBarBtm" style="clear:both">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presenation" onclick="execGenSlidesFuncs('Table')">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presentation" onclick="execGenSlidesFuncs('Table')">
</div>
</div>
</div>
Expand Down Expand Up @@ -491,7 +491,7 @@ <h3>Slide 11</h3>
</fieldset>
</div>
<div id="buttonBarBtm" style="clear:both">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presenation" onclick="execGenSlidesFuncs('Chart')">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presentation" onclick="execGenSlidesFuncs('Chart')">
</div>
</div>
</div>
Expand Down Expand Up @@ -534,7 +534,7 @@ <h3>Slide 2</h3>
</fieldset>
</div>
<div id="buttonBarBtm" style="clear:both">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presenation" onclick="execGenSlidesFuncs(['Image','Media'])">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presentation" onclick="execGenSlidesFuncs(['Image','Media'])">
</div>
</div>
</div>
Expand Down Expand Up @@ -580,7 +580,7 @@ <h3>Slide 2</h3>
</div>

<div id="buttonBarBtm" style="clear:both">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presenation" onclick="execGenSlidesFuncs(['Shape','Text'])">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presentation" onclick="execGenSlidesFuncs(['Shape','Text'])">
</div>
</div>
</div>
Expand Down Expand Up @@ -623,7 +623,7 @@ <h3>Slide 6</h3>
</fieldset>
</div>
<div id="buttonBarBtm" style="clear:both">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presenation" onclick="execGenSlidesFuncs('Master')">
<input type="button" class="flatBtn flatBtn-green" value="Generate Demo Presentation" onclick="execGenSlidesFuncs('Master')">
</div>
</div>
</div>
Expand Down
51 changes: 45 additions & 6 deletions examples/pptxgenjs-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -505,7 +505,7 @@ function genSlides_Chart(pptx) {
arrDataLineStat.push( tmpObjUnk );
}

// SLIDE 1: Bar Chart -----------------------------------------------------------------
// SLIDE 1: Bar Chart ------------------------------------------------------------------
{
var slide = pptx.addNewSlide();
slide.addTable( [ [{ text:'Chart Examples: Bar Chart', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } );
Expand Down Expand Up @@ -765,7 +765,7 @@ function genSlides_Chart(pptx) {
slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar4 );
}

// SLIDE 3: Stacked Bar Chart ---------------------------------------------------------
// 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 } );
Expand Down Expand Up @@ -865,7 +865,7 @@ function genSlides_Chart(pptx) {
slide.addChart( pptx.charts.BAR, arrDataHighVals, optsChartBar4 );
}

// SLIDE 4: 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 } );
Expand Down Expand Up @@ -900,7 +900,7 @@ function genSlides_Chart(pptx) {
slide.addChart(pptx.charts.BAR, arrDataHighVals, optsChart);
}

// SLIDE 5: Bar Chart: Data Series Colors, majorUnits, and valAxisLabelFormatCode ----------------
// 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 } );
Expand Down Expand Up @@ -1128,7 +1128,7 @@ function genSlides_Chart(pptx) {
slide.addChart( pptx.charts.AREA, arrDataTimeline2ser, optsChartLine4 );
}

// SLIDE 10: 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 } );
Expand Down Expand Up @@ -1161,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 11: Doughnut 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 } );
Expand Down Expand Up @@ -1204,6 +1204,45 @@ function genSlides_Chart(pptx) {
};
slide.addChart(pptx.charts.DOUGHNUT, dataChartPieLocs, optsChartPie2 );
}

// SLIDE 12: 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: ['London', 'Munich', 'Tokyo'],
values: [.20, .32, .41]
},
{
name: 'Low',
labels: ['London', 'Munich', 'Tokyo'],
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'],
barGapWidthPct: 25,
valAxisMajorUnit: 0.2
}
);
}
}

function genSlides_Media(pptx) {
Expand Down

0 comments on commit c5e9b30

Please sign in to comment.