- Chart Gallery
- Maps in Dashboard
- World Temperature
World Temperature
{
"map": {
"zIndex": 0,
"enabled": true,
"type": "map",
"title": {
"zIndex": 80,
"enabled": false,
"maxLength": null,
"fontSize": 16,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "center",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "center",
"text": "Chart Title",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"zIndex": 0,
"enabled": false
}
},
"background": {
"zIndex": 0.5,
"enabled": true
},
"tooltip": {
"enabled": true,
"title": {
"zIndex": 1,
"enabled": true,
"maxLength": null,
"fontSize": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": true,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 10,
"top": 10,
"bottom": 15,
"right": 20
},
"a11y": {
"enabled": true,
"mode": "chart-elements"
},
"autoRedraw": true,
"bounds": {
"top": "5%",
"height": "55%"
},
"contextMenu": {
"enabled": true
},
"credits": {
"text": "Special for: https://www.coursera.org/course/datavisualization",
"url": "https://www.coursera.org/course/datavisualization",
"alt": "AnyChart - JavaScript Charts designed to be embedded and integrated{{anychart-version}}",
"imgAlt": "AnyChart - JavaScript Charts",
"logoSrc": "https://d3njjcbhbojbot.cloudfront.net/web/images/favicons/icon-blue-32x32.png",
"enabled": true
},
"selectRectangleMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectRectangleMarqueeStroke": "#d3d3d3",
"legend": {
"zIndex": 200,
"enabled": true,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "bottom",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "...",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"inverted": true,
"itemsLayout": "vertical",
"iconSize": 15,
"width": 200,
"height": null,
"maxWidth": null,
"maxHeight": null,
"position": "right",
"positionMode": "outside",
"drag": false,
"itemsFormat": null,
"titleFormat": null,
"itemsHAlign": "left",
"itemsSpacing": 10,
"itemsSourceMode": "default",
"hoverCursor": "pointer",
"iconTextSpacing": 5,
"align": "top",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 10,
"top": 0,
"bottom": 10,
"right": 10
},
"background": {
"enabled": false
},
"title": {
"enabled": true,
"maxLength": null,
"fontSize": 15,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#7c868e",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": true,
"width": null,
"height": null,
"align": "left",
"text": "<span style=\"font-weight: bold\">2014</span><br/><span style=\"font-size: 12px;\">Global: <span style=\"color: #212121;\">14.75°C</span></span><br/><span style=\"font-size: 12px; color: #f06292\">Northern Hem.: <span style=\"color: #212121;\">14.91°C</span></span><br/><span style=\"font-size: 12px; color: #c2185b\">Southern Hem.: <span style=\"color: #212121;\">14.58°C</span></span>",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 10,
"right": 0
},
"background": {
"enabled": false
}
},
"titleSeparator": {
"zIndex": 1,
"enabled": false,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"paginator": {
"zIndex": 30,
"enabled": false,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#545f69",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"orientation": "right",
"layout": "horizontal",
"background": {
"enabled": false
},
"padding": {
"left": 5,
"top": 0,
"bottom": 0,
"right": 0
},
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
}
},
"tooltip": {
"enabled": false,
"title": {
"zIndex": 1,
"enabled": false,
"maxLength": null,
"fontSize": 14,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": "normal",
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "left",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": false,
"useHtml": false,
"width": null,
"height": null,
"align": "left",
"orientation": "top",
"rotation": 0,
"text": "",
"margin": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"padding": {
"left": 0,
"top": 0,
"bottom": 0,
"right": 0
},
"background": {
"enabled": false
}
},
"separator": {
"zIndex": 1,
"enabled": false,
"fill": {
"color": "#CECECE",
"opacity": 0.3
},
"stroke": "none",
"width": "100%",
"height": 1,
"orientation": "top",
"margin": {
"left": 0,
"top": 5,
"bottom": 5,
"right": 0
}
},
"background": {
"zIndex": 0,
"enabled": true
}
},
"items": [
{
"iconFill": "#a6bee3",
"text": "64S-44S: <span style=\"color: #212121; font-size: 12px;\">14.23°C</span>",
"iconSize": 15
},
{
"iconFill": "#dc9dc0",
"text": "44S-24S: <span style=\"color: #212121; font-size: 12px;\">14.76°C</span>",
"iconSize": 15
},
{
"iconFill": "#d0a5c8",
"text": "24S-Equator: <span style=\"color: #212121; font-size: 12px;\">14.64°C</span>",
"iconSize": 15
},
{
"iconFill": "#d6a1c4",
"text": "Equator-24N: <span style=\"color: #212121; font-size: 12px;\">14.70°C</span>",
"iconSize": 15
},
{
"iconFill": "#dc9dc0",
"text": "24N-44N: <span style=\"color: #212121; font-size: 12px;\">14.76°C</span>",
"iconSize": 15
},
{
"iconFill": "#ee80a6",
"text": "44N-64N: <span style=\"color: #212121; font-size: 12px;\">15.13°C</span>",
"iconSize": 15
},
{
"iconFill": "#ce346f",
"text": "64N-90N: <span style=\"color: #212121; font-size: 12px;\">15.85°C</span>",
"iconSize": 15
}
]
},
"interactivity": {
"spotRadius": 2,
"multiSelectOnClick": false,
"unselectOnClickOutOfPoint": true,
"hoverMode": "single",
"selectionMode": "multi-select",
"zoomOnMouseWheel": false,
"zoomOnDoubleClick": false,
"keyboardZoomAndMove": true,
"drag": true
},
"defaultSeriesType": "choropleth",
"maxBubbleSize": "10%",
"minBubbleSize": "1%",
"maxPointWidth": "100%",
"minPointLength": 0,
"baseline": 0,
"palette": {
"type": "distinct",
"items": [
"#64b5f6",
"#1976d2",
"#ef6c00",
"#ffd54f",
"#455a64",
"#96a6a6",
"#dd2c00",
"#00838f",
"#00bfa5",
"#ffa000"
]
},
"markerPalette": {
"items": [
"circle",
"diamond",
"square",
"triangle-down",
"triangle-up",
"diagonal-cross",
"pentagon",
"cross",
"v-line",
"star5",
"star4",
"trapezium",
"star7",
"star6",
"star10"
]
},
"hatchFillPalette": {
"items": [
{
"type": "backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-backward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "grid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-forward-diagonal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-horizontal",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "dashed-vertical",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-cross",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "diagonal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "divot",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "horizontal-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "vertical-brick",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "checker-board",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "confetti",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "plaid",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "solid-diamond",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "zig-zag",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "weave",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-05",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-10",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-20",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-25",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-30",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-40",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-50",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-60",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-70",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-75",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-80",
"color": "black 0.5",
"thickness": 1,
"size": 10
},
{
"type": "percent-90",
"color": "black 0.5",
"thickness": 1,
"size": 10
}
]
},
"dataArea": {
"zIndex": 10,
"enabled": true,
"background": {
"enabled": false
}
},
"normal": {
"labels": {
"enabled": false
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"hovered": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"selected": {
"labels": {
"enabled": null
},
"minLabels": {
"enabled": null
},
"maxLabels": {
"enabled": null
}
},
"unboundRegions": {
"fill": {
"keys": [
{
"offset": 0,
"color": "#a6bee3"
},
{
"offset": 0.08581200866715612,
"color": "#a6bee3"
},
{
"offset": 0.08591200866715612,
"color": "#dc9dc0"
},
{
"offset": 0.22907078774421144,
"color": "#dc9dc0"
},
{
"offset": 0.22917078774421143,
"color": "#d0a5c8"
},
{
"offset": 0.40098132263667785,
"color": "#d0a5c8"
},
{
"offset": 0.40108132263667784,
"color": "#d6a1c4"
},
{
"offset": 0.5728918575291442,
"color": "#d6a1c4"
},
{
"offset": 0.5729918575291442,
"color": "#dc9dc0"
},
{
"offset": 0.7161506366061995,
"color": "#dc9dc0"
},
{
"offset": 0.7162506366061995,
"color": "#ee80a6"
},
{
"offset": 0.8594094156832548,
"color": "#ee80a6"
},
{
"offset": 0.8595094156832548,
"color": "#ce346f"
},
{
"offset": 1,
"color": "#ce346f"
}
],
"angle": 90,
"mode": {
"left": 0,
"top": 29.45,
"width": 1264,
"height": 323.95
},
"opacity": 1
},
"enabled": true,
"stroke": "#fff"
},
"geoScale": {
"type": "geo",
"precision": [
2,
2
],
"gap": 0,
"xTicks": {
"minCount": 4,
"maxCount": 6
},
"xMinorTicks": {
"minCount": 4,
"maxCount": 6
},
"yTicks": {
"minCount": 4,
"maxCount": 6
},
"yMinorTicks": {
"minCount": 4,
"maxCount": 6
},
"maxTicksCount": 1000
},
"geoIdField": "id",
"overlapMode": "no-overlap",
"minZoomLevel": 1,
"maxZoomLevel": 10,
"selectPolygonMarqueeStroke": "#d3d3d3",
"selectPolygonMarqueeFill": {
"color": "#d3d3d3",
"opacity": 0.4
},
"selectPolygonMarqueeMarker": {
"fill": "#d3d3d3 0.4",
"stroke": "#d3d3d3",
"radius": 15
},
"geoData": "anychart.maps.world",
"crsAnimation": {
"enabled": true,
"duration": 300
},
"crosshair": {
"zIndex": 110,
"enabled": false,
"xStroke": "#969EA5",
"yStroke": "#969EA5",
"xLabels": [
{
"enabled": true,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 2
}
],
"yLabels": [
{
"enabled": true,
"fontSize": 12,
"fontFamily": "Verdana, Helvetica, Arial, sans-serif",
"fontColor": "#ffffff",
"fontOpacity": 1,
"fontDecoration": "none",
"fontStyle": "normal",
"fontVariant": "normal",
"fontWeight": 400,
"letterSpacing": "normal",
"textDirection": "ltr",
"textShadow": "none",
"lineHeight": "normal",
"textIndent": 0,
"vAlign": "top",
"hAlign": "start",
"wordWrap": "normal",
"wordBreak": "normal",
"textOverflow": "",
"selectable": false,
"disablePointerEvents": true,
"useHtml": false,
"text": "Label text",
"width": null,
"height": null,
"anchor": null,
"offsetX": 0,
"offsetY": 0,
"rotation": 0,
"adjustFontSize": {
"width": false,
"height": false
},
"minFontSize": 8,
"maxFontSize": 16,
"background": {
"zIndex": 0,
"enabled": true
},
"padding": {
"left": 10,
"top": 5,
"bottom": 5,
"right": 10
},
"axisIndex": 3
}
]
}
}
}
<html>
<head>
<script src="https://cdn.anychart.com/samples/maps-in-dashboard/world-temperature/data.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-map.min.js"></script>
<script src="https://cdn.anychart.com/geodata/latest/custom/world/world.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var stage;
var map;
var chart;
var data;
var mapData;
var globData;
var nHemData;
var sHemData;
var colorScale;
var selected = NaN;
var hovered = NaN;
anychart.onDocumentReady(function () {
setup();
stage.resume();
});
function setupTrendChart() {
chart = anychart.area();
chart.credits(true);
chart
.credits()
.url('https://www.coursera.org/course/datavisualization');
chart
.credits()
.text(
'Special for: https://www.coursera.org/course/datavisualization'
);
chart
.credits()
.logoSrc(
'https://d3njjcbhbojbot.cloudfront.net/web/images/favicons/icon-blue-32x32.png'
);
chart.interactivity().hoverMode('by-x');
var tooltipFormatter = function (info) {
return (
'<span style="color: #bebebe;">Global: </span>' +
info.getData('glob').toFixed(2) +
String.fromCharCode(176) +
'C<br/>' +
'<span style="color: #bebebe;">Northern Hem.: </span>' +
info.getData('nHem').toFixed(2) +
String.fromCharCode(176) +
'C<br/>' +
'<span style="color: #bebebe;">Southern Hem.: </span>' +
info.getData('sHem').toFixed(2) +
String.fromCharCode(176) +
'C'
);
};
var series;
series = chart.area(globData);
series
.clip(false)
.name('Global mean')
.fill('#4fc3f7 0.6')
.stroke('2 #4fc3f7')
.markers({ enabled: false, zIndex: 100 })
.tooltip({
format: function (info) {
return tooltipFormatter(info);
},
titleFormat: function (info) {
return info.x;
},
useHtml: true
});
series.hovered().markers({ size: 4 });
series = chart.line(nHemData);
series
.clip(false)
.name('Northen Hem.')
.stroke('2 #f06292')
.tooltip({
format: function (info) {
return tooltipFormatter(info);
},
titleFormat: function (info) {
return info.x;
},
useHtml: true
});
series.hovered().markers({ size: 4 });
series = chart.line(sHemData);
series
.clip(false)
.name('Sourthen Hem.')
.stroke('2 #c2185b')
.tooltip({
format: function (info) {
return tooltipFormatter(info);
},
titleFormat: function (info) {
return info.x;
},
useHtml: true
});
series.hovered().markers({ size: 4 });
chart.padding().right(chart.padding().right() + 10);
chart.legend().enabled(true).position('center-bottom');
chart.xScale().ticks().interval(10);
chart.yAxis().labels().format(labelFormatter);
chart.yAxis().title('Temperature, ' + String.fromCharCode(176) + 'C');
chart
.xAxis()
.labels()
.format(function (info) {
return info.value + 's';
});
chart
.crosshair()
.enabled(true)
.yStroke(null)
.xLabel(false)
.yLabel(false);
chart.listen('pointclick', chartPointClick);
chart.listen('pointmouseover', chartPointHover);
chart.listen('pointmousemove', chartPointHover);
chart.listen('pointmouseout', chartPointUnhover);
return chart;
}
function setupMap() {
map = anychart.map();
map.geoData('anychart.maps.world');
map.credits(false);
map
.legend()
.useHtml(true)
.enabled(true)
.itemsLayout('vertical')
.position('right')
.inverted(true)
.align('top')
.width(200)
.itemsSpacing(10)
.title()
.enabled(true)
.hAlign('left')
.align('left')
.useHtml(true)
.padding()
.bottom(10);
map.unboundRegions().stroke('#fff');
return map;
}
function setup() {
colorScale = anychart.scales.linearColor({
keys: ['#304ffe', '#03a9f4', '#81d4fa', '#f48fb1', '#c2185b']
});
colorScale.ticks().set([]);
prepareData();
stage = anychart.graphics.create('container');
stage.suspend();
var title = anychart.standalones.title();
title.text('World Land-Ocean Temperature Trend For The Last 35 Years');
title.vAlign('bottom');
title.height('5%');
title.container(stage);
title.draw();
map = setupMap();
map.top('5%');
map.height('55%');
map.container(stage);
map.draw();
chart = setupTrendChart();
chart.top('60%');
chart.container(stage);
chart.draw();
colorizeMap();
stage.listen('stageresize', colorizeMap);
}
function chartPointClick(e) {
var index = e.pointIndex;
if (selected === index) return;
var row = data.row(selected);
markSelected(row, false);
data.row(selected, row);
row = data.row(index);
selected = index;
markSelected(row, true);
data.row(index, row);
colorizeMap();
}
function chartPointHover(e) {
var index = e.pointIndex;
if (hovered === index) return;
hovered = index;
colorizeMap();
}
function chartPointUnhover() {
hovered = NaN;
colorizeMap();
}
function markSelected(row, isSelected) {
if (isSelected) {
var selectedMarker = {
enabled: true,
stroke: 'null',
type: 'star5',
size: 8
};
var selectedHoverMarker = {
size: 8
};
var selectedLabel = {
enabled: true
};
row[12] = selectedMarker;
row[13] = selectedHoverMarker;
row[14] = selectedLabel;
} else {
delete row[12];
delete row[13];
delete row[14];
}
}
function labelFormatter(info) {
if ('tickValue' in info) {
info.tickValue.toFixed(2);
} else if ('rawValue' in info) {
info.rawValue.toFixed(2);
} else {
info.value.toFixed(2);
}
}
function colorizeMap() {
var southEndReal = -55.98;
var northEndReal = 83.6275;
var net = [-90, -64, -44, -24, 0, 24, 44, 64, 90];
var offsets = net.map(function (val) {
return (val - southEndReal) / (northEndReal - southEndReal);
});
var regions = ['s4', 's3', 's2', 's1', 'n1', 'n2', 'n3', 'n4'];
var names = [
'90S-64S',
'64S-44S',
'44S-24S',
'24S-Equator',
'Equator-24N',
'24N-44N',
'44N-64N',
'64N-90N'
];
var iter = mapData.getIterator();
iter.select(isNaN(hovered) ? selected : hovered);
var keys = [];
var i;
var val;
var items = [];
for (i = 2; i < offsets.length; i++) {
var region = regions[i - 1];
val = iter.get(region);
var offset1 = Math.min(1, Math.max(0, offsets[i - 1] + 0.0001));
keys.push({
offset: offset1,
color: colorScale.valueToColor(val)
});
var offset2 = Math.min(1, Math.max(0, offsets[i]));
keys.push({
offset: offset2,
color: colorScale.valueToColor(val)
});
items.push({
iconFill: colorScale.valueToColor(val),
text:
names[i - 1] +
': <span style="color: #212121; font-size: 12px;">' +
val.toFixed(2) +
String.fromCharCode(176) +
'C</span>'
});
}
map.legend().items(items).fontSize(12);
map
.legend()
.paginator(false)
.title()
.text(
'<span style="font-weight: bold">' +
iter.get('x') +
'</span><br/>' +
'<span style="font-size: 12px;">Global: <span style="color: #212121;">' +
iter.get('glob') +
String.fromCharCode(176) +
'C</span></span><br/>' +
'<span style="font-size: 12px; color: #f06292">Northern Hem.: <span style="color: #212121;">' +
iter.get('nHem') +
String.fromCharCode(176) +
'C</span></span><br/>' +
'<span style="font-size: 12px; color: #c2185b">Southern Hem.: <span style="color: #212121;">' +
iter.get('sHem') +
String.fromCharCode(176) +
'C</span></span>'
);
var gradient = {
keys: keys,
mode: map.getPixelBounds(),
angle: 90
};
map.unboundRegions().fill(gradient);
}
function prepareData() {
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/samples/maps-in-dashboard/world-temperature/data.js
var rawData = anychart.data
.set(getData(), {
rowsSeparator: '\n',
colsSeparator: ',',
ignoreFirstRow: true
})
.mapAs({
x: 0,
glob: 1,
nHem: 2,
sHem: 3,
n4: 7,
n3: 8,
n2: 9,
n1: 10,
s1: 11,
s2: 12,
s3: 13,
s4: 14
});
var arr = [];
var iterator = rawData.getIterator().reset();
var min = Infinity;
var max = -Infinity;
while (iterator.advance()) {
var row = [
+iterator.get('x'),
+iterator.get('glob') / 100 + 14,
+iterator.get('n4') / 100 + 14,
+iterator.get('n3') / 100 + 14,
+iterator.get('n2') / 100 + 14,
+iterator.get('n1') / 100 + 14,
+iterator.get('s1') / 100 + 14,
+iterator.get('s2') / 100 + 14,
+iterator.get('s3') / 100 + 14,
+iterator.get('s4') / 100 + 14,
+iterator.get('nHem') / 100 + 14,
+iterator.get('sHem') / 100 + 14
];
for (var i = 1; i < row.length; i++) {
min = Math.min(min, row[i]);
max = Math.max(max, row[i]);
}
arr.push(row);
}
colorScale.minimum(min);
colorScale.maximum(max);
selected = arr.length - 1;
markSelected(arr[selected], true);
data = anychart.data.set(arr);
globData = data.mapAs({
x: 0,
value: 1,
glob: 1,
marker: 12,
hoverMarker: 13,
nHem: 10,
sHem: 11
});
nHemData = data.mapAs({
x: 0,
value: 10,
glob: 1,
marker: 12,
hoverMarker: 13,
nHem: 10,
sHem: 11
});
sHemData = data.mapAs({
x: 0,
value: 11,
glob: 1,
marker: 12,
hoverMarker: 13,
nHem: 10,
sHem: 11
});
mapData = data.mapAs({
x: 0,
glob: 1,
n4: 2,
n3: 3,
n2: 4,
n1: 5,
s1: 6,
s2: 7,
s3: 8,
s4: 9,
nHem: 10,
sHem: 11
});
}
</script>
</body>
</html>