index.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href='//fonts.googleapis.com/css?family=Arvo:300,400,700' rel='stylesheet' type='text/css'>
<script src="raphael-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<h1 style="font-family:Arvo;">A Test Using Raphael For Legends</h1>
<script type="text/javascript">
$(document).ready(function() {
var paper = Raphael(10,100, 400, 400);
var key_entries = [
{"color": "#E99A3D",
"y":10,
"num":'1',
"name":'Vineville/Zebulon'},
{'color': "#048FC8",
'y': 40,
'num': '2',
'name': 'Bellevue/Log Cabin/Zebulon'},
{'color': "#048FC8",
'dash':".",
'y': 50,
'num': null,
'name': null},
{'color': "#B0A545",
'y': 70,
'num': '3',
'name': 'West Macon/Thomaston Rd'},
{'color': "#985C16",
'y': 100,
'num': '4',
'name': 'North Highland'},
{'color': "#D40E89",
'y': 130,
'num': '5',
'name': 'Ocmulgee/Tom Hill Sr. Blvd'},
{'color': "#D40E89",
'y': 130,
'num': '5',
'name': 'Ocmulgee/Tom Hill Sr. Blvd'},
{'color': "#007E3E",
'y': 160,
'num': '6',
'name': 'Westgate/Bloomfield'},
{'color': "#D40E89",
'y': 190,
'num': '9',
'name': 'Macon Mall/Chambers Rd'},
{'color': "#85568D",
'y': 220,
'num': '11',
'name': 'East Macon/King Park'},
{'color': "#DD83A7",
'y': 250,
'num': '12',
'name': 'Houston/Peach Orchard'},
{'color': "#DD83A7",
'y': 258,
'dash':".",
'num': null,
'name': null},
{'color': "#DD83A7",
'dash':"-",
'y': 266,
'num': null,
'name': null},
{'color': "#000000",
'y': 280,
'num': '13',
'name': 'Houston/Peach Orchard'},
{'color': "#000000",
'y': 310,
no_line: true,
'num': null,
'name': 'Points of Interest'},
];
var circle_x = 100;
var line_x = 70;
var line_w = 60;
var num_x = 40;
var name_x = 150;
key_entries.forEach( function(key,i) {
var circle = paper.circle(circle_x, key.y, 4);
circle.attr("fill", key['color']);
circle.attr("stroke", key['color']);
if( !key['no_line'] )
{
var line = paper.path("M" + line_x + "," + key['y'] + "L" + (line_x + line_w) + "," + key['y']);
line.attr("stroke-width", 2);
if(key['dash']) {
line.attr("stroke-dasharray", key['dash']);
}
line.attr("stroke", key['color']);
}
if(key['num']) {
var num = paper.text(num_x, key['y'], key['num']);
num.attr('font-size', 12);
num.attr('font-family', 'Arvo');
}
if(key['name']) {
var name = paper.text(name_x, key['y'], key['name']);
name.attr('font-size', 12);
name.attr('text-anchor', 'start');
name.attr('font-family', 'Arvo');
}
});
});
</script>
</body>
</html>