- (function() {
- $("#chart-container").insertFusionCharts({
- type: 'world',
- renderAt: 'chart-container',
- width: '800',
- height: '480',
- dataFormat: 'json',
- dataSource: {
- "chart": {
- "caption": "Global Population Density",
- "theme": "fint",
- "showLabels": "1",
- "formatNumberScale": "0"
- },
- "colorrange": {
- "minvalue": "0",
- "startlabel": "Low",
- "endlabel": "High",
- "code": "#FF4411",
- "gradient": "1",
- "color": [{
- "maxvalue": "25",
- "code": "#FFDD44",
- "displayValue": "Median"
- }, {
- "maxvalue": "100",
- "code": "#6baa01"
- }]
- },
- "data": [{
- "id": "NA",
- "value": "22.1",
- "showLabel": "1",
- "displayValue": "Moderate"
-
-
- }, {
- "id": "SA",
- "value": "22.0",
- "showLabel": "1",
- "displayValue": "Moderate"
- }, {
- "id": "AS",
- "value": "95.0",
- "showLabel": "1",
- "displayValue": "Dense"
- }, {
- "id": "EU",
- "value": "72.5",
- "showLabel": "1",
- "displayValue": "Dense"
- }, {
- "id": "AF",
- "value": "33.7",
- "showLabel": "1",
- "displayValue": "Moderate"
- }, {
- "id": "AU",
- "value": "3.2",
- "showLabel": "1",
- "displayValue": "Sparse"
- }]
- }
- });
- }());
`
type` attribute defines the map we are going to plot - `
world` in this example. Size of the map is defined using `
height` and `
width` attributes. `
chart` object under `
dataSource` contains map configuration options like caption, background color, data plot color and display formats for numbers etc. `
data` array contains the data being plotted inside the map.
Conclusion
My objective with this tutorial was to get you started with making maps in jQuery for your website. But this is just the tip of the iceberg, and there is a lot more you can do with it. If you are interested in exploring further, check out the following resources: