C3 graph overlapping x-axis label - javascript

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:-

Related

ChartJS options.scales is being completely ignored

I am trying to make a chart which has years along the x-axis and dollar amounts along the y-axis. I finally got close to what I'm looking for, but I found that because the x coordinates are numbers, ChartJS is putting commas in them which looks really strange for years.
After some digging, I used the callbacks. options.plugin.tooltip.callbacks.label worked to let me remove commas in the tooltips, but when I use options.scales.x[0].ticks.callback to try to fix the labels on the bottom, not only does it not work, but I don't see the console.log statement in their ever being printed so it seems it's not even calling the callback. I've tried several variations of how to do the callback based on what I found online and on Stack Overflow which I think correspond to the different ways ChartJS did this in different versions. (I'm on version 3.5.1.)
Then, I realized that... none of the options under options.scales appear to have any effect. I change the min, the title, the tick settings (color to red, callback, etc.) and it has no effect. (This also explains why I was having trouble when using the line chart and had to switch to scatter; apparently type: 'linear' wasn't being picked up nor did it do anything different when I set it to type: 'date' or whatever the exact working was for that.)
Meanwhile, the other options like options.showLine or options.elements do have an effect and I'm seeing the chart and not getting any errors in the console. So, it is picking up the options, just ignoring everything I have in options.scales.
Here is the relevant code:
// Sample data added to make this example self-contained
// This is my internal data format
let data = {
"Series1": [ {x: 2001, y: 100 }, {x: 2002, y: 110 }, {x: 2003, y: 107 }, ],
"Series2": [ {x: 2001, y: 107 }, {x: 2002, y: 102 }, {x: 2004, y: 95 }, ],
}
// Define data //////////////////////////////////////////////////////
// I convert data to format ChartJS wants and add a few options
let datasets = [];
for(let label in data) {
let c = colorIterator.next().value
datasets.push({
label: label,
data: data[label],
backgroundColor: c,
borderColor: c,
});
}
// Define options //////////////////////////////////////////////////////
let chartConfig = {
type: 'scatter',
data: { datasets: datasets, },
options: {
title: { display: false },
indexAxis: 'x', responsive: true, maintainAspectRatio: false,
showLine: true,
elements: {
line: { display: true, tension: 0, borderWidth: 1, fill: false, },
point: { radius: 3 }
},
interaction: { mode: 'x', },
scales: {
x: [{
type: 'linear',
min: 1995, max: (new Date()).getFullYear()+1, stepSize: 1,
title: { display: true, text: 'Year' },
ticks: {
display: true,
major: { enabled: true },
color: 'red',
callback: function(value, index, ticks) {
console.log(value);
return Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks])
.replace(",","");
}
}
}],
y: [{
title: { display: true, text: '$' },
ticks: {
display: true,
color: 'red',
},
}],
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if(label) {
let x = context.label.replace(",","");
let y = context.formattedValue;
return 'Year ' + x + ' "' + label + '": $' + y;
} else { return 'x'; }
},
},
},
},
}
};
// MAKE CHART //////////////////////////////////////////////////////
let mainChart = new Chart(document.getElementById(c.id), chartConfig);
As described in the docs the scales are not arrays. All the scales are objects in the scale object.
So you will need to change your code to this:
options: {
scales: {
x: {
// x options
},
y: {
// y options
},
}
}

Plotly Format Axis Date

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/

Add click event on each category name on X axis in c3 js

I'm using c3 js for generating categories bar chart
Here is code
var obj = {
size: {
height: 200,
},
bindto: '#grBarChart',
data: {
columns: data.columns,
type: "bar"
},
color: {
pattern: ['#c90000', '#008cba', '#FAAC3D','#427322', '#9ead9b', '#ffa500']
},
axis: {
x: {
type: 'category',
categories: data.categories,
label: {
text: 'Scanned Groups',
position: 'outer-center'
}
},
y: {
label: {
text: 'Count (Rules)',
position: 'outer-middle'
}
}
},
bar: {
width: {
ratio: 0.5,
}
},
grid: {
y: {
show: true
}
}
};
var chart = c3.generate(obj);
This code is generating the following graph
Now my problem is I'm not able to add click event on X Axis Category Names ( Logging 11, Data Protection 13 ...)
I referred C3 Documentation but not able to solve my problem.
Please give me your thought?

Is there a way to change the type of the subcharts in c3.js

I have made a bar char chart and it also has a sub chart. I want to change the type of the subchart to line. As in, the main chart should be a bar chart but the subchart of this should be a line chart.
This is the piece of code I am using to generate the chart. But the type of subchart is not working.
var chart=c3.generate({
bindto:bindTo(),
data:{
x:'x',
/* value:['Percent DEP Enabled'],*/
columns:data(),
type: 'bar'
},
subchart: {
show: true,
size: {
height: 25
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m-%d-%y',
rotate: -45,
},
height: 75
},/* y: {
tick: {
values: function(){
jQuery.forEach(function(){
})}
count: 8,
format:d3.format(".2s"),
},
},*/
subchart: {
show: true,
type: 'line',
}
}
});
You can't do this because there is no setting like axis.subchart. When you take a look at the reference you'll find everything you need but in your case there is no option.

Rotated bar chart data label format

I am trying to format the data label I have on this rotated x axis bar chart found here: http://jsfiddle.net/blackrimsolutions/01bqmbws/
If I only put:
labels: true
It shows the label but not formatted in percentages.
If I call the labels array:
labels: {
format: {
data1: d3.format('%'),
data2: d3.format('%'),
data3: d3.format('%'),
data4: d3.format('%'),
data5: d3.format('%'),
data6: d3.format('%'),
data7: d3.format('%'),
data8: d3.format('%'),
data9: d3.format('%'),
data10: d3.format('%')
}
}
The data labels go away.
I can't have both label: true and the array. I have tried several other ways to get it to work but it mainly seems to not work on rotated axis.
It works on this chart:
var chart1 = c3.generate({
bindto: "#chart1",
padding: {
top: 20,
right: 40,
left: 40
},
data: {
x: 'x',
columns: [
['x', '2013', '2014'],
['data1', 0, 0],
['data2', 0, 0]
],
names: {
data1: 'Sales Growth',
data2: 'Trans Growth'
},
type: 'bar',
labels: {
format: {
data1: d3.format('%'),
data2: d3.format('%')
}
}
},
grid: {
y: {
show: true
}
},
transition: {
duration: 2000
},
bar: {
width: {
ratio: 0.5
}
},
axis: {
y: {
tick: {
format: d3.format('%')
}
},
x: {
type: 'category',
tick: {
rotate: 0,
multiline: false
},
centered: true,
height: 30
}
},
color: {
pattern: ['#A2AD00', '#FEB612', '#00A9ED', '#004165', '#F79447', '#C01324', '#FB4F14']
},
tooltip: {
show: false
}
});
But that's it. Any advice is greatly appreciated.
Thanks!!
I was able to successfully format all of the data sets using the format function built in to C3.js, and with the help of a javascript rounding answer here on Stack.
The format for the function is:
format: function (v, id, i, j) { ... }
v is the value of the data point where the label is shown.
id is the id of the data where the label is shown.
i is the index of the data point where the label is shown.
j is the sub index of the data point where the label is shown.
Here is my final labels code:
labels: {
format: function (v) {
'use strict';
var percent = (Math.round((v * 1000) / 10) / 100);
return (percent * 100).toFixed(2) + '%';
}
}
Thanks everyone!

Categories