<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();
});
This Pen doesn't use any external CSS resources.