Spline charts are created in the same way as line charts, only here instead of lines, curves are used. Following are the steps to form a spline chart using Pluscharts.
Step 1:
The very first step will be to create an element in space for a spline chart to be drawn. For this, the following code is used.
<div id=”spline-chart-example”></div>
The next set of codes will be to load d3 and then pluscharts using the following scripts since the pluscharts library is built upon d3.
<script src=”https://d3js.org/d3.v5.min.js”></script>
<script src=”path-to/src/pluscharts.js”></script>
Step 2:
The JavaScript code to create a spline chart is given below.
/*Spline chart example */
pluscharts.draw({
drawOn : “#spline-chart-example”,
type: “spline”,
dataset : {
data: [
{
x: 10,
y: 20
},
{
x: 20,
y: 50
},
{
x: 30,
y: 30
},
{
x: 40,
y: 10
},
{
x: 50,
y: 100
},
{
x: 60,
y: 80
}
],
lineColor: “#006dd5”,
lineWidth: 2,
legendLabel: “visitors”
},
options: {
text: {
display: true,
color: “#6c478c”
},
points: {
display: true,
color: “#e46161”,
radius: 3
},
axes: {
x: {
display: true,
scale: 3,
min: 0,
max: 100
},
y: {
display: true,
scale: 3,
min: 0,
max: 100
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of initiated container
height: ‘400’
}
}
}]
To discuss the code further, consider each part of the code separately.
pluscharts.draw
({ })
This function is used to initiate the chart. Under this draw function, we pass the details of the chart including the data and options as the argument to the draw() function.
drawOn : ‘#spline-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “spline”,
In the type element, indicate the type of chart to be drawn.
dataset: {
data: [
{
x: 10,
y: 20
},
{
x: 20,
y: 50
},
{
x: 30,
y: 30
},
{
x: 40,
y: 10
},
{
x: 50,
y: 100
},
{
x: 60,
y: 80
}
],
lineColor: “#006dd5”,
lineWidth: 2,
legendLabel: “visitors”
}
The dataset is where we input all the data in, The x and y values, the line color, the line width and legend labels are specified.
options: {
text: {
display: true,
color: “#6c478c”
},
points: {
display: true,
color: “#e46161”,
radius: 3
},
axes: {
x: {
display: true,
scale: 3,
min: 0,
max: 100
},
y: {
display: true,
scale: 3,
min: 0,
max: 100
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want the width and height of the initiated container
height: ‘400’
}
}
Recommended reading: Line Chart using PHP and JS
Options are used for customization of the chart. The text and points radius and color is assigned, along with a display option. The x and y-axis minimum and maximum points on the scale are set. The visibility and dimension of legends are set. The size of the chart can be adjusted by adjusting the height and width. ‘Container’ can be set in as value when the dimension of the chart needs to be the same as that of its initiated container.
