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

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>

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>

ExtJS charts into jQuery UI tabs

I'm trying to put an ExtJS chart into a jquery UI tab... the simple code is this
Ext.onReady(function() {
Ext.create('Ext.chart.CartesianChart', {
renderTo: 'binding-example',
deferredRender: false,
width: 600,
height: 200,
store: {
fields: ['name', 'g1', 'g2'],
data: [
{ "name": "Item-0", "g1": 57, "g2": 59 },
{ "name": "Item-1", "g1": 45, "g2": 50 },
{ "name": "Item-2", "g1": 67, "g2": 43 },
{ "name": "Item-3", "g1": 45, "g2": 18 },
{ "name": "Item-4", "g1": 30, "g2": 90 }
]
},
legend: {
docked: 'bottom'
},
//define x and y axis.
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
visibleRange: [0, 1],
position: 'bottom'
}],
//define the actual series
series: [{
type: 'line',
xField: 'name',
yField: 'g1',
title: 'Normal'
}, {
type: 'line',
xField: 'name',
yField: 'g2',
title: 'Smooth'
}]
});
});
and the html is this:
<div id="mytabs">
<ul>
<li><span>tab01</span></li>
<li><span>tab02</span></li>
</ul>
<div id="fragment-1">
<div id="first_tab"></div>
</div>
<div id="fragment-2">
<div id="binding-example"> </div>
</div>
</div>
<script>
$(document).ready(function() {
jQuery('#mytabs').tabs(); });
</script>
when I change the code:
renderTo:document.body
or
renderTo:'first_tab'
I can make the chart render properly according to this
link to the unaltered example
¿is there a method in ExtJS or in JQuery UI tabs that render properly?

Chart angularJs

I have some trouble integrating my data json to a chart i tried highlight chart , nvd3 ,google chart i have data comming out of http get :
$http.get("/get")
.success(function(data){
$scope.produit=data;
});
the result of this is
$scope.produit = [
{
id: 15,
nom: "azerty",
type: "azerty",
quantity: 456,
prix: 25296
},
{
id: 21,
nom: "sdqs",
type: "qsdqsd",
quantity: 102,
prix: 52
}
];
i want to view quantity and type in chart i tried to put type and quantity in seprate tables then when i try to use for (i=0;i>$scope.produit.lenght;i++) it won't work because am putting the for inside the data structure of the chart here's an exemple of data structure
$scope.pieData = [{
name: type[0],
quantity[0]
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
Thank you !

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

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

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