<div style="font-size:10px">
			Thanks/Credits to the following code used in this demo:
			<ul>
				<li><a href="https://bl.ocks.org/mbostock/3885304">D3 Column Chart https://bl.ocks.org/mbostock by Mike Bostock</a></li>
				<li><a href="https://bl.ocks.org/mbostock/3887193">D3 Donut Chart https://bl.ocks.org/mbostock by Mike Bostock</a></li>
				<li><a href="http://dmitrybaranovskiy.github.io/raphael/">RaphaelJS Pie Chart by Dmitry Baranovskiy</a></li>
				<li><a href="http://dmitrybaranovskiy.github.io/raphael/">RaphaelJS Curved Line/Area Chart by Dmitry Baranovskiy</a></li>
			</ul>
	</div>

	<select id="selChartType" onchange="chartTypeChanged()">
		<option value="pie">RaphaelJS Pie</option>
		<option value="curvedline">RaphaelJS Curved Line</option>
		<option value="donut">D3 Donut</option>
		<option value="column">D3 Column</option>
	</select>
	
	<div id="mapDiv" style="height:100%;width:100%;position:absolute;left:0px;top:150px"></div>
#mapDiv {
  height:100%;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}
var mapCfg = '<mapView createdBy="name:cMapsAnalyticsDesigner;version:4.0" createdOn="8/19/2017"><viewName>My View</viewName><viewDescription></viewDescription><tags></tags><templateVersion></templateVersion><key>enter_your_own_key_d8d37yxn</key><googlePremierKey></googlePremierKey><sslEnabled>true</sslEnabled><baseMapTileUrl><![CDATA[]]></baseMapTileUrl><baseMapTileCfg><![CDATA[{}]]></baseMapTileCfg><useGoogleBase>true</useGoogleBase><useMapboxBase>false</useMapboxBase><useHereBase>false</useHereBase><useCartoBase>false</useCartoBase><useEsriBase>false</useEsriBase><dynamicZoomEnabled>true</dynamicZoomEnabled><currentLocationOnLoadDisabled>true</currentLocationOnLoadDisabled><panCoords></panCoords><zoomLevel></zoomLevel><dynamicZoomOnShapeSelect>false</dynamicZoomOnShapeSelect><dynamicZoomOnClusterSelect>false</dynamicZoomOnClusterSelect><dynamicZoomOnPointSelect>true</dynamicZoomOnPointSelect><showBreadcrumbsOnDrill>true</showBreadcrumbsOnDrill><dynamicZoomOnDrill>true</dynamicZoomOnDrill><multiSelectEnabled>false</multiSelectEnabled><adhocPanelVisibility>false</adhocPanelVisibility><radiusMeasureUnit>km</radiusMeasureUnit><indoorEnabled>true</indoorEnabled><useAdvancedInfowindow>false</useAdvancedInfowindow><showSearchBarWhenAIWHidden>true</showSearchBarWhenAIWHidden><showAIWOnLoad>true</showAIWOnLoad><showAIWOnLocSelect>true</showAIWOnLocSelect><includeAdvancedInfWinSummaryCard>true</includeAdvancedInfWinSummaryCard><includeAdvancedInfWinFilterCard>true</includeAdvancedInfWinFilterCard><includeAdvancedInfWinRankCard>true</includeAdvancedInfWinRankCard><includeAdvancedInfWinTimeCard>true</includeAdvancedInfWinTimeCard><includeAdvancedInfWinSearchCard>true</includeAdvancedInfWinSearchCard><includeAdvancedInfWinSearchPlacesCard>true</includeAdvancedInfWinSearchPlacesCard><includeAdvancedInfWinExportCard>true</includeAdvancedInfWinExportCard><includeAdvancedInfWinDriveCard>true</includeAdvancedInfWinDriveCard><includeAdvancedInfWinRadiusCard>true</includeAdvancedInfWinRadiusCard><includeAdvancedInfWinDrillCard>true</includeAdvancedInfWinDrillCard><includeAdvancedInfWinCustomCard>true</includeAdvancedInfWinCustomCard><advancedInfoWindowJsonCfg></advancedInfoWindowJsonCfg><infoWindowFontFamily>Arial</infoWindowFontFamily><infoWindowFontSize>12</infoWindowFontSize><infoWindowFontColor>000000</infoWindowFontColor><infoWindowFontAlign>left</infoWindowFontAlign><infoWindowUseBoldFont>false</infoWindowUseBoldFont><infoWindowFontUnderlineEnabled>false</infoWindowFontUnderlineEnabled><infWinItalicFontEnabled>false</infWinItalicFontEnabled><infoWindowVisibility>true</infoWindowVisibility><infoWindowValueVisibility>true</infoWindowValueVisibility><infoWindowLayerNameVisibility>true</infoWindowLayerNameVisibility><glowVisibility>true</glowVisibility><glowColor>0000ff</glowColor><baseMapImageryStyleType>styleTypeRoadmap</baseMapImageryStyleType><enablePoiInteractivity>true</enablePoiInteractivity><showTrafficLayer>false</showTrafficLayer><showTransitLayer>false</showTransitLayer><showBikelayer>false</showBikelayer><legendVisibility>false</legendVisibility><clusterToggleControlVisibility>false</clusterToggleControlVisibility><navigationControlVisibility>true</navigationControlVisibility><currentLocationControlVisibility>false</currentLocationControlVisibility><mapReady>true</mapReady><layerSelected>false</layerSelected><zoomChanged>false</zoomChanged><centerChanged>false</centerChanged><reverseGeocodeResponse>false</reverseGeocodeResponse><latLngToReverseGeocode></latLngToReverseGeocode><geocodeResponse>false</geocodeResponse><addressToGeocode></addressToGeocode><visible>true</visible><indoorMapVisibility>false</indoorMapVisibility><showPinsForIndoorMapLocations>false</showPinsForIndoorMapLocations><directionPanelVisibility>false</directionPanelVisibility><directionWaypoints></directionWaypoints><currentLocation>false</currentLocation><useFreeApi>false</useFreeApi><layers><layer><name>My Layer</name><uid>e8570614-19b5-4def-8036-2536943e3479</uid><description></description><esriMapServerURL></esriMapServerURL><esriMapServerLayerName></esriMapServerLayerName><letGisHandleClicks>false</letGisHandleClicks><type>svg</type><sankeyJsonData></sankeyJsonData><cartoDBJsonVizURL></cartoDBJsonVizURL><cartoDBSubLayerId>null</cartoDBSubLayerId><cartoDBUser></cartoDBUser><cartoDBSqlQuery></cartoDBSqlQuery><cartoDBMeasFieldName>null</cartoDBMeasFieldName><cartoDBDrillColName>null</cartoDBDrillColName><cartoDBTorqueJsonVizURL></cartoDBTorqueJsonVizURL><cartoDBUsername></cartoDBUsername><cartoDBMapName></cartoDBMapName><cartoDBAuthKey></cartoDBAuthKey><cartoDBMapLayerName></cartoDBMapLayerName><cartoDBMapLayerInteractivity></cartoDBMapLayerInteractivity><cartoDBMapLayerTorqueCSS></cartoDBMapLayerTorqueCSS><useLayerSpecificApiInfWins>true</useLayerSpecificApiInfWins><useLayerSpecificApiTooltips>true</useLayerSpecificApiTooltips><cartoDBMapLayerUseHttps>true</cartoDBMapLayerUseHttps><indoorMapUrl></indoorMapUrl><bufferDependentLayer>none</bufferDependentLayer><bufferDistUnit>meters</bufferDistUnit><bufferPlacement>back</bufferPlacement><shapeFileType>customUrl</shapeFileType><shapeFileUrl></shapeFileUrl><shapeGeocoderLevel></shapeGeocoderLevel><dataKeysUrl></dataKeysUrl><dataSourceType>statictsv</dataSourceType><dataSource><![CDATA[Loc	Label	Sales	Leads	Spend\r\n \
37.7693911,-122.4290072	Dr. Goldstein	350	1041	1187\r\n \
37.790998,-122.431254	Dr. Pine	311	506	933\r\n \
37.7480245,-122.4208806	Dr. Smith	312	599	735\r\n \
37.7956765,-122.4092976	Dr. Rasheed	16	1343	625\r\n \
37.7630855,-122.4578733	Dr. Dole	1887	593	615\r\n \
37.7739893,-122.4544912	Dr. Douglus	18	674	861]]></dataSource><dataSourceFirstRowTitles>true</dataSourceFirstRowTitles><dataSourceColumnDefs>[{"dataField":"dsLocationColumn","fieldDisplayName":"Loc","colPosition":0},{"dataField":"dsLabelColumn","fieldDisplayName":"Label","colPosition":1},{"dataField":"dsValueColumn","fieldDisplayName":"Sales","colPosition":2},{"dataField":"dsValueColumn1","fieldDisplayName":"Leads","colPosition":3},{"dataField":"dsValueColumn2","fieldDisplayName":"Spend","colPosition":4}]</dataSourceColumnDefs><transparency>100</transparency><enabled>true</enabled><iconSize>20</iconSize><iconType>callout</iconType><clusterStyle>disabled</clusterStyle><clusterRadiusUnitOfMeasure>auto</clusterRadiusUnitOfMeasure><clusterRadiusDistance></clusterRadiusDistance><dynamicSizeEnabled>false</dynamicSizeEnabled><useLogScale>false</useLogScale><visibility>true</visibility><minZoomVis></minZoomVis><maxZoomVis></maxZoomVis><drillLevel></drillLevel><drillEventTrigger>none</drillEventTrigger><drillParent>none</drillParent><drillVisibilityOverride>false</drillVisibilityOverride><useCurrentLocationAsStartPoint>false</useCurrentLocationAsStartPoint><travelMode>Driving</travelMode><travelUnits>IMPERIAL</travelUnits><markerLayerBindings></markerLayerBindings><wmsURL></wmsURL><wmsStyleString></wmsStyleString><wmsLayerString></wmsLayerString><layerColor>ffa426</layerColor><alerts><alertIcons>pin,pin</alertIcons><alertType>type-none</alertType><alertValues>50,100</alertValues><numAlertLevels>2</numAlertLevels><alertHeatmapVals>50,100</alertHeatmapVals><alertDefinition>high-values-good</alertDefinition><alertColors>c0c0c0,008800</alertColors></alerts></layer></layers></mapView>';

		var chartType = "column";//"curvedline", "donut", "pie", "column"
		var measureColors = [["#0b8dce","#ffa426","#c0c0c0"]];
		var cMap;
		var uf = new centigon.util.UtilityFactory();
		var domUtil = uf.getDomUtil();
		var renderedLayerToChartIds = {};
		var chartSize = 250;
		var currentSvgLayer;
		var currentChartId;
		
		function buildMap(){

			cMap = new centigon.locationIntelligence.MapView();
			
			cMap.onLayersReady = function(){
			
				cMap.colors(measureColors);
				overrideSvgRendering();
			}
			
			cMap.parseConfig(mapCfg);
		}
		
		function chartTypeChanged(){
		
			var mySvgLayers = uf.getCollectionIterator(cMap.cMap.getAllLayersByType(centigon.mapping.Layer.TYPE.SVG));
			while(mySvgLayers.hasNext()){
			
				mySvgLayers.next().renderSvg();
			}
		}
		
		function overrideSvgRendering(){
		
			var renderSvg = function(){
			
				centigon.mapping.SvgLayer.prototype.renderSvg.call(this);
				
				if(!this.svgOverlay){
					return;
				}
				
				createDataVisForLayer(this);
			}
			
			var mySvgLayers = uf.getCollectionIterator(cMap.cMap.getAllLayersByType(centigon.mapping.Layer.TYPE.SVG));
			while(mySvgLayers.hasNext()){
			
				mySvgLayers.next().renderSvg = renderSvg;
			}
		}
		
		function createDataVisForLayer(svgLayer){
		
			currentSvgLayer = svgLayer;
			clearLayerDisplay();
			
			var opts = uf.getCollectionIterator(svgLayer.optsToRender);
			while(opts.hasNext()){
			
				currentMarkerOption = opts.next();
				
				currentChartId = appendNewChartSvgHolder();
				addSvgIdToRenderedChartsCache();
				
				createChart();
			}
		}
		
		function createChart(){
		
			var chartData = getMeasureLabelsAndValsForOption();
			var chartType = domUtil.getDomObjectById("selChartType").val();
			var xOriginPos = chartSize/2;
			var yOriginPos = chartSize/2;
			var size = (chartType === "pie") ? chartSize/4 : chartSize;//radius in case of pie
			var values = currentSvgLayer.values();
			var labels = currentSvgLayer.labels();
			
			switch(chartType){
			
				case "pie":
				
					Raphael(currentChartId, chartSize, chartSize).
						pieChart(xOriginPos, yOriginPos, size, chartData.values, chartData.labels, "#000000", chartData.colors);
					break;
				case "curvedline":
				
					createCurvedLineChart({svgId:currentChartId, width:size, height:size, labels:chartData.labels, data:chartData.values, color:currentSvgLayer.defaultDisplayObjectColor});
					break;
				case "donut":
				
					d3Donut({svgId:currentChartId, width:size, height:size, data:getDataInD3Format(chartData), colors:chartData.colors});
					break;
					
				case "column":
				
					d3ColumnChart({svgId:currentChartId, width:size, height:size, data:getDataInD3Format(chartData), colors:chartData.colors});
					break;	
			}
		}
		
		function appendNewChartSvgHolder(){
		
			var xPos = currentMarkerOption.x-chartSize/2;
			var yPos = currentMarkerOption.y-chartSize/2;
		
			var divDomObj = domUtil.getDomObjectById(currentSvgLayer.getDivId());
			var newSvgId = domUtil.getRandomDivId();
			divDomObj.append('<svg id="'+newSvgId+'"></svg>');
			
			var sgvDomObj = domUtil.getDomObjectById(newSvgId);
			sgvDomObj.css("position", "absolute");
			sgvDomObj.css("height", chartSize + "px");
			sgvDomObj.css("width", chartSize + "px");
			sgvDomObj.css("top", yPos + "px");
			sgvDomObj.css("left", xPos + "px");
			
			return newSvgId;
		}
		
		function clearLayerDisplay(){
		
			currentSvgLayer.clearSvg();
			
			if(renderedLayerToChartIds[currentSvgLayer.positionInMapDataProvider]){
			
				var chartIds = uf.getCollectionIterator(renderedLayerToChartIds[currentSvgLayer.positionInMapDataProvider]);
				while(chartIds.hasNext()){
				
					domUtil.getDomObjectById(chartIds.next()).remove();
				}
			}
			
			renderedLayerToChartIds[currentSvgLayer.positionInMapDataProvider] = [];
		}
		
		function addSvgIdToRenderedChartsCache(){
		
			if(!renderedLayerToChartIds[currentSvgLayer.positionInMapDataProvider]){
			
				renderedLayerToChartIds[currentSvgLayer.positionInMapDataProvider] = [];
			}
			
			renderedLayerToChartIds[currentSvgLayer.positionInMapDataProvider].push(currentChartId);
		}
		
		function getDataInD3Format(chartData){
		
			var d3Data = [];
			var chartLbls = uf.getCollectionIterator(chartData.labels); 
			var chartVals = uf.getCollectionIterator(chartData.values); 
			var chartColors = uf.getCollectionIterator(chartData.colors); 
			while(chartLbls.hasNext()){
			
				d3Data.push({label:chartLbls.next(), value:chartVals.next(),color:chartColors.next()});
			}
			
			return d3Data;
		}
		
		function getMeasureLabelsAndValsForOption(){
		
			var optPosition = currentMarkerOption.markerOptions.id;
			var measureLabelsAtLocation = currentSvgLayer.measureNames();
			var measureValArrays = uf.getCollectionIterator(currentSvgLayer.measures());
			var measureValsAtLocation = [];
			
			while(measureValArrays.hasNext()){
			
				measureValsAtLocation.push(measureValArrays.next()[optPosition]);
			}
			
			return {labels:measureLabelsAtLocation, values:measureValsAtLocation, 
					colors:currentSvgLayer.displayObjectColors.cloneSourceArray()};
		}

//WHEN DOCUMENT LOADED INITIALIZE THE MAP
$(document).ready(function(){
// CALL THE FUNCTION
buildMap();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
  2. https://api.cmapsanalytics.net/mapview?version=4
  3. https://d3js.org/d3.v4.min.js
  4. https://gmapsplugin.net/cmapsanalytics/demo/SVGChartExplorer/raphael.js
  5. https://gmapsplugin.net/cmapsanalytics/demo/SVGChartExplorer/pie.js
  6. https://gmapsplugin.net/cmapsanalytics/demo/SVGChartExplorer/popup.js
  7. https://gmapsplugin.net/cmapsanalytics/demo/SVGChartExplorer/curvedlinechart.js
  8. https://gmapsplugin.net/cmapsanalytics/demo/SVGChartExplorer/d3donut.js
  9. https://gmapsplugin.net/cmapsanalytics/demo/SVGChartExplorer/d3column.js