I have a C3.js chart with time values formatted per minute as %H:%M.
Now I want to load new data, but instead of data per hour I want to show the data per day as %d-%m.
So the tick format needs to change, but how do I do this?
chart generation with C3.js
chart = c3.generate({
bindto: element,
data: {
x: "keys",
xFormat: '%Y-%m-%d %H:%M:%S',
url: dataurl + '/today',
mimeType: 'json',
type: 'bar',
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M'
}
}
}
});
Loading new data
chart.load({
x: "keys",
xFormat: '%Y-%m-%d %H:%M:%S',
url: url,
mimeType: 'json',
});
Latest from Masayuki on Github - said there was no API for that.
But you can define a global variable to change ticks dynamically, see Masayuki's fiddle
From Github -
var formatter;
function updateFormatter(byMonth) {
formatter = d3.time.format(byMonth ? '%Y-%m' : '%Y-%m-%d')
}
updateFormatter();
var chart = c3.generate({
data: {
x: 'date',
columns: [
['date', '2014-01-01', '2014-01-02', '2014-01-03'],
['data1', 100, 200, 300],
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) { // x comes in as a time string.
return formatter(x);
}
}
}
}
});
d3.select('#btnByMonth').on('click', function () {
updateFormatter(true);
chart.flush();
});
d3.select('#btnByWeek').on('click', function () {
updateFormatter(false);
chart.flush();
});
Related
Trying to use plotly js to make a plot of dates, but for some reason it is showing time and date.
How can I remove time from this plot? Thanks!
x = ["2023-02-13", "2023-02-14"];
y = [3, 4];
var trace1 = {
type: "scatter",
mode: "lines",
name: '',
x: x,
y: y,
line: {color: '#17BECF'}
}
var layout = {
xaxis: {
type: 'date',
},
title: '',
};
var data = [trace1];
Plotly.newPlot('plotDiv', data, layout);
We can specify the tickformat in the xaxis of the layout with tickformat: '%b %d, %Y' to avoid including the time. And to avoid having the same date repeat on multiple ticks for the same day, we can also set the distance between ticks to be 1 day using dtick: 86400000.0 (which will be in units of seconds according to the documentation).
The codepen can be viewed here.
var layout = {
xaxis: {
type: 'date',
tickformat: '%b %d, %Y',
dtick: 86400000.0
},
title: '',
};
In the following code, if I choose scatter3d instead of scatter, all parameter tickformat and title inside xaxis are completely ignored, and it is impossible to format anything under any axis.
Any suggetion would be appreciated.
Failing 3D Plot with outrageous date format
Working Plot with proper HH:MM:SS Format
function setup_plot(){
type='scatter';
var x=[],x0=new Date();
for (i=0;i<5;i++){
x[i]=new Date();
x[i].setTime(x0.getTime()+i*12*3600000);
}
var trace = [
{
type: type,
mode: 'lines',
x: x,
y: [1.0,1.0,1.0,1.0,1.0],
z: [2.6,1.2,6.3,4.8,4.7]
},
{
type: type,
mode: 'lines',
x: x,
y: [2.0,2.0,2.0,2.0,.0],
z: [3.1,2.6,4.8,3.8,1.7]
}
];
var layout = {
title: "Failing Plot",
xaxis:{
title:'Dates',
tickformat: '%H:%M:%S',
tickformatstops: [
{
dtickrange: [1000,60000],
value: '%H:%M:%S'
},
{
dtickrange: [60000,3600000],
value: '%H:%M:%S'
},
{
dtickrange: [3600000,86400000],
value: '%H:%M:%S'
},
{
dtickrange: [86400000,604800000],
value: '%d'
}
]
}
};
Plotly.newPlot('plot',trace,layout);
}
For 3d charts, axis layouts have to be provided within a scene, so
const layout = {
scene: {
xaxis: {
title: 'Dates',
...
}
}
}
See https://plotly.com/javascript/3d-axes/
I'm using C3 chart to present some data on my project and I want to show up legends (Label in my case) instead of numbers in the AcisX :
Data json format :
[
{"Label":"DQUA","Aut":3.75,"NoAut":3.75,"CM":32},
{"Label":"DPRO","Aut":43.9,"NoAut":0,"CM":144},
{"Label":"DMAI","Aut":1.6999999999999993,"NoAut":0,"CM":0},
{"Label":"DENG","Aut":0,"NoAut":0,"CM":16}
]
My attempt to get the task work :
var chart = c3.generate({
bindto: '.ks-chart-orders-block',
data: {
url: '/Home/AbsencesByDepartementFiltredByReasons',
mimeType: 'json',
type:'bar',
keys:{
value: ['Aut','NoAut','CM']
},
}
}
});
Getted Result :
Expected Result:
You need to modify the x-axis with a custom category:
var chart = c3.generate({
bindto: '.ks-chart-orders-block',
data: {
url: '/Home/AbsencesByDepartementFiltredByReasons',
mimeType: 'json',
type:'bar',
keys:{
x: 'Label',
value: ['Aut','NoAut','CM']
},
},
axis: {
x: {
type: 'category',
tick: {
centered: true
}
}
}
});
C3 graph overlap x-axis labels which is in date time format. I have googled this query but didn't get any solution for it.Is it possible that c3 only shows couple of date time rather then showing altogether which result in overlap x-axis labels
var data = {
x: 'x',
xFormat:'%Y-%m-%d/%H:%M',
empty: {
label: {
text: "No Data"
}
},
columns: [
['x', '{$dateArray}'],
['Attack', {$data}],
],colors: {
Attack: '#67b7dc',
},
types: {
Attack: 'area'
}};
var chart = c3.generate({bindto: '#chart1',
size: {
height: 630,
},
data: data,
grid: {
x: {
show: true
},
y: {
show: true
}
},
tooltip: {
format: {
value: function (value, ratio, id) {
var format = value+' Gbps [ IP: '+destIp[value]+' ]';
return format;
}
}
},
zoom: {
enabled: true
},
subchart: {
show: true
},axis: {
x: {
type: 'timeseries',
tick: {
format: '%b %d, %H:%M',
rotate: 90,
multiline: false
}
},
y: {
tick: {
format: function (d) {
return d.toFixed(3);
}
},
label: {
text: 'Attack Size ( Gbps )',
position: 'outer-middle'
}
}
}
});
Use c3.js chart config tick.count, set it to desired integer value like 2,3 or 4.
Use c3.js Timeseries Chart exmaple to play with this config.
Problem without tick.count:-
Problem solved with tick.count config:-
I am trying to change the units of a gauge chart. Instead of showing the % value by default, I would like to show the exact value. I looked for that in the documentation but it is incomplete and I am not sure which value I should put in the code to change it.
var chart = c3.generate({
bindto: "#chart",
data: {
columns: [
['data', 15.0]
],
type: 'gauge',
},
gauge: {
min: 50,
max: 100,
units: '%' //I want to change that
}
});
I am answering myself. To get the exact value and not the % one in a gauge chart, it is necessary to add this lines:
var chart = c3.generate({
bindto: "#chart",
data: {
columns: [
['data', 15.0]
],
type: 'gauge',
},
gauge: {
label:{
format: function(value, ratio){
return value; //returning here the value and not the ratio
},
},
min: 50,
max: 100,
units: '%' //this is only the text for the label
}
});