charts/canvas/examples/12-scatter-chart/multi-series-scatter-chart.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 \r
   4 <head>\r
   5         <script type="text/javascript">\r
   6                 window.onload = function () {\r
   7                         var chart = new CanvasJS.Chart("chartContainer", {\r
   8                                 title: {\r
   9                                         text: "Server Performance",\r
  10                                         fontSize: 20\r
  11                                 },\r
  12                                 animationEnabled: true,\r
  13                                 axisX: {\r
  14                                         title: "Server Load (TPS)",\r
  15                                         titleFontSize: 18\r
  16 \r
  17                                 },\r
  18                                 axisY: {\r
  19                                         title: "Response Time (sec)",\r
  20                                         titleFontSize: 16\r
  21                                 },\r
  22                                 legend: {\r
  23                                         verticalAlign: 'bottom',\r
  24                                         horizontalAlign: "center"\r
  25                                 },\r
  26 \r
  27                                 data: [\r
  28                                 {\r
  29                                         type: "scatter",\r
  30                                         markerType: "square",\r
  31                                         toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong> Load</strong> {x} <br/><strong> Response</strong></span> {y}sec",\r
  32 \r
  33                                         name: "Server Pluto",\r
  34                                         showInLegend: true,\r
  35                                         dataPoints: [\r
  36 \r
  37                                         { x: 23, y: 4 },\r
  38                                         { x: 28, y: 5 },\r
  39                                         { x: 39, y: 9 },\r
  40                                         { x: 34, y: 8 },\r
  41                                         { x: 24, y: 3 },\r
  42                                         { x: 29, y: 7 },\r
  43                                         { x: 29, y: 5 },\r
  44                                         { x: 23, y: 6 },\r
  45                                         { x: 27, y: 7 },\r
  46                                         { x: 34, y: 11 },\r
  47                                         { x: 36, y: 9 },\r
  48                                         { x: 33, y: 5 },\r
  49                                         { x: 32, y: 8 },\r
  50                                         { x: 21, y: 2 }\r
  51 \r
  52                                         ]\r
  53                                 },\r
  54                                 {\r
  55                                         type: "scatter",\r
  56                                         name: "Server Mars",\r
  57                                         markerType: "triangle",\r
  58                                         showInLegend: true,\r
  59                                         toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong> Load</strong> {x} <br/><strong> Response</strong></span> {y}sec",\r
  60 \r
  61                                         dataPoints: [\r
  62 \r
  63                                         { x: 24, y: 2 },\r
  64                                         { x: 27, y: 3 },\r
  65                                         { x: 35, y: 7 },\r
  66                                         { x: 32, y: 6 },\r
  67                                         { x: 29, y: 4 },\r
  68                                         { x: 23, y: 5 },\r
  69                                         { x: 24, y: 3 },\r
  70                                         { x: 26, y: 4 },\r
  71                                         { x: 24, y: 5 },\r
  72                                         { x: 33, y: 7 },\r
  73                                         { x: 34, y: 6 },\r
  74                                         { x: 30, y: 4 },\r
  75                                         { x: 37, y: 8 },\r
  76                                         { x: 24, y: 2 }\r
  77 \r
  78                                         ]\r
  79                                 }\r
  80                                 ],\r
  81                                 legend: {\r
  82                                         cursor: "pointer",\r
  83                                         itemclick: function (e) {\r
  84                                                 if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {\r
  85                                                         e.dataSeries.visible = false;\r
  86                                                 }\r
  87                                                 else {\r
  88                                                         e.dataSeries.visible = true;\r
  89                                                 }\r
  90                                                 chart.render();\r
  91                                         }\r
  92                                 }\r
  93                         });\r
  94 \r
  95                         chart.render();\r
  96                 }\r
  97         </script>\r
  98         <script src="../../canvasjs.min.js"></script>\r
  99         <title>CanvasJS Example</title>\r
 100 </head>\r
 101 <body>\r
 102         <div id="chartContainer" style="height: 400px; width: 100%;">\r
 103         </div>\r
 104 </body>\r
 105 \r
 106 </html>\r