<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> Scatter Chart</title> <script src="../codebase/dhtmlxchart.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxchart.css"> <div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;"></div> </head> <body> <script> var data = [ { "b":4, "a":4.7, type: "Type A" }, { "b":3.5, "a":0.8, type: "Type B" }, { "b":2.4, "a":1.1, type: "Type C" }, { "b":"5.1", "a":10.5, type: "Type A" }, { "b":"4.8", "a":9.1, type: "Type B" }, { "b":"5.9", "a":8.5, type: "Type A" }, { "b":"3.1", "a":7.7, type: "Type B" }, { "b":"4.5", "a":7.2, type: "Type B" }, { "b":"5.9", "a":12.9, type: "Type C" }, { "b":"2.8", "a":5.8, type: "Type B" }, { "b":"3.7", "a":8.1, type: "Type C" }, { "b":"5.5", "a":14.0, type: "Type A" }, { "b":"4.1", "a":1.5, type: "Type A" } ]; var scatterChart = new dhtmlXChart({ view:"scatter", container:"chart_container", xValue:"#a#", yValue:"#b#", tooltip: "#type#", item:{ borderColor:"#f38f00", color:"#ff9600", type:'s' }, yAxis:{ title:"Value Y" }, xAxis:{ title:"Value X" } }) scatterChart.parse(data,"json"); </script> </body> </html>