Merge remote-tracking branch 'gitbrent/master' into fork-sync

CHANGELOG.md

@@ -15,6 +15,7 @@
 - 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))
+- New chart type: XY Scatter [\#192](https://github.com/gitbrent/PptxGenJS/issues/192) ([shaunvdp](https://github.com/shaunvdp))
 
 
 

README.md

@@ -338,7 +338,7 @@ 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`, `pptx.charts.DOUGHNUT`
+* Currently: `pptx.charts.AREA`, `pptx.charts.BAR`, `pptx.charts.LINE`, `pptx.charts.SCATTER`, `pptx.charts.PIE`, `pptx.charts.DOUGHNUT`
 
 ### 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.
@@ -516,6 +516,14 @@ var dataChartPie = [
 ];
 slide.addChart( pptx.charts.PIE, dataChartPie, { x:1.0, y:1.0, w:6, h:6 } );
 
+// Chart Type: XY SCATTER
+var dataChartScatter = [
+	{ name:'X-Axis',    values:[1,2,3,4,5,6,7,8,9,10] },
+	{ name:'Y-Value 1', values:[13, 20, 21, 25] },
+	{ name:'Y-Value 2', values:[21, 22, 25, 49] }
+];
+slide.addChart( pptx.charts.SCATTER, dataChartScatter, { x:1.0, y:1.0, w:6, h:4 } );
+
 // Chart Type: Multi-Type
 // NOTE: use the same labels for all types
 var labels = ['Q1', 'Q2', 'Q3', 'Q4', 'OT'];

examples/pptxgenjs-demo.html

@@ -526,13 +526,18 @@ <h3>Slide 12</h3>
 							<div class="chkRow"><div class="svgCheck"></div>Doughnut Type</div>
 						</fieldset>
 						<fieldset>
-							<legend>Multi-Type Charts</legend>
+							<legend>X Y (Scatter) Chart</legend>
 							<h3>Slide 13</h3>
+							<div class="chkRow"><div class="svgCheck"></div>Various Options</div>
+						</fieldset>
+						<fieldset>
+							<legend>Multi-Type Charts</legend>
+							<h3>Slide 14</h3>
 							<div class="chkRow"><div class="svgCheck"></div>Various Mixed Chart Types</div>
 						</fieldset>
 						<fieldset>
 							<legend>Chart Options</legend>
-							<h3>Slide 14</h3>
+							<h3>Slide 15</h3>
 							<div class="chkRow"><div class="svgCheck"></div>Shadows and Transparent Color</div>
 						</fieldset>
 					</div>

examples/pptxgenjs-demo.js

@@ -1,7 +1,7 @@
 /**
 * NAME: pptxgenjs-demo.js
 * AUTH: Brent Ely (https://github.com/gitbrent/)
-* DATE: Sep 20, 2017
+* DATE: Sep 26, 2017
 * DESC: Common test/demo slides for all library features
 * DEPS: Loaded by `pptxgenjs-demo.js` and `nodejs-demo.js`
 */
@@ -1335,8 +1335,74 @@ function genSlides_Chart(pptx) {
 		slide.addChart(pptx.charts.DOUGHNUT, dataChartPieLocs, optsChartPie2 );
 	}
 
-	// SLIDE 13: Multi-Type Charts ---------------------------------------------------------
+	// SLIDE 13: XY Scatter Chart -------------------------------------------------------------
 	function slide13() {
+		var slide = pptx.addNewSlide();
+		slide.addTable( [ [{ text:'Chart Examples: XY Scatter Chart', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } );
+
+		var arrDataScatter1 = [
+			{ name:'X-Axis',    values:[1,2,3,4,5,6,7,8,9,10] },
+			{ name:'Y-Value 1', values:[13, 20, 21, 25] },
+			{ name:'Y-Value 2', values:[21, 22, 25, 49] }
+		];
+
+		var arrDataScatter2 = [
+			{ name:'X-Axis',   values:[1, 2, 3, 4, 5, 6] },
+			{ name:'Airplane', values:[33, 20, 51, 65, 71, 75] },
+			{ name:'Train',    values:[99, 88, 77, 89, 99, 99] },
+			{ name:'Bus',      values:[21, 22, 25, 49, 59, 69] }
+		];
+
+		// TOP-LEFT
+		var optsChartScat1 = { x:0.5, y:0.6, w:'45%', h:3,
+			valAxisTitle        : "Renters",
+			valAxisTitleColor   : "428442",
+			valAxisTitleFontSize: 14,
+			showValAxisTitle    : true,
+
+			lineSize: 0,
+
+			catAxisTitle        : "Last 10 Months",
+			catAxisTitleColor   : "428442",
+			catAxisTitleFontSize: 14,
+			showCatAxisTitle    : true
+		};
+		slide.addChart( pptx.charts.SCATTER, arrDataScatter1, optsChartScat1 );
+
+		// TOP-RIGHT
+		var optsChartScat2 = { x:7.0, y:0.6, w:'45%', h:3,
+			fill: 'f1f1f1',
+			showLegend: true,
+			legendPos : 'b',
+
+			lineSize  : 8,
+			lineSmooth: true,
+			lineDataSymbolSize: 12,
+			lineDataSymbolLineColor: 'FFFFFF',
+
+			chartColors: [ COLOR_RED, COLOR_AMB, COLOR_GRN, COLOR_UNK ],
+			chartColorsOpacity: 25
+		};
+		slide.addChart( pptx.charts.SCATTER, arrDataScatter2, optsChartScat2 );
+
+		// BOTTOM-LEFT
+		var optsChartScat3 = { x:0.5, y:4.0, w:'45%', h:3,
+			fill: 'f2f9fc',
+			catAxisOrientation: 'maxMin',
+			valAxisOrientation: 'maxMin',
+			showCatAxisTitle: false,
+			showValAxisTitle: false,
+			lineSize: 0
+		};
+		slide.addChart( pptx.charts.SCATTER, arrDataScatter1, optsChartScat3 );
+
+		// BOTTOM-RIGHT
+		var optsChartScat4 = { x:7.0, y:4.0, w:'45%', h:3 };
+		slide.addChart( pptx.charts.SCATTER, arrDataScatter2, optsChartScat4 );
+	}
+
+	// SLIDE 14: Multi-Type Charts ---------------------------------------------------------
+	function slide14() {
 		// powerpoint 2016 add secondary category axis labels
 		// https://peltiertech.com/chart-with-a-dual-category-axis/
 
@@ -1706,8 +1772,8 @@ function genSlides_Chart(pptx) {
 		//readmeExample();
 	}
 
-	// SLIDE 14: Charts Options: Shadow, Transparent Colors --------------------------------
-	function slide14() {
+	// SLIDE 15: Charts Options: Shadow, Transparent Colors --------------------------------
+	function slide15() {
 		var slide = pptx.addNewSlide();
 		slide.addTable( [ [{ text:'Chart Options: Shadow, Transparent Colors', options:gOptsTitle }] ], { x:0.5, y:0.13, w:12.5 } );
 
@@ -1830,6 +1896,7 @@ function genSlides_Chart(pptx) {
 	slide12();
 	slide13();
 	slide14();
+	slide15();
 }
 
 function genSlides_Media(pptx) {