Related
I'm using C3 js to generate a chart. In my chart, I'm currently using stack bars to showing the data.
My code,
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250]
],
type: 'bar',
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
According to the above code, chart generate as,
Now I need to add an additional 3 line to that chart, as below image,
How can I add Lines to chart using C3 JS? Its document has some line chart with a bar chart. But I can understand how to use it's for my requirement.
You can use data.types to set a chart for each data, Read this: https://c3js.org/reference.html#data-types .And this is a sample code for your problem.
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 150, 160, 140, 145, 250, 100],
['Pink', 50, 50, 50, 50, 50, 50],
['Red', 400, 200, 150, 20, 300, 120]
],
types:{
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
Here is how you can achieve it instead of type use types
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 30, 200, 200, 400, 150, 250],
['Pink', 130, 100, 100, 200, 150, 50],
['Red', 230, 200, 200, 300, 250, 250]
],
types: {
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue','Orange', 'Green', 'Black','Pink', 'Red']
],
axes: {
Black: 'black',
Pink: 'pink',
Red: 'red',
}
},
color: {
pattern: ['#1f77b4', '#ff7f0e', '#2ca02c','#00000', '#ff69b4', '#ff0000']},
axis: {
black: {
show: true
},pink: {
show: true
},red: {
show: true
}
}
});
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.js"></script>
<div id="chart"></div>
Please help me add rounded corner for stacked chart(grouped bar chart) in c3.js.
I have found something similar here How to get rounded columns in c3.js bar chart
but this is the normal bar chart.
It is not working for stacked chart.
I'm not familiar with d3.js.
Thank you :)
This is my code.
var chart = c3.generate({
bindto: "#id",//element
padding: {
left: 50,
right: 50,
top: 20,
bottom: 20
},
data: {
// x : 'x',
columns: [//Data Arry
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']//grouping data to get stacked chart
],
},
bar: {
width: {
ratio: .6 //setting width of bar
},
spacing: 2//setting space between bars
},
grid: {
y: {//grid lines
show: true,
color:'red'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: -90,
multiline: false,
format: "%b" //format: "%e %b %y"
},
height: 50,
categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
},
y2: {
show: false
},
y: {
tick: {
format: d3.format("s")//format y axis
}
}
},
color: {
pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
}
});
Set Data order as null
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: null
},
I'm trying to add a striped fill to my line chart, there seem to be an official solution for this https://developers.google.com/chart/image/docs/gallery/line_charts and they talk about chf.
However, I have no idea how to implement this, I've googled for it, and searched stackoverflow for a few hours now and can't seem to find a solution.
I need a striped fill like the even/odd css function.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(Process1);
function Process1() {
var data = google.visualization.arrayToDataTable([
['value1', 'value2', 'value3', 'value4'],
['10', 400, 380, 48],
['20', 400, 340, 260],
['30', 400, 410, 310],
['40', 400, 390, 380],
['50', 400, 345, 345],
['60', 400, 385, 370],
['70', 400, 430, 410],
['80', 400, null, null],
['90', 400, null, null],
['100', 400, null, null],
['110', 400, null, null],
['120', 400, null, null]
]);
var options = {
theme: 'material',
lineWidth: 3,
colors: ['#3D3D3D', '#4CDD37', '#2076F2'],
title: 'Orderinformation plan 1',
titleTextStyle: {fontName:'Lato', fontSize:'20'},
legend: {
position: 'right',
textStyle: {
fontName:'Lato', fontSize:'12'
},
},
hAxis: {
title: 'Time in minutes',
titleTextStyle: {fontName:'Lato', fontSize:'16', italic:false},
textStyle: {
fontName:'Lato', fontSize:'16'
},
},
vAxis: {
title: 'Temperature in celsius',
titleTextStyle: {fontName:'Lato', fontSize:'16', italic:false},
textStyle: {
fontName:'Lato', fontSize:'16'
},
viewWindowMode: 'explicit',
ticks: [25,50,100,150,200,250,300,350,400,460],
viewWindow: {
max:460,
min:25
},
gridlines: {
count: 10
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart_1'));
chart.draw(data, options);
}
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></div>
I have a fast question. It is possible to generate that Char in Google Charts? ... And mayby u knew how to do that (any advice or smth)?
Chart1
This white area below the chart is very important.
it's possible
use AreaChart with isStacked: true and set the bottom area to 'transparent'
since isStacked: true, most likely some data manipulation will be required to get the desired outcome
see following working snippet...
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Bottom', 'Area 1', 'Area 2', 'Area 3'],
['2010', 100, 100, 100, 100],
['2020', 110, 120, 130, 140],
['2025', 120, 160, 180, 200],
['2030', 140, 180, 200, 240],
['2035', 200, 240, 280, 320],
['2040', 260, 300, 320, 380],
['2045', 320, 400, 460, 600],
['2050', 400, 480, 600, 800]
]),
{
areaOpacity: 1.0,
colors: ['transparent', 'cyan', 'yellow', 'magenta'],
lineWidth: 1,
isStacked: true,
series: {
0: {
visibleInLegend: false
}
}
}
);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>