Features to Enable Tornado Chart

.gitignore

@@ -7,3 +7,4 @@ bower_components/
 .icloud
 *.icloud
 package-lock.json
+/.idea

README.md

@@ -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 }` |
@@ -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

dist/pptxgen.js

@@ -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">';
@@ -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>';
@@ -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"/>';

examples/pptxgenjs-demo.html

@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

examples/pptxgenjs-demo.js

@@ -1204,6 +1204,41 @@ function genSlides_Chart(pptx) {
 		};
 		slide.addChart(pptx.charts.DOUGHNUT, dataChartPieLocs, optsChartPie2 );
 	}
+
+	// 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
+			});
+	}
 }
 
 function genSlides_Media(pptx) {