Skip to content

Commit

Permalink
Added scatter chart data point labels (Issue #420)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gitbrent
gitbrent committed Jan 1, 2019
1 parent d5ebf53 commit c92a5a9
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 136 deletions.
247 changes: 123 additions & 124 deletions dist/pptxgen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ if ( NODEJS ) {

var PptxGenJS = function(){
// APP
var APP_VER = "2.4.0-beta";
var APP_BLD = "20181014";
var APP_VER = "2.5.0-beta";
var APP_BLD = "20181231";

// CONSTANTS
var MASTER_OBJECTS = {
Expand Down Expand Up @@ -3100,126 +3100,125 @@ var PptxGenJS = function(){
strXml += '</c:marker>';
}

{
if (opts.showLabel) {
var chartUuid = getUuid('-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
if (obj.labels && (opts.dataLabelFormatScatter == 'custom' || opts.dataLabelFormatScatter == 'customXY')) {
strXml +='<c:dLbls>';
obj.labels.forEach(function(label,idx) {
if (opts.dataLabelFormatScatter == 'custom' || opts.dataLabelFormatScatter == 'customXY') {
strXml +=' <c:dLbl>';
strXml +=' <c:idx val="'+idx+'"/>';
strXml +=' <c:tx>';
strXml +=' <c:rich>';
strXml +=' <a:bodyPr>';
strXml +=' <a:spAutoFit/>';
strXml +=' </a:bodyPr>';
strXml +=' <a:lstStyle/>';
strXml +=' <a:p>';
strXml +=' <a:pPr>'
strXml +=' <a:defRPr/>'
strXml +=' </a:pPr>'
// Option: scatter data point labels
if ( opts.showLabel ) {
var chartUuid = getUuid('-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
if ( obj.labels && (opts.dataLabelFormatScatter == 'custom' || opts.dataLabelFormatScatter == 'customXY') ) {
strXml +='<c:dLbls>';
obj.labels.forEach(function(label,idx) {
if ( opts.dataLabelFormatScatter == 'custom' || opts.dataLabelFormatScatter == 'customXY' ) {
strXml +=' <c:dLbl>';
strXml +=' <c:idx val="'+idx+'"/>';
strXml +=' <c:tx>';
strXml +=' <c:rich>';
strXml +=' <a:bodyPr>';
strXml +=' <a:spAutoFit/>';
strXml +=' </a:bodyPr>';
strXml +=' <a:lstStyle/>';
strXml +=' <a:p>';
strXml +=' <a:pPr>'
strXml +=' <a:defRPr/>'
strXml +=' </a:pPr>'
strXml +=' <a:r>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" dirty="0"/>';
strXml +=' <a:t>'+ encodeXmlEntities(label) +'</a:t>';
strXml +=' </a:r>';
// Apply XY values at end of custom label
// Do not apply the values if the label was empty or just spaces
// This allows for selective labelling where required
if ( opts.dataLabelFormatScatter == 'customXY' && !(/^ *$/.test(label)) ) {
strXml +=' <a:r>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" dirty="0"/>';
strXml +=' <a:t>'+ encodeXmlEntities(label) +'</a:t>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0" dirty="0"/>';
strXml +=' <a:t> (</a:t>';
strXml +=' </a:r>';
// Apply XY values at end of custom label
// Do not apply the values if the label was empty or just spaces
// This allows for selective labelling where required
if (opts.dataLabelFormatScatter == 'customXY' && !(/^ *$/.test(label))) {
strXml +=' <a:r>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0" dirty="0"/>';
strXml +=' <a:t> (</a:t>';
strXml +=' </a:r>';
strXml +=' <a:fld id="{' + getUuid('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx') + '}" type="XVALUE">';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0"/>';
strXml +=' <a:pPr>';
strXml +=' <a:defRPr/>';
strXml +=' </a:pPr>';
strXml +=' <a:t>[' + encodeXmlEntities(obj.name) + '</a:t>';
strXml +=' </a:fld>';
strXml +=' <a:r>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0" dirty="0"/>';
strXml +=' <a:t>, </a:t>';
strXml +=' </a:r>';
strXml +=' <a:fld id="{' + getUuid('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx') + '}" type="YVALUE">';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0"/>';
strXml +=' <a:pPr>';
strXml +=' <a:defRPr/>';
strXml +=' </a:pPr>';
strXml +=' <a:t>[' + encodeXmlEntities(obj.name) + ']</a:t>';
strXml +=' </a:fld>';
strXml +=' <a:r>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0" dirty="0"/>';
strXml +=' <a:t>)</a:t>';
strXml +=' </a:r>';
strXml +=' <a:endParaRPr lang="'+ (opts.lang || 'en-US') +'" dirty="0"/>';
}
strXml +=' </a:p>';
strXml +=' </c:rich>';
strXml +=' </c:tx>';
strXml +=' <c:spPr>';
strXml +=' <a:noFill/>';
strXml +=' <a:ln>';
strXml +=' <a:noFill/>';
strXml +=' </a:ln>';
strXml +=' <a:effectLst/>';
strXml +=' </c:spPr>';
strXml +=' <c:showLegendKey val="0"/>';
strXml +=' <c:showVal val="0"/>';
strXml +=' <c:showCatName val="0"/>';
strXml +=' <c:showSerName val="0"/>';
strXml +=' <c:showPercent val="0"/>';
strXml +=' <c:showBubbleSize val="0"/>';
strXml +=' <c:showLeaderLines val="1"/>';
strXml +=' <c:extLst>';
strXml +=' <c:ext uri="{CE6537A1-D6FC-4f65-9D91-7224C49458BB}" xmlns:c15="http://schemas.microsoft.com/office/drawing/2012/chart">';
strXml +=' <c15:dlblFieldTable/>';
strXml +=' <c15:showDataLabelsRange val="0"/>';
strXml +=' </c:ext>';
strXml +=' <c:ext uri="{C3380CC4-5D6E-409C-BE32-E72D297353CC}" xmlns:c16="http://schemas.microsoft.com/office/drawing/2014/chart">';
strXml +=' <c16:uniqueId val="{' + "00000000".substring(0,8-(idx+1).toString().length).toString() + (idx+1) + chartUuid + '}"/>';
strXml +=' </c:ext>';
strXml +=' </c:extLst>';
strXml +='</c:dLbl>';
}
});
strXml +='</c:dLbls>';
}
if (opts.dataLabelFormatScatter == 'XY') {
strXml +='<c:dLbls>';
strXml +=' <c:spPr>';
strXml +=' <a:noFill/>';
strXml +=' <a:ln>';
strXml +=' <a:noFill/>';
strXml +=' </a:ln>';
strXml +=' <a:effectLst/>';
strXml +=' </c:spPr>';
strXml +=' <c:txPr>';
strXml +=' <a:bodyPr>';
strXml +=' <a:spAutoFit/>';
strXml +=' </a:bodyPr>';
strXml +=' <a:lstStyle/>';
strXml +=' <a:p>';
strXml +=' <a:pPr>';
strXml +=' <a:defRPr/>';
strXml +=' </a:pPr>';
strXml +=' <a:endParaRPr lang="en-US"/>';
strXml +=' </a:p>';
strXml +=' </c:txPr>';
strXml +=' <c:showLegendKey val="0"/>';
strXml +=' <c:showVal val="'+ opts.showLabel ? "1" : "0" + '"/>';
strXml +=' <c:showCatName val="'+ opts.showLabel ? "1" : "0" + '"/>';
strXml +=' <c:showSerName val="0"/>';
strXml +=' <c:showPercent val="0"/>';
strXml +=' <c:showBubbleSize val="0"/>';
strXml +=' <c:extLst>';
strXml +=' <c:ext uri="{CE6537A1-D6FC-4f65-9D91-7224C49458BB}" xmlns:c15="http://schemas.microsoft.com/office/drawing/2012/chart">';
strXml +=' <c15:showLeaderLines val="1"/>';
strXml +=' </c:ext>';
strXml +=' </c:extLst>';
strXml +='</c:dLbls>';
}
strXml +=' <a:fld id="{' + getUuid('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx') + '}" type="XVALUE">';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0"/>';
strXml +=' <a:pPr>';
strXml +=' <a:defRPr/>';
strXml +=' </a:pPr>';
strXml +=' <a:t>[' + encodeXmlEntities(obj.name) + '</a:t>';
strXml +=' </a:fld>';
strXml +=' <a:r>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0" dirty="0"/>';
strXml +=' <a:t>, </a:t>';
strXml +=' </a:r>';
strXml +=' <a:fld id="{' + getUuid('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx') + '}" type="YVALUE">';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0"/>';
strXml +=' <a:pPr>';
strXml +=' <a:defRPr/>';
strXml +=' </a:pPr>';
strXml +=' <a:t>[' + encodeXmlEntities(obj.name) + ']</a:t>';
strXml +=' </a:fld>';
strXml +=' <a:r>';
strXml +=' <a:rPr lang="'+ (opts.lang || 'en-US') +'" baseline="0" dirty="0"/>';
strXml +=' <a:t>)</a:t>';
strXml +=' </a:r>';
strXml +=' <a:endParaRPr lang="'+ (opts.lang || 'en-US') +'" dirty="0"/>';
}
strXml +=' </a:p>';
strXml +=' </c:rich>';
strXml +=' </c:tx>';
strXml +=' <c:spPr>';
strXml +=' <a:noFill/>';
strXml +=' <a:ln>';
strXml +=' <a:noFill/>';
strXml +=' </a:ln>';
strXml +=' <a:effectLst/>';
strXml +=' </c:spPr>';
strXml +=' <c:showLegendKey val="0"/>';
strXml +=' <c:showVal val="0"/>';
strXml +=' <c:showCatName val="0"/>';
strXml +=' <c:showSerName val="0"/>';
strXml +=' <c:showPercent val="0"/>';
strXml +=' <c:showBubbleSize val="0"/>';
strXml +=' <c:showLeaderLines val="1"/>';
strXml +=' <c:extLst>';
strXml +=' <c:ext uri="{CE6537A1-D6FC-4f65-9D91-7224C49458BB}" xmlns:c15="http://schemas.microsoft.com/office/drawing/2012/chart">';
strXml +=' <c15:dlblFieldTable/>';
strXml +=' <c15:showDataLabelsRange val="0"/>';
strXml +=' </c:ext>';
strXml +=' <c:ext uri="{C3380CC4-5D6E-409C-BE32-E72D297353CC}" xmlns:c16="http://schemas.microsoft.com/office/drawing/2014/chart">';
strXml +=' <c16:uniqueId val="{' + "00000000".substring(0,8-(idx+1).toString().length).toString() + (idx+1) + chartUuid + '}"/>';
strXml +=' </c:ext>';
strXml +=' </c:extLst>';
strXml +='</c:dLbl>';
}
});
strXml +='</c:dLbls>';
}
if ( opts.dataLabelFormatScatter == 'XY' ) {
strXml +='<c:dLbls>';
strXml +=' <c:spPr>';
strXml +=' <a:noFill/>';
strXml +=' <a:ln>';
strXml +=' <a:noFill/>';
strXml +=' </a:ln>';
strXml +=' <a:effectLst/>';
strXml +=' </c:spPr>';
strXml +=' <c:txPr>';
strXml +=' <a:bodyPr>';
strXml +=' <a:spAutoFit/>';
strXml +=' </a:bodyPr>';
strXml +=' <a:lstStyle/>';
strXml +=' <a:p>';
strXml +=' <a:pPr>';
strXml +=' <a:defRPr/>';
strXml +=' </a:pPr>';
strXml +=' <a:endParaRPr lang="en-US"/>';
strXml +=' </a:p>';
strXml +=' </c:txPr>';
strXml +=' <c:showLegendKey val="0"/>';
strXml +=' <c:showVal val="'+ opts.showLabel ? "1" : "0" + '"/>';
strXml +=' <c:showCatName val="'+ opts.showLabel ? "1" : "0" + '"/>';
strXml +=' <c:showSerName val="0"/>';
strXml +=' <c:showPercent val="0"/>';
strXml +=' <c:showBubbleSize val="0"/>';
strXml +=' <c:extLst>';
strXml +=' <c:ext uri="{CE6537A1-D6FC-4f65-9D91-7224C49458BB}" xmlns:c15="http://schemas.microsoft.com/office/drawing/2012/chart">';
strXml +=' <c15:showLeaderLines val="1"/>';
strXml +=' </c:ext>';
strXml +=' </c:extLst>';
strXml +='</c:dLbls>';
}
}

Expand Down Expand Up @@ -5440,14 +5439,14 @@ var PptxGenJS = function(){
}
};

// Basic UUID Generator Adapted from:
// Basic UUID Generator Adapted from:
// https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript#answer-2117523
function getUuid(uuidFormat) {
return uuidFormat.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
}

// [Node.js] support
if ( NODEJS ) {
Expand Down
38 changes: 26 additions & 12 deletions examples/pptxgenjs-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1467,16 +1467,19 @@ function genSlides_Chart(pptx) {
{ name:'Train', values:[99, 88, 77, 89, 99, 99] },
{ name:'Bus', values:[21, 22, 25, 49, 59, 69] }
];
var arrDataScatterLabels = [
{ name:'X-Axis', values:[1, 10, 20, 30, 40, 50] },
{ name:'Y-Value 1', values:[11, 23, 31, 45], labels:['Red 1', 'Red 2', 'Red 3', 'Red 4'] },
{ name:'Y-Value 2', values:[21, 38, 47, 59], labels:['Blue 1', 'Blue 2', 'Blue 3', 'Blue 4'] }
];

// 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,
Expand All @@ -1500,16 +1503,25 @@ function genSlides_Chart(pptx) {
};
slide.addChart( pptx.charts.SCATTER, arrDataScatter2, optsChartScat2 );

// BOTTOM-LEFT
// BOTTOM-LEFT: (Labels)
var optsChartScat3 = { x:0.5, y:4.0, w:'45%', h:3,
fill: 'f2f9fc',
catAxisOrientation: 'maxMin',
valAxisOrientation: 'maxMin',
//catAxisOrientation: 'maxMin',
//valAxisOrientation: 'maxMin',
showCatAxisTitle: false,
showValAxisTitle: false,
lineSize: 0
lineSize: 0,

catAxisTitle : "Data Point Labels",
catAxisTitleColor : "0088CC",
catAxisTitleFontSize: 14,
showCatAxisTitle : true,

// Data Labels
showLabel : true, // Must be set to true or labels will not be shown
dataLabelFormatScatter: 'custom', // Can be set to `custom` (default), `customXY`, or `XY`.
};
slide.addChart( pptx.charts.SCATTER, arrDataScatter1, optsChartScat3 );
slide.addChart( pptx.charts.SCATTER, arrDataScatterLabels, optsChartScat3 );

// BOTTOM-RIGHT
var optsChartScat4 = { x:7.0, y:4.0, w:'45%', h:3 };
Expand All @@ -1524,8 +1536,8 @@ function genSlides_Chart(pptx) {

var arrDataBubble1 = [
{ name:'X-Axis', values:[0.3,0.6,0.9,1.2,1.5,1.7] },
{ name:'Y-Value 1', values:[1.3,6,3.5,2.5,7.5,5], sizes:[1,4,2,3,7,4] },
{ name:'Y-Value 2', values:[3,9,5,7,9,10], sizes:[9,7,10,2,4,5] }
{ name:'Y-Value 1', values:[1.3, 9, 7.5, 2.5, 7.5, 5], sizes:[1,4,2,3,7,4] },
{ name:'Y-Value 2', values:[ 5, 3, 2, 7, 2, 10], sizes:[9,7,9,2,4,8] }
];
var arrDataBubble2 = [
{ name:'X-Axis', values:[1, 2, 3, 4, 5, 6] },
Expand All @@ -1538,8 +1550,7 @@ function genSlides_Chart(pptx) {
var optsChartBubble1 = { x:0.5, y:0.6, w:'45%', h:3,
chartColors: ['4477CC','ED7D31'],
chartColorsOpacity: 40,
dataBorder: {pt:1, color:'FFFFFF'},
showValue: true
dataBorder: {pt:1, color:'FFFFFF'}
};
slide.addText( '.', {x:0.5, y:0.6, w:6.0, h:3.0, fill:'F1F1F1', color:'F1F1F1'} );
slide.addChart( pptx.charts.BUBBLE, arrDataBubble1, optsChartBubble1 );
Expand Down Expand Up @@ -1567,7 +1578,10 @@ function genSlides_Chart(pptx) {
valAxisOrientation: 'maxMin',
showCatAxisTitle: false,
showValAxisTitle: false,
dataBorder: {pt:2, color:'FFFFFF'}
valAxisMinVal: 0,
dataBorder: {pt:2, color:'FFFFFF'},
dataLabelColor: 'FFFFFF',
showValue: true
};
slide.addChart( pptx.charts.BUBBLE, arrDataBubble1, optsChartBubble3 );

Expand Down

0 comments on commit c92a5a9

Please sign in to comment.