now I hava drawed a boxplot, but the axis name is not my expected , I want the axis name is like "1A, 5B, 20C, 60D, 500F", see the picture.
boxplot
environments:
echarts: v5.4
the source code is below:
option = {
title: [
{
text: 'Michelson-Morley Experiment',
left: 'center'
},
{
text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
borderColor: '#999',
borderWidth: 1,
textStyle: {
fontWeight: 'normal',
fontSize: 14,
lineHeight: 20
},
left: '10%',
top: '90%'
}
],
dataset: [
{
// prettier-ignore
source: [
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
]
},
{
transform: {
type: 'boxplot',
config: { itemNameFormatter: function(params) {
return params.value + 'A'
}},
}
},
{
fromDatasetIndex: 1,
fromTransformResult: 1
}
],
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
name: 'km/s minus 299,000',
splitArea: {
show: true
}
},
series: [
{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1
},
{
name: 'outlier',
type: 'scatter',
datasetIndex: 2
}
]
};
I want the axis name is like "1A, 5B, 20C, 60D, 500F", just like the above picture.
Do you have any idea how can this be done?
Thanks ^_^
The easiest way to do this if we take your code in its current state is to test params.value using a switch statement:
let option = {
title: [
{
text: 'Michelson-Morley Experiment',
left: 'center'
},
{
text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
borderColor: '#999',
borderWidth: 1,
textStyle: {
fontWeight: 'normal',
fontSize: 14,
lineHeight: 20
},
left: '10%',
top: '90%'
}
],
dataset: [
{
// prettier-ignore
source: [
[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
]
},
{
transform: {
type: 'boxplot',
config: {
// ========================= HERE =========================
itemNameFormatter: params => {
switch (params.value) {
case 0:
return '1A';
case 1:
return '5B';
case 2:
return '20C';
case 3:
return '60D';
case 4:
return '500F';
}
}
// ==================================================
}
}
},
{
fromDatasetIndex: 1,
fromTransformResult: 1
}
],
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
boundaryGap: true,
nameGap: 30,
splitArea: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
name: 'km/s minus 299,000',
splitArea: {
show: true
}
},
series: [
{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1
},
{
name: 'outlier',
type: 'scatter',
datasetIndex: 2
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 100%;
height: 500px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
Related
I have an array of object how to segregate it based on same value and then find sum of other elements. I have tried with reduce but it didn't help
givenArray = [
{
id: 'ABC001', debtAmt: 55000, totalPaid: 1000, principalDue: 12000, principalPaid: 180, interestDue: 15000, interestPaid: 70, penaltyDue: 17000, penaltyPaid: 500,
subRows: [
{ id: 'ABC001', code: 'AL', debtAmt: 20000, totalPaid: 100, principalDue: 5000, principalPaid: 20, interestDue: 1000, interestPaid: 20, penaltyDue: 5000, penaltyPaid: 150 },
{ id: 'ABC001', code: 'AL', debtAmt: 30000, totalPaid: 200, principalDue: 4000, principalPaid: 30, interestDue: 5000, interestPaid: 20, penaltyDue: 5000, penaltyPaid: 250 },
{ id: 'ABC001', code: 'HL', debtAmt: 2000, totalPaid: 300, principalDue: '', principalPaid: 50, interestDue: '', interestPaid: 10, penaltyDue: 4000, penaltyPaid: '' },
{ id: 'ABC001', code: 'HL', debtAmt: 3000, totalPaid: 400, principalDue: 3000, principalPaid: 80, interestDue: 9000, interestPaid: 20, penaltyDue: 3000, penaltyPaid: 200 }
]
},
{
id: 'DEF123', debtAmt: 20000, totalPaid: 800, principalDue: 2650, principalPaid: 160, interestDue: 2400, interestPaid: 1150, penaltyDue: 3600, penaltyPaid: 1300,
subRows: [
{ id: 'DEF123', code: 'HL', debtAmt: 2000, totalPaid: '', principalDue: 2000, principalPaid: 10, interestDue: 1000, interestPaid: 50, penaltyDue: 2000, penaltyPaid: 100 },
{ id: 'DEF123', code: 'DL', debtAmt: 3000, totalPaid: '', principalDue: 500, principalPaid: 20, interestDue: 500, interestPaid: 100, penaltyDue: 1000, penaltyPaid: 150 },
{ id: 'DEF123', code: 'DL', debtAmt: 4000, totalPaid: 100, principalDue: 100, principalPaid: 30, interestDue: 200, interestPaid: 200, penaltyDue: 500, penaltyPaid: 250 },
{ id: 'DEF123', code: 'DL', debtAmt: 5000, totalPaid: 200, principalDue: '', principalPaid: 40, interestDue: 300, interestPaid: 300, penaltyDue: '', penaltyPaid: 300 },
{ id: 'DEF123', code: 'AL', debtAmt: 6000, totalPaid: 500, principalDue: 50, principalPaid: 60, interestDue: 400, interestPaid: 500, penaltyDue: 100, penaltyPaid: 500 }
]
},
{
id: 'XYZ001', debtAmt: 1200, totalPaid: 1500, principalDue: 1500, principalPaid: 300, interestDue: 1200, interestPaid: 500, penaltyDue: 200, penaltyPaid: 100,
subRows: [
{ id: 'XYZ001', code: 'PL', debtAmt: 500, totalPaid: 600, principalDue: 800, principalPaid: 200, interestDue: 900, interestPaid: 500, penaltyDue: 200, penaltyPaid: 100 },
{ id: 'XYZ001', code: 'DL', debtAmt: 700, totalPaid: 900, principalDue: 700, principalPaid: 100, interestDue: 300, interestPaid: '', penaltyDue: '', penaltyPaid: '' },
]
},
];
result = [
{
id: 'ABC001', debtAmt: 55000, totalPaid: 1000, principalDue: 12000, principalPaid: 180, interestDue: 15000, interestPaid: 70, penaltyDue: 17000, penaltyPaid: 500,
subRows: [
{ id: 'ABC001', code: 'AL', debtAmt: 50000, totalPaid: 300, principalDue: 9000, principalPaid: 50, interestDue: 6000, interestPaid: 40, penaltyDue: 10000, penaltyPaid: 400 },
{ id: 'ABC001', code: 'HL', debtAmt: 5000, totalPaid: 700, principalDue: 3000, principalPaid: 130, interestDue: 9000, interestPaid: 30, penaltyDue: 7000, penaltyPaid: 200 },
]
},
{
id: 'DEF123', debtAmt: 20000, totalPaid: 800, principalDue: 2650, principalPaid: 160, interestDue: 2400, interestPaid: 1150, penaltyDue: 3600, penaltyPaid: 1300,
subRows: [
{ id: 'DEF123', code: 'HL', debtAmt: 2000, totalPaid: '', principalDue: 2000, principalPaid: 10, interestDue: 1000, interestPaid: 50, penaltyDue: 2000, penaltyPaid: 100 },
{ id: 'DEF123', code: 'DL', debtAmt: 12000, totalPaid: 300, principalDue: 600, principalPaid: 90, interestDue: 1000, interestPaid: 600, penaltyDue: 1500, penaltyPaid: 700 },
{ id: 'DEF123', code: 'AL', debtAmt: 6000, totalPaid: 500, principalDue: 50, principalPaid: 60, interestDue: 400, interestPaid: 500, penaltyDue: 100, penaltyPaid: 500 }
]
},
{
id: 'XYZ001', debtAmt: 1200, totalPaid: 1500, principalDue: 1500, principalPaid: 300, interestDue: 1200, interestPaid: 500, penaltyDue: 200, penaltyPaid: 100,
subRows: [
{ id: 'XYZ001', code: 'PL', debtAmt: 500, totalPaid: 600, principalDue: 800, principalPaid: 200, interestDue: 900, interestPaid: 500, penaltyDue: 200, penaltyPaid: 100 },
{ id: 'XYZ001', code: 'DL', debtAmt: 700, totalPaid: 900, principalDue: 700, principalPaid: 100, interestDue: 300, interestPaid: '', penaltyDue: '', penaltyPaid: '' },
]
},
]
const res = givenArray.map(el => Object.values(el.subRows?.reduce((acc, curr) => {
const { id, code, ...rest } = curr;
acc[code] = acc[code] || { id, code, ...rest };
Object.entries(rest).forEach(([k, v]) => {
acc[code][k] = acc[code][k] || 0
if (v !== '') acc[code][k] += v
});
return acc
}, {})))
If I understand correctly, you just have a small bug on this line:
acc[code] = acc[code] || { id, code, ...rest };
it should be only:
acc[code] = acc[code] || { id, code };
Why? When aggregating the rows, the original code counts all properties on the first row twice - once as a ...rest in the default object and for the second time inside the forEach. Like this, the first is only counted once because the initial object doesn't contain the initial "rest" values.
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 am using Angular Gauge from HighChart and wanted to know if it is possible to have unequal intervals. Currently, unequal intervals on the Y-axis effects the size of each plot band in the gauge.How can I have equal plot band sizes with unequal intervals on Y-axis.
Here is an example of the intervals-0-86, 86-88, 88-90, 90-96 and 96-100.
I have tried so far-
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Percentage %'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 50,
tickInterval: 6,
tickWidth: 2,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '15px'
}
},
title: {
text: ''
},
plotBands: [{
from: 0,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Any help is appreciated!
Well, As per your requiremnt It seems like you want to achieve similar to this..
where min and max should updated accordingly.
Solution-
As I am understanding you want to set all value in red below 86%. correct? so why don't you change the min value of the chart. I mean while passing value to chart manipulate your input data accordingly and pass corresponding label to it.
Hoping this will help you :)
Well, High Chart doesn't provide direct method to show selected labels on the axis.
So there is alternative way to achieve this.
Below is the running code for this-
JSFiddle- https://jsfiddle.net/vikash2402/Lxoc4d8r/16/
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'This is custom High Chart'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 80,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 20,
//tickInterval: 1,
tickWidth: 0,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '14px'
}
},
title: {
text: ''
},
plotBands: [{
from: 80,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
try{
var DisplayLabels = [86, 88, 90, 96];
var labels = $(".highcharts-yaxis-labels > text>tspan");
labels.each(function(i, node){
if( DisplayLabels.indexOf(parseInt($(node).text())) == -1){
$(node).hide();
} else{
$(node).text($(node).text() + "%");
}
});
} catch(err){
console.dir(err);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Hoping this will help you :)
Currently I am playing arround with this Example:
http://c3js.org/samples/axes_x_tick_culling.html
But the issue is, when you add like 3-4x the Ammount of Data, the X values get crushed and badly formated. How can I fix this any idea?
See here: http://i.imgur.com/F7BWMDk.png
Thanks.
Width is working fine for me, take a look X axis with tripple digit numbers
enter link description here
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'category',
tick: {
width: 22,
culling: {
max: 7
}
}
}
}
});
Here you go,
you need to add the tick.width parameter.
It's not documented yet (we're working on it)
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart">
</div>
var chart = c3.generate({
data: {
columns: [
['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]]
},
axis: {
x: {
type: 'category',
tick: {
culling: true,
width: 11
}
}
}
});
jsfiddle
I'm trying to style and add another 2 x'axis to a Google area chart (a and b in the image). For example, the a axis should be set to 900 and b: 700.
Also trying to extend the chart to the full width of the containing div (960px) but my solution seems to do nothing.
This is the desired effect.
Current js
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
width:'960',
legend: {position: 'none'},
hAxis: {title: 'Year', titleTextStyle: {color: 'grey'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To get the chart width right, add a chartArea definition to your options object. The chartArea settings are listed in the AreaChart documentation under "Configuration Options":
chartArea: {
left: 40,
top: 10,
width: 900,
height: 350
}
Demo: http://jsfiddle.net/2H7sp/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['November', 1000, 400],
['December', 1170, 460],
['January', 660, 1120],
['February', 690, 1120],
['March', 780, 1120],
['April', 820, 1120],
['May', 660, 1120],
['June', 1030, 540]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: {
color: 'grey'
}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>
You'll need to play with the numbers a little bit. chartArea refers to the graphical portion of the chart, excluding the axes, title, and legend. So you need to add padding to your values in order to leave room.
Edit: To get the horizontal lines, you'll need to add two additional series with values of 900 and 700 for each row in the respective columns:
var data = google.visualization.arrayToDataTable([
[ 'Year', 'Sales', 'Expenses', 'a', 'b' ],
[ 'November', 1000, 400, 900, 700 ],
[ 'December', 1170, 460, 900, 700 ],
[ 'January', 660, 1120, 900, 700 ],
...
To get the colors right, specify a definition for the series option that sets the area invisible and the line color black for the two new series.
var options = {
...
series: {
2: { areaOpacity: 0, color: "#000" },
3: { areaOpacity: 0, color: "#000" }
},
...
This is close, but the lines will be solid instead of dashed, and there will be no labels. You can get these effects by adding columns with roles to your data table. You'll not be able to use .arrayToDataTable() for this, but instead will need to use the more verbose syntax:
var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
['November', 1000, 400, 900, 700],
['December', 1170, 460, 900, 700],
['January', 660, 1120, 900, 700],
...
For dashed lines add a certainty role column following each of your "a" and "b" columns:
data.addColumn({ type: "boolean", role: "certainty" });
To get the "a" and "b" labels add a annotation role columns following each of your certainty columns:
data.addColumn({ type: "string", role: "annotation" });
The certainty column values should all be false. The annotation column values should all be null except for the last row where you want the label to appear. The annotation aligns above the data point instead of to the right where you want it, but that's as good as you can get.
Your data rows with the new columns added will look like this:
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
...
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
And, here's the end result: http://jsfiddle.net/2H7sp/2/
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn("string","Year");
data.addColumn("number","Sales");
data.addColumn("number","Expenses");
data.addColumn("number","a");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addColumn("number","b");
data.addColumn({type:"boolean",role:"certainty"});
data.addColumn({type:"string",role:"annotation"});
data.addRows([
['November', 1000, 400, 900, false, null, 700, false, null],
['December', 1170, 460, 900, false, null, 700, false, null],
['January', 660, 1120, 900, false, null, 700, false, null],
['February', 690, 1120, 900, false, null, 700, false, null],
['March', 780, 1120, 900, false, null, 700, false, null],
['April', 820, 1120, 900, false, null, 700, false, null],
['May', 660, 1120, 900, false, null, 700, false, null],
['June', 1030, 540, 900, false, "a", 700, false, "b"]
]);
var options = {
title: '',
backgroundColor: 'none',
legend: { position: 'none' },
hAxis: {
title: 'Year',
titleTextStyle: { color: 'grey' }
},
series:{
2:{areaOpacity:0,color:"#000"},
3:{areaOpacity:0,color:"#000"}
},
chartArea: {
left: 40,
top: 10,
width: 600,
height: 150
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
background-color: #f5f5f5;
width: 660px;
height: 200px;
overflow: hidden;
margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>