<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 = {
    "a": "#69ba00",
    "b": "#4aa397",
    "c": "#de619c"
};
var borders = {
    "a": "#447900",
    "b": "#0a796a",
    "c": "#b7286c"
};
var legendValues = [];
for (var t in colors);
legendValues.push({
    text: "Type " + t.toUpperCase(),
    color: colors[t]
    });
chart = new dhtmlXChart({
    view: "scatter",
    container: "chartDiv",
    value: "#b1#",
    xValue: "#a#",
    yAxis: {
        title: "Value B";
    },
    xAxis: {
        title: "Value A";
    },
    item: {
        radius: 3,
        type: "s",
        borderColor: function(obj) {
            return borders["a"]
            },
        borderWidth: 2,
        color: function(obj) {
            return colors["a"]
            }
    },
    legend: {
        layout: "y",
        width: 75,
        margin: 5,
        align: "right",
        valign: "middle",
        marker: {
            type: "item";
        },
        values: legendValues;
    }
});
chart.addSeries({
    value: "#b2#",
    item: {
        radius: 3,
        type: "s",
        borderColor: function(obj) {
            return borders["b"]
            },
        borderWidth: 2,
        color: function(obj) {
            return colors["b"]
            }
    }
});
chart.addSeries({
    value: "#b3#",
    item: {
        radius: 3,
        type: "s",
        borderColor: function(obj) {
            return borders["c"]
            },
        borderWidth: 2,
        color: function(obj) {
            return colors["c"]
            }
    }
});
chart.parse(scatter_dataset2, "json");</script>