ChartJS Bubble Chart
Multiple Line Chart
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
CSS
canvas { background-color : #eee;
}
JavaScript
var options = {
type: 'bubble',
data: {
datasets: [
{
label: 'John',
data: [
{
x: 3,
y: 7,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
},
{
label: 'Paul',
data: [
{
x: 6,
y: 2,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
},
{
label: 'George',
data: [
{
x: 2,
y: 6,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
},
{
label: 'Ringo',
data: [
{
x: 5,
y: 3,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
},
{
label: 'John',
data: [
{
x: 2,
y: 1,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
},
{
label: 'George',
data: [
{
x: 1,
y: 3,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
},
{
label: 'Ringo',
data: [
{
x: 1,
y: 1,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
},
{
label: 'George',
data: [
{
x: 1,
y: 2,
r: 10
}
],
backgroundColor:"#ff6384",
hoverBackgroundColor: "#ff6384"
}
]
}
}
var ctx =...