charts/canvas/examples/18-range-bar-chart/range-bar-with-index-label.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         {\r
   9                 title:{\r
  10                         text: "Employees Salary in a Company",\r
  11                 },              \r
  12                 axisY: {\r
  13                         includeZero:false,\r
  14                         title: "Salary in USD(Thousands)",\r
  15                         interval: 10,\r
  16                 }, \r
  17                 axisX: {\r
  18                         interval:10,\r
  19                         title: "Departments",\r
  20                 },\r
  21                 data: [\r
  22                 {\r
  23                         type: "rangeBar",\r
  24                         showInLegend: true,\r
  25                         yValueFormatString: "$#0.##K",\r
  26                         indexLabel: "{y[#index]}",\r
  27                         legendText: "Department wise Min and Max Salary",\r
  28                         dataPoints: [   // Y: [Low, High]\r
  29                                 {x: 10, y:[80, 110], label: "Data Scientist"},\r
  30                                 {x: 20, y:[95, 141], label: "Product Manager" },\r
  31                                 {x: 30, y:[98, 115], label: "Web Developer" },\r
  32                                 {x: 40, y:[90, 160], label: "Software Engineer"},\r
  33                                 {x: 50, y:[100,152], label: "Quality Assurance"}\r
  34                         ]\r
  35                 }\r
  36                 ]\r
  37         });\r
  38         chart.render();\r
  39 }\r
  40 </script>\r
  41         <script src="../../canvasjs.min.js"></script>\r
  42         <title>CanvasJS Example</title>\r
  43 </head>\r
  44 <body>\r
  45 <div id="chartContainer" style="height: 400px; width: 100%;"></div>\r
  46 </body>\r
  47 \r
  48 \r
  49 </html>\r