<!DOCTYPE HTML>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
</
script
>
</
head
>
<
body
>
<
div
style
=
"text-align:center"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
h3
>Canvas JS Box and Whisker chart</
h3
>
</
div
>
<
div
id
=
"chartID"
style="height:400px; max-width:950px;
margin:0px auto;">
</
div
>
<
script
>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title:{
text: "Monthly Salary of different jobs in India"
},
axisY: {
title: "Monthly Salary (in India)",
prefix: "Rs.",
interval: 8000
},
data: [
{
type: "boxAndWhisker",
upperBoxColor: "lightgreen",
lowerBoxColor: "blue",
stemColor:"red",
dataPoints: [
{ label: "Teacher",
y:[13360, 15320, 18490, 20165, 16800] },
{ label: "Chef",
y:[13600, 15932, 18249, 20000, 17500] },
{ label: "Doctor",
y:[42000, 54000, 68000, 79000, 57000] },
{ label: "Fashion Designer",
y:[22000, 34000, 48000, 59000, 38900] },
{ label: "Engineer",
y:[62000, 70600, 90000, 100000, 80000] },
{ label: "Security guard",
y:[14600, 15500, 18200, 21000, 17100] },
{ label: "Freelancer",
y:[17000, 18400, 21500, 23500, 19999] },
{ label: "Driver",
y:[12636, 15532, 18249, 19265, 17100] }
]// datapoints
},
{
type: "scatter",
markerType:"circle",
markerColor:"green",
name: "Outlier Values",
toolTipContent: "{name}: Rs.{y} ",
showInLegend: true,
dataPoints: [
{ x: 7, label: "Driver", y: 12500 },
{ x: 0, label: "Teacher", y: 13000 },
{ x: 1, label: "Chef", y: 13100 },
{ x: 4, label: "Engineer", y: 102000 },
{ x: 4, label: "Engineer", y: 61000 },
{ x: 3, label: "Fashion Designer", y: 19000 },
{ x: 3, label: "Fashion Designer", y: 61000 }
]//end datapoints
} // end scatter type
]// end data
});// canvas chart
// Render chart in the HTML div
chart.render();
}// window onload
</
script
>
</
body
>
</
html
>