ThemeGraph


The graph map generates statistical graphs for objects to indicate thematic values. The graph map is the map that can display the statistical tables.

A graph map can be based on a multiple thematic variables, and reflect multi-attributes, which means you can draw several thematic values on a graph. The graph map forms a horizontal and vertical contrast between the region itself and the other regions.There are several kinds of graphs provided in SuperMap Online, included area, step, line, point, column, 3D column, pie, 3D pie, rose, 3D rose, stacked bar, 3D stacked bar and Ring, etc.

Both server side and client side can make graph map. The graph map made on the server side is loaded to the map in the form of images, so it is static; while the graph map made on the client side is dynamic, which means that you can use mouse to interact with the graph map. For example, when you hover the mouse, the element under the mouse is highlighted; when you click on the map, a message box pops up. So, it is every flexible. This sample will tell you how to make 3D bar chart for the graph map on both of server side and client side.

Make 3D bar chart on the server side

The graph map is made by the REST map service on the server side. The service is called by SuperMap.REST.ThemeGraph in iClient, and the graph type is specified by ThemeGraphType, such as SuperMap.REST.ThemeGraphType.BAR3D.

Step 1 Initialize the map

var map, local, baseLayer, layersID, themeLayer,
        url = "http://www.supermapol.com/iserver/services/map_City5/rest/maps/JingjinMap";
var value="IbooSg6gIBmhIRaesVgjSED0",
        name = "ak";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "ak");
function init(){
    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.LayerSwitcher(),
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        })]
                                                             });
    baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("JingjinMap", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
    baseLayer.events.on({"layerInitialized":addLayer});
}
function addLayer() {
    map.addLayer(baseLayer);
    map.setCenter(new SuperMap.LonLat(117, 40), 0);
    map.allOverlays = true;
}

Step 2 Make graph map of 3D bar chart with custom style

// Use these two fields Pop_Rate95 and Pop_Rate99 in dataset BaseMap_R in Jingjin datasource to make graph map
function addThemeGraph() {
    removeTheme();
    // Create the object of graph map. items in ThemeGraph is required to set.
    // theme, dataSourceName and datasetName in ThemeParaemters are required to set
    var style1 = new SuperMap.REST.ServerStyle({
        fillForeColor: new SuperMap.REST.ServerColor(92,73,234),
        lineWidth: 0.1
    }),
            style2 = new SuperMap.REST.ServerStyle({
                fillForeColor: new SuperMap.REST.ServerColor(211,111,240),
                lineWidth: 0.1
            }),
            item1 = new SuperMap.REST.ThemeGraphItem({
                caption: "1992-1995 Population Growth",
                graphExpression: "Pop_Rate95",
                uniformStyle: style1
            }),
            item2 = new SuperMap.REST.ThemeGraphItem({
                caption: "1995-1999 Population Growth",
                graphExpression: "Pop_Rate99",
                uniformStyle: style2
            }),
            themeGraph  = new SuperMap.REST.ThemeGraph({
                items: new Array(item1,item2),
                barWidth: 0.03,
                graduatedMode: SuperMap.REST.GraduatedMode.SQUAREROOT,
                graphAxes: new SuperMap.REST.ThemeGraphAxes({
                    axesDisplayed: true
                }),
                graphSize: new SuperMap.REST.ThemeGraphSize({
                    maxGraphSize: 1,
                    minGraphSize: 0.35
                }),
                graphText: new SuperMap.REST.ThemeGraphText({
                    graphTextDisplayed: true,
                    graphTextFormat: SuperMap.REST.ThemeGraphTextFormat.VALUE,
                    graphTextStyle: new SuperMap.REST.ServerTextStyle({
                        sizeFixed: true,
                        fontHeight: 9,
                        fontWidth: 5
                    })
                }),
                graphType: SuperMap.REST.ThemeGraphType.BAR3D
            }),

            // Parameter object of thematic map
            themeParameters = new SuperMap.REST.ThemeParameters({
                themes: [themeGraph],
                dataSourceNames: ["Jingjin"],
                datasetNames: ["BaseMap_R"]
            }),

            //Interact with server side
            themeService=new SuperMap.REST.ThemeService(url, {
                eventListeners: {
                    "processCompleted": ThemeCompleted,
                    "processFailed": themeFailed
                }
            });
    themeService.processAsync(themeParameters);
}

Step 3 Add the graph map to the map


// Display the graph map. The graph map on the server side is a resource which has a unique ID and URL.
// To display the graph map, you should assign the ID of the graph map resource to the property of layersID
function ThemeCompleted(themeEventArgs){
    if (themeEventArgs.result.resourceInfo.id){
        themeLayer = new SuperMap.Layer.TiledDynamicRESTLayer("PopulationDistributionMap",
                                                                                                                    url, {cacheEnabled:false,transparent: true,
                                                                                                                                layersID: themeEventArgs.result.resourceInfo.id}, {maxResolution:"auto"});
        themeLayer.events.on({"layerInitialized":addThemelayer});

    }
}
function addThemelayer() {
    map.addLayer(themeLayer);
}

Online Demo and Code Editing

You can view the complete code online and experience the demonstration effect, and you can also edit the online code to check the result immediately.

Make 3D bar chart on the client side

The graph thematic map on the client uses data-driven visible method. For users, they only focus on two parts: data and chart. Users add their feature data to the graph map layer, and the chartSetting is configured by the chart in the layer where users want to display the graph map, and finally the chart is drawn on the layer.

The graph map on the client side requires SuperMap.Layer.Graph and SuperMap.Feature.Theme.Graph. If you use feature data to make graph map in the graph map layer, the layer must be dependent on the instance of the class of SuperMap.Feature.Theme.Graph. The graph map element model is so called chart model or chart class.

SuperMap.Feature.Theme.Graph is the basic abstract model for the graph element model. SuperMap.Feature.Theme.Graph cannot be initialized, but its subclass (chart model/chart class) must be realized by the API assembleShapes().

The chart class isn't be added to the library of iClient, so you should reference the chart class files before using graph map on the client side. The files include:

Chart name Chart type Class name File name
Bar Chart Bar uperMap.Feature.Theme.Bar Bar.js
Line Chart Line SuperMap.Feature.Theme.Line Line.js
Pie Chart Pie SuperMap.Feature.Theme.Pie Pie.js
3D Bar Chart Bar3D SuperMap.Feature.Theme.Bar3D Bar3D.js
Point Chart Point SuperMap.Feature.Theme.Point Point.js
Ring Chart Ring SuperMap.Feature.Theme.Ring Ring.js

Step 1 Initialize the map

var map, local, layer, themeLayer,
        url = "http://www.supermapol.com/iserver/services/map_China4003/rest/maps/China_4326";
var value="IbooSg6gIBmhIRaesVgjSED0",
        name = "ak";
SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "ak");

// Initialize the information box div
var infoDom = document.createElement("div");
infoDom.style.position = "absolute";
infoDom.id = "infowin";

// Initialize the map, and check whether the browser supports Canvas
function init(){
    // The graph map module requires your browser to support Canvas rendering
    if(!document.createElement('canvas').getContext){
        alert('Your browser doesn't support Canvas, please uprade it');
        return;
    }

    map = new SuperMap.Map("map",{controls: [
        new SuperMap.Control.LayerSwitcher(),
        new SuperMap.Control.ScaleLine(),
        new SuperMap.Control.Zoom(),
        new SuperMap.Control.Navigation({
            dragPanOptions: {
                enableKinetic: true
            }
        })]
                                                             });
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
    layer.events.on({"layerInitialized":addLayer});
    ...
}

Step 2 Create graph map layer, and define the style of Bar3D


    // Create a 3D bar chart graph layer
    themeLayer = new SuperMap.Layer.Graph("ThemeLayer", "Bar3D");

    // The attribute fields for making the thematic map
    themeLayer.themeFields = ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"];

    // Configure chart parameters
    themeLayer.chartsSetting = {
        // width value, height value and codomain value; the three parameters are required.
        width: 260,
        height: 120,
        codomain: [0, 40000], // The threshold allows the chart to display. Data beyond this threshold cannot be used for chart making.
        // Front style of 3D Column (The side and top style of 3D column is the same to the front style)
        barFaceStyle: {
            stroke: true
        },
        // Set front style of 3D column by field
        barFaceStyleByFields: [{ fillColor: "#FFB980" }, { fillColor: "#5AB1EF" }, { fillColor: "#B6A2DE" }, { fillColor: "#2EC7C9" }, { fillColor: "#D87A80" }],
        // Front hover style of 3D Column (The side and top style of 3D column is the same to the front hover style)
        barFaceHoverStyle: {
            stroke: true,
            strokeWidth: 1,
            strokeColor: "#ffff00"
        },
        xShapeBlank: [15, 15, 15],   // Horizontal blank interval parameter
        axisYTick: 4,       // y axis value
        useXReferenceLine: true,         // Use reference line
        xReferenceLineStyle: {strokeColor: "#008acd", strokeOpacity: 0.4},         // Reference line style
        axisYLabels: ["40,000", "30,000", "20,000", "10,000", "0"],         // y axis label
        axisXLabels: ["2009", "2010", "2011", "2012", "2013"],       // x axis label
        backgroundStyle: {         // Background style
            fillColor: "#d1eeee",
            shadowBlur: 12,
            shadowColor: "#d1eeee"
        },
        backgroundRadius: [5, 5, 5, 5]       // Background round angle
    };

    // Register mousemove, mouseout events for thematic map (Note: theme layer carries the "on" function, and doesn't have the events object)
    themeLayer.on("mousemove", showInfoWin);
    themeLayer.on("mouseout", closeInfoWin);

    themeLayer.setOpacity(0.9);
}

Step 2 Create graph map layer, and define the style of Bar3D


// Create feature data, and the data of the thematic map must be SuperMap .Feature.Vector
function addThemeLayer() {
    clearThemeLayer();

    var features = [];
    for(var i = 0, len = chinaConsumptionLevel.length; i < len; i++){
        // Residents consumption level (Unit: Yuan)
        var provinceInfo = chinaConsumptionLevel[i];
        var geo = new SuperMap.Geometry.Point(provinceInfo[1], provinceInfo[2]);
        var attrs = {};
        attrs.NAME = provinceInfo[0];
        attrs.CON2009 = provinceInfo[3];
        attrs.CON2010 = provinceInfo[4];
        attrs.CON2011 = provinceInfo[5];
        attrs.CON2012 = provinceInfo[6];
        attrs.CON2013 = provinceInfo[7];

        var fea = new SuperMap.Feature.Vector(geo, attrs);
        features.push(fea);
    }

    themeLayer.addFeatures(features);
}

Step 2 Add base map and thematic map to your map

function addLayer() {
    map.addLayers([layer, themeLayer]);
    map.setCenter(new SuperMap.LonLat(104.067923,34.679943), 1);

Step 3 Pop up the window by clicking on

// Show the map window popup
function showInfoWin(e){
    // e.target is the graph object, i.e., the visual object of the data. In the 3D bar chart, it refers to the 3D bar.
    // refDataID of the graph object is the ID property of feature. It indicates that which data generates the graph
    // dataInfo of the graph object is the specific data for the graph. It has two properties, field and value
    if(e.target && e.target.refDataID && e.target.dataInfo){
        closeInfoWin();
        // Get the feature of the graph
        var fea = themeLayer.getFeatureById(e.target.refDataID);

        var info = e.target.dataInfo;

        // Popup contents
        var contentHTML = "<div style='padding: 2px; color: #000; background-color: #d1eeee';'>";
        contentHTML += "<strong>" + fea.attributes.NAME + "</strong>";

        contentHTML += "<hr style='margin: 3px'>";
        switch(info.field){
            case "CON2009":
                contentHTML += "Residents consumption level in 2009 <br/><strong>" + info.value + "</strong>(Yuan)";
                break;
            case "CON2010":
                contentHTML += "Residents consumption level in 2010 <br/><strong>" + info.value + "</strong>(Yuan)";
                break;
            case "CON2011":
                contentHTML += "Residents consumption level in 2011 <br/><strong>" + info.value + "</strong>(Yuan)";
                break;
            case "CON2012":
                contentHTML += "Residents consumption level in 2012 <br/><strong>" + info.value + "</strong>(Yuan)";
                break;
            case "CON2013":
                contentHTML += "Residents consumption level in 2013 <br/><strong>" + info.value + "</strong>(Yuan)";
                break;
            default:
                contentHTML += "No Data";
        }
        contentHTML += "</div>";

        infoDom.style.left = e.event.clientX + 40 + "px";
        infoDom.style.top = e.event.clientY - 25 + "px";
        infoDom.innerHTML = contentHTML;
        document.body.appendChild(infoDom);
    }
}

Online Demo and Code Editing

You can view the complete code online and experience the demonstration effect, and you can also edit the online code to check the result immediately.