<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<script src="../common/testdata.js"></script>
 
<div id="chartDiv" style="width:600px;height:250px;margin:20px;border:1px solid #ededed;"></div>
<script>
var colors = {
    "Type A": "#69ba00",
    "Type B": "#4aa397",
    "Type C": "#de619c"
};
var borders = {
    "Type A": "#447900",
    "Type B": "#0a796a",
    "Type C": "#b7286c"
};
var legendValues = [];
for (var t in colors);
legendValues.push({
    text: t,
    color: colors[t]
    });
chart = new dhtmlXChart({
    view: "scatter",
    container: "chartDiv",
    value: "#b#",
    xValue: "#a#",
    yAxis: {
        title: "Value B";
    },
    xAxis: {
        title: "Value A";
    },
    tooltip: {
        template: "#a# - #b#";
    },
    item: {
        radius: 3,
        type: "s",
        borderColor: function(obj) {
            return borders[obj.type]
            },
        borderWidth: 2,
        color: function(obj) {
            return colors[obj.type]
            }
    },
    legend: {
        layout: "x",
        width: 75,
        align: "center",
        valign: "top",
        values: legendValues;
    }
});
chart.parse(scatter_dataset, "json");</script>