High resolution canvas of radar chart for pdf file - javascript

I have the given code below for displaying a radar chart using Chart.js. When I display it as PDF on my screen it appears blurry. I've been trying to scale using webkitBackingStorePixelRatio and devicePixelRatio on Chrome, but I'm a little bit stuck.
--HTML--
<div class="chart">
<canvas id="myChart"></canvas>
</div>
--Javascript--
<script>
var ctx1 = document.getElementById("myChart");
var myRadarChart1 = new Chart(ctx1, {
type: 'radar',
data: {
labels: {{ competenceCleTitle|json_encode|raw }},
datasets: [
{
backgroundColor: "#F79646",
borderColor: "#f59c1a",
pointBackgroundColor: "#f59c1a",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#f59c1a",
pointRadius: 0,
data: {{ competenceCleNiveau|json_encode|raw }}
}
]
},
options: {
legend: {
display: false
},
responsive: true,
scale: {
reverse: false,
ticks: {
display: false,
maxTicksLimit: 8,
stepSize: 1,
beginAtZero: true,
max: 5
}
}
}
});
</script>

Related

ChartJs hiding odd index values on x-axes/labels values

["06月10日","06月13日","06月14日","06月15日","06月16日","06月17日","06月20日","06月21日","06月22日","06月23日","06月24日","06月27日","06月28日","06月29日","06月30日","07月01日","07月04日","07月05日","07月06日","07月07日","07月08日","07月11日","07月12日","07月13日","07月14日","07月15日","07月19日","07月20日","07月21日","07月22日","07月25日","07月26日","07月27日","07月28日","07月29日","08月01日","08月02日","08月03日","08月04日","08月05日","08月08日","08月09日","08月10日","08月12日","08月15日","08月16日","08月17日"]
above are all the labels that I want to show on the graph but it hiding all the odd index values from the graph only showing even index values on the graph from the above list.
see the graph it missing some labels.
if you see the order all the even number index values are displayed and odd are hidden..
This is all my chart code...
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
lineTension: 0.1,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointRadius: 5,
pointHitRadius: 10,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
},]
};
const config = {
type:"scatter",
data: data,
options: {
legend: {
display: false
},
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
I have also tried..
x:{ticks:{autoSkip:false}}
when I do this it changes my label to numbers..
when you are using the type:"scatter",
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 pointslink for charts scatter charts
when you are not defining the values with x and y then used the x-axis and y-axis as linear and then you can manipulate the x-axes for both line and bar..if you will not provide the chart_type in config it will take axes as linear
you can
xAxisID: 'x-axis-bar',
xAxisID: 'x-axis-line',
and then hide the 1 x-axis and autoSkip=False it will show your all values.
I am attaching the all code below..
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
xAxisID: 'x-axis-line',
lineTension: 0.5,
order:1,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
xAxisID: 'x-axis-bar',
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
order:2
},]
};
const config = {
data: data,
options: {
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
'x-axis-bar':{
ticks:{
autoSkip:false,
stepSize:1.0,
}
},
'x-axis-line':{
display:false
}
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)

How to optimize chart data | ChartJS

My question is about chartJS.
I have Chart type line with 2 datasets the data is about members evrey 3 minutes in 24 hour.
The thing is that its a lot of data about 1500 rows of sql table.
The problem im getting with is that because there is alot of data the chart is looking awful.
My question is there is any way how can I optimize it so it will look better?
The chart is based on ChartJS
This is the code of the chart settings -
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: <?php echo json_encode($cnnlsTime) ?> ,
datasets: [
{
label: "CNNls Members",
lineTension: 0.1,
backgroundColor: "rgba(255,165,0,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 1,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: <?php echo json_encode($cnnlsMembers) ?> ,
},
{
label: "CNNSF Members",
lineTension: 0.1,
backgroundColor: "rgba(255,165,0,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 1,
backgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 2,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: <?php echo json_encode($cnnsfMembers) ?> ,
},
],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'time'
},
gridLines: {
display: false
},
ticks: {
maxTicksLimit: 400
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
Any suggestions?

How to draw a line in line chart for single value in Charts.JS

I need to plot a single value in line chart. Currently i am using charts.JS library for line graph purpose.
The data will be varied some times i'll get the single data inside the data set at that time i need to plot the single value in the line chart.
I had tried with the charts.js annotation plugin but it didn't meet my requirements. which is like it wis overlapping the plotted point in the graph area.
My code
createLineChart() {
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: "line",
data: {
labels:[],
datasets: [
{
fill: false,
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white", // wite point fill
pointBorderWidth: 1, // point border width
lineTension: 0,
pointBorderColor: "blue",
pointRadius: 4,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
padding: 20,
beginAtZero: true,
min: 0,
stepSize: 100,
},
gridLines: {
drawBorder: false,
},
},
],
xAxes: [
{
// offset: true,
ticks: {
display: false,
//beginAtZero: true,
min: 0,
},
gridLines: {
zeroLineColor: "transparent",
drawBorder: false,
display: false,
},
//offset:true,
},
],
legend: {
display: false,
},
tooltips: {
enabled: false,
},
},
drawTime: "afterDraw", // (default)
} as ChartOptions,
// plugins: [ChartAnnotation]
},
});
}
To plot the data dynamically:
generateRandomDataSet(size) {
let yaxisArr = [];
let xaxisArr = [];
let random_data:any = this.getRandomData(size)
let maxYTickVal = Math.max.apply(Math, random_data.map((val) => {return val.yaxis}));
let maxVal = Math.ceil((maxYTickVal+1) / 10) * 10
for(let data of random_data) {
yaxisArr.push(data.yaxis)
xaxisArr.push(data.xaxis)
}
this.lineChart.data.datasets[0].data = yaxisArr
this.lineChart.config.data.labels = []
this.lineChart.config.data.labels = xaxisArr
this.lineChart.config.options.scales.yAxes[0].ticks.max =maxVal
this.lineChart.config.options.scales.yAxes[0].ticks.stepSize = maxVal/2
this.lineChart.update()
}
What i required
What i am getting
Thankyou.
There exists different approaches to solve this problem.
According to the answer I gave to a similar question, you can define an animation.onComplete function to draw the line.
In a comment on before mentioned answer, Lakshmansundeep suggested an approach where he defines the same data value three times but makes sure, pointRadius for the leading and ending data point is zero.
datasets: [{
data: [120, 120, 120],
...
pointRadius: [0, 4, 0],
pointHoverRadius: [0, 4, 0],
}],
For the second approach, please have a look at the code below.
new Chart('line-chart', {
type: "line",
data: {
labels: [null, 'A', null],
datasets: [{
data: [120, 120, 120],
fill: false,
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white",
pointBorderWidth: 1,
lineTension: 0,
pointBorderColor: "blue",
pointRadius: [0, 4, 0],
pointHoverRadius: [0, 4, 0],
}],
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
padding: 20,
min: 0,
stepSize: 100
},
gridLines: {
drawBorder: false
}
}],
xAxes: [{
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawBorder: false,
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>

Change legend style from bar to line chart.js 2.4.0

I am using chart.js(2.4.0) for graph and i need to change the legend style from bar to line I am unable to do that.
How can i change legend from bar to line.
Following is my code
renderChart(id, labels, label1, label2, data1, data2, borderDash = [], pointRadius = 3, backgroundColor = '#36a1eb') {
data2 = data2 || [];
const options = {
type: 'line',
data: {
labels: labels,
datasets: [{
fill: false,
lineTension: 0.1,
backgroundColor: backgroundColor,
borderColor: '#36a1eb',
lineColor: '#36a1eb',
strokeColor: '#36a1eb',
borderCapStyle: 'butt',
borderDash: borderDash,
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#36a1eb',
pointBackgroundColor: '#36a1eb',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#36a1eb',
pointHoverBorderColor: '#36a1eb',
pointHoverBorderWidth: 2,
pointRadius: pointRadius,
pointHitRadius: 10,
label: label2,
data: data2,
borderWidth: 2
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
beginAtZero: false
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}],
xAxes: [{
ticks: {
reverse: false,
beginAtZero: false
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
}
}
};
How can i do this?
I searched all of the documentation of the chart.js but still unable to modify it to line.
The configuration options are available at
https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
Have you tried boxWidth or usePointStyle?

Hide scale bar on label click in Charts.js

I have a simple Charts.js Line Chart with two datasets (lines).
When I click on one of the legend labels, the visibility of the lines in the chart is toggled, but the vertical scale bar still appears. My question is how to make the vertical scale bar to shown and hidden alongside to the line?
var data = {
labels: [1, 2, 3, 4],
datasets: [
{
label: "(Mbps) UP",
fill: false,
yAxisID: "y-axis-upstream",
backgroundColor: "#98B954",
borderColor: "#98B954",
pointBorderColor: "#98B954",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#98B954",
pointHoverBorderColor: "#98B954",
data: [1, 2, 3, 4]
},
{
label: "(Mbps) DOWN",
fill: false,
yAxisID: "y-axis-downstream",
backgroundColor: "#BE4B48",
borderColor: "#BE4B48",
pointBorderColor: "#BE4B48",
pointBackgroundColor: "#fff",
pointHoverBackgroundColor: "#BE4B48",
pointHoverBorderColor: "#BE4B48",
data: [10, 22, 33, 43]
}
]
};
var options = {
title: {
display: true,
text: "Chart Title"
},
legend: {
display: true,
position: "top"
},
scales: {
yAxes: [
{
id: "y-axis-upstream",
type: "linear",
display: true,
position: "left",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(152, 185, 84, 0.4)"
},
ticks: {
display: true,
fontColor: "#98B954"
}
},
{
id: "y-axis-downstream",
type: "linear",
display: true,
position: "right",
stepSize: 0.1,
fixedStepSize: 0.1,
gridLines: {
color: "rgba(190, 75, 72, 0.2)"
},
ticks: {
display: true,
fontColor: "#BE4B48"
}
}
]
}
};
var ctx = document.getElementById("chartID");
var chart = new Chart(ctx, {
type: type,
data: data,
options: options
});

Categories

Resources