Specifying IndexLabelPlacement at dataPointLevel in a doughnut chart, using canvas.js - javascript

I have created a fiddle derived from a fork supplied by the vendor. I would want only the label of the smaller chart segments to be displayed on the outside as shown on the left. This works as expected for a column chart. Is there an easier way to do this before I start fiddling with the canvas.js source code.
To the right is what my chart looks like, using this code
var chart = new CanvasJS.Chart("chartContainer",
{
data: [
{
type: "doughnut",
dataPoints: [
{ y: 1,indexLabel:"A",indexLabelPlacement:"outside"},
{ y: 50,indexLabel:"B",indexLabelPlacement:"inside"},
{ y: 28 ,indexLabel:"C",indexLabelPlacement:"inside"},
{ y: 31 ,indexLabel:"D",indexLabelPlacement:"inside"},
]
}
]
});
chart.render();
The fiddle I created is found here

Before burying myself deep into canvas.js code , I visited google one more time and stumbled upon a rich library, ZingChart which does exactly what I was looking for(mixing the label positions) without tampering with the library's source code
Snippet for usage
$scope.myJson = {
globals: {
fontFamily: "MuseoSans-700"
},
type: 'pie',
backgroundColor: "transparent",
plot: {
detach: false,
"slice": 55,
"shadow": 0,
refAngle: -90,
valueBox: {
fontColor: "black",
fontSize: 16,
connector: {
lineWidth: 1,
height: "50px"
},
rules: [
{
rule: "%v > 30",
placement: "in",
offsetR: 1
},
{
rule: "%v <= 30",
placement: "out"
}
]
}
},
series: [
{ "values": [32], "text": "A", backgroundColor: "#c4f0ac" },
{ "values": [32], "text": "B", backgroundColor: "#FF9097" },
{ "values": [1], "text": "C", backgroundColor: "#FF9097" },
{ "values": [1], "text": "D", backgroundColor: "#FF9097" },
{ "values": [1], "text": "NS", backgroundColor: "#bcbcbc" }
]
And the resulting chart was like this

Related

How to integrate mustache template to read json data and dynamically display it in Chartjs

I tried to pass data from data.json to mustache template in order to create bar graph.
I am unable to figure out where exactly I need to pass the data to get the graph right.
Please help me to figure out by reviewing the following code snippets.
<html>
<body>
<div>
<canvas height="200px" width="300px" id="bar-graph"></canvas>
</div>
<script>
const barCtx = document.getElementById('bar-graph').getContext('2d');
new Chart(barCtx, barGraphConfig());
function barGraphConfig() {
return {
type: 'bar',
data: {
datasets: [{
data: {{barGraph}},
borderRadius: 5,
backgroundColor: [
'#fece8c',
'#a28cfe',
'#a28cfe',
'#feab8c',
'#8ca2fe',
'#8ca2fe',
],
barThickness: 20
}],
labels: ['AAA', 'AA', 'A', 'BBB', 'BB', 'B']
},
options: {
plugins: { legend: { display: false } },
showTooltip: false,
animation: {
duration: 0,
onComplete: renderDataLabel,
},
parsing: {
xAxisKey: 'sector',
yAxisKey: 'value'
},
scales: {
x: {
grid: {
borderWidth: 3,
borderColor: '#232323',
display: false,
},
},
y: {
display: false,
beginAtZero: true
}
}
},
};
}
</script>
</body>
</html>
data.json
barGraph: [
{
"name": "A",
"value": 4
},
{
"name": "AAA",
"value": 10
},
{
"name": "B",
"value": 40
},
{
"name": "BB",
"value": 20
},
{
"name": "BBB",
"value": 7
}
]
The error we are getting
You can use the structure of the data.json as dataset.data. But to enable CHART.JS to read correctly the data, you should set options.parsing option at chart level, as following:
options: {
parsing: {
xAxisKey: 'name',
yAxisKey: 'value'
}
}
See documentation of CHART.JS: https://www.chartjs.org/docs/latest/general/data-structures.html#object-using-custom-properties
const barGraph = [
{
"name": "A",
"value": 4
},
{
"name": "AAA",
"value": 10
},
{
"name": "B",
"value": 40
},
{
"name": "BB",
"value": 20
},
{
"name": "BBB",
"value": 7
}
];
const barCtx = document.getElementById('myChart').getContext('2d');
new Chart(barCtx, barGraphConfig());
function barGraphConfig() {
return {
type: 'bar',
data: {
datasets: [
{
data: barGraph,
borderRadius: 5,
backgroundColor: [
'#fece8c',
'#a28cfe',
'#a28cfe',
'#feab8c',
'#8ca2fe',
'#8ca2fe',
],
barThickness: 20
}
],
},
options: {
parsing: {
xAxisKey: 'name',
yAxisKey: 'value'
}
}
};
}
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>

Chart.js Display Prediction Data

I'm trying to make a chart to display the revenues of a company, and I would like to display the predictions for this year but with a borderDash segment option. How could I do that? I tried this and I have no clue how to do it.
const lineCanvas = document.getElementById("lineCanvas");
const prediction = (ctx, value) => ctx.dataIndex = 4 ? value : undefined;
const lineChart = new Chart(lineCanvas, {
type: "line",
data: {
labels: ["2019", "2020", "2021", "2022"],
datasets: [{
label: "Revenues",
data: [2195, 2225, 2166, 2250],
backgroundColor: "orange",
borderColor: "orange",
segment: {
borderDash: ctx => prediction(ctx, [6, 6])
}
}]
},
options: {
scales: {
y: {
ticks: {
font: {
size: 18
},
stepSize: 10
},
title: {
display: true,
text: "Total",
font: {
size: 14
}
},
},
x: {
ticks: {
font: {
size: 18
}
},
title: {
display: true,
text: "Year",
font: {
size: 14
}
}
}
},
plugins: {
title: {
display: true,
text: "Company's Revenues",
font: {
size: 22
},
padding: 0
},
subtitle: {
display: true,
text: "(in millions of €)",
font: {
size: 18
},
padding: 0
}
}
}
});
Here's the expected result:
Image of the expected result
I hope somebody can help me with that.
Thanks in advance.
What about adding an extra dataset for your forecast data. Style this second set with a dashed line? Yes, that results in 2 datasets. One for the data and one for the prediction. Hope that helps.
As example (not tested, just as example):
const lineChart = new Chart(lineCanvas, {
type: "line",
data: {
labels: ["2019", "2020", "2021", "2022"],
datasets: [{
label: "Revenues",
data: [2195, 2225, 2166, 2250],
backgroundColor: "orange",
borderColor: "orange",
}, {
label: "Revenues",
data: [2195, 2225, 2166, 2250, 6000, 9000], /* Add the extra data points */
borderColor: "red" /* Whatever style you like */
}]
}, options:[] });

Create Stacked Bar chart for Timeseries X axis using C3.js

I'm trying to create this stacked bar chart (using C3.js) like the on in this picture, which is a stacked bar chart for a timeseries.
My current configuration is:
`
{
data: {
json: [
{
"calendar_date": "2018-11-01",
"segment_description": "Executive Suite",
"before_otb": 2,
},
{
"calendar_date": "2018-11-01",
"segment_description": "Handicapped Room",
"before_otb": 3,
},
{
"calendar_date": "2018-11-01",
"segment_description": "Junior Suite",
"before_otb": 5,
}
],
type: 'bar',
keys: {
x: 'calendar_date',
value: ['before_otb']
},
},
axis: {
x: {
type: 'timeseries'
}
}
}
`
You will need to be working on the data layout and heading toward using groups. Similar to below.
var chart = c3.generate({
data: {
x: "x-axis",
json:[
{ "x-axis": "0",
"data1": 30,
"data2": 40,
"data3": 20,
"data4": 10,
"data5": 50,
"data6": 40
},
{ "x-axis": "1",
"data1" :20,
"data2": 60,
"data3": 10,
"data4": 15,
"data5": 40,
"data6": 20,
}],
// etc etc
keys: {
x: "x-axis",
value: ["data1", "data2", "data3", "data4", "data5", "data6"]
},
groups: [
["data1", "data2", "data3", "data4", "data5", "data6"]
],
type: 'bar'
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script>
<div id="chart"></div>

Stack grouped xAxes in bar chart

I'm using Chart.js 2.7.0 and I'd like to make bar stacked by xAxes, but grouped by type.
Let's say I have something like this:
I would like to stack values 49 and 59 in one bar and 29 with 32 together.
When I'm using options stacked true it stack everything...
It becomes:
When I tried to add xAxisID to dataset then second dataset with id x-axis-1 is hidden and not visible at all. X-Axis looks like is duplicated...
Look at snippet to see it.
var ctx = document.getElementById("chart1").getContext('2d');
var ctx2 = document.getElementById("chart2").getContext('2d');
var labels = [
"2018_4",
"2018_5",
"2018_6",
"2018_7",
"2018_8",
"2018_9",
"2018_10",
"2018_11",
];
var data = {
"labels": labels,
"datasets": [
{
"label": "t1",
xAxisID: "x-axis-0",
"data": [
29,19,26,28,20,21,11
],
backgroundColor: 'blue'
},
{
"label": "t1_SUM",
xAxisID: "x-axis-0",
"data": [
32,29,36,38,30,31,31
],
backgroundColor: 'red'
},
{
"label": "t2",
xAxisID: "x-axis-1",
"data": [
49,37,39,40,15,34,36,52
],
backgroundColor: 'blue'
},
{
"label": "t2_SUM",
xAxisID: "x-axis-1",
"data": [
59,47,49,50,25,44,46,62
],
backgroundColor: 'red'
}
]
};
new Chart(ctx, {
type: "bar",
data: data,
options: {
scales: {
xAxes:
[
{
stacked: true,
id: "x-axis-0",
},
{
stacked: true,
id: "x-axis-1",
}
],
}
}});
var data2 = {
"labels": labels,
"datasets": [
{
"label": "t1",
"data": [
29,19,26,28,20,21,11
],
backgroundColor: 'blue'
},
{
"label": "t1_SUM",
"data": [
32,29,36,38,30,31,31
],
backgroundColor: 'red'
},
{
"label": "t2",
"data": [
49,37,39,40,15,34,36,52
],
backgroundColor: 'blue'
},
{
"label": "t2_SUM",
"data": [
59,47,49,50,25,44,46,62
],
backgroundColor: 'red'
}
]
};
new Chart(ctx2, {
type: "bar",
data: data2,
options: {
scales: {
xAxes:
[
{
stacked: false,
}
],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<canvas id="chart3"></canvas>
From this snippet I want to connect
t1 and t1_SUM
t2 and t2_SUM
Ok,
I misread documentation.
I should use stack option in dataset and then it is working.
Sorry for troubles...

Highcharts - Add Series Name As X-Axis Label

Is it possible to have the "name" key of each object in the series be the x-axis label?
series: [{
"data": [3570.5],
"name": "R",
"id": 0
}, {
"data": [3000],
"name": "S",
"id": 1
}, {
"data": [2500],
"name": "T",
"id": 2
}]
For example, I would like column 1 to have an x-axis label of "R", column 2 to have an x-axis label of "S", etc. I have tried assigning the x-axis categories
xAxis: {categories: ['R', 'S', 'T']}
But only the "R" label shows up on the x-axis. I have also tried to format the series differently:
series: [{
"data": [3570.5, null, null],
"name": "R",
"id": 0
}, {
"data": [null, 3000, null],
"name": "S",
"id": 1
}, {
"data": [null, null, 2500],
"name": "T",
"id": 2
}]
But that complicates the ease with which I can change the series visibility, i.e. auto-resizing both axes, hiding the full column and then putting the hidden column back in its original spot when trying to show again.
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var id = this.series.options.id;
var chart = $('#container').highcharts();
var isVisible = chart.get(id).visible;
chart.get(id).setVisible(!isVisible);
}
}
}
}
}
http://jsfiddle.net/calanoue/suw6xweh/
You were properly setting your xAxis categories. However, you were only ever setting one point. Highcharts is defaulting to that point going to index 0 (the "R"). Try setting the xAxis category index and use the {x, y} point format:
series: [{
data: [{x:0, y:3570.5}],
name: "R",
id: 0
}, {
data: [{x:1, y:3000}],
name: "S",
id: 1
}, {
data: [{x:2, y:2500}],
name: "T",
id: 2
}]
The x: values are the category index you want populated.
You can try by adding name to each data point as in this
DEMO.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
},
xAxis: {
categories: ['R', 'S', 'T'],
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
changeSeriesVisibility(this.series.options.id);
}
}
}
}
},
series: [{
data : [{ x : 0,
y : 3750,
name : "R"},
{
x : 1,
y: 3000,
name: "S"
},
{
x : 2,
y : 2500,
name : "T"
}
]
},
]
});
function changeSeriesVisibility(id) {
// Hide/Show the series on click
var chart = $('#container').highcharts();
var isVisible = chart.get(id).visible;
chart.get(id).setVisible(!isVisible);
}
});

Categories