I found a post from 2015 that says that column roles are not supported on Material Design charts. However, on the official documentation, I cannot find any note of it so wondering if that has changed.
I am adding an annotation role, but it doesn't seem to have any effect. Same of other roles, eg tooltip. For tooltip I might be able to work around that using the formatted value of cell, but still don't know how to add html content.
Here is my code :
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness', { role: 'annotation' }],
['Canis Major Dwarf', 8000, 23.3, "BR"],
['Sagittarius Dwarf', 24000, 4.5 , "ME"],
['Ursa Major II Dwarf', 30000, 14.3 , "BR"],
['Lg. Magellanic Cloud', 50000, 0.9, "DA"],
['Bootes I', 60000, 13.1 , "ME"]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
},
focusTarget: 'category',
crosshair: {
trigger: 'selection',
},
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
The annotation isn't shown anywhere. What am I missing? jsfiddle link here.
Related
I am developing a layered column chart using ComboChart on Angular google charts. Although I've separated two series of bar charts in two different axis, being able to find a bar in front of the other, like needed, I can't change the width of one of the series only. I want a result like the amCharts Layered Column Chart:
Layered Column Chart example
Right now, the chart looks like:
Current chart - Angular google charts
Also, if there is a way to share the same y axis while keeping one bar in front of the other, instead of staking then, it would be great.
The code I've been using for options of the angular google chart:
this.options =
{
colors: ['#1E90FF', '#f39800'],
hAxis: {
title: 'haxisTitle',
type: 'category'
},
vAxis:{
title: 'Value',
minValue: 0,
format: this.numberFormat
},
seriesType: 'bars',
bar: {1: {groupWidth: "30"}},
series:
{
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1,
}
},
vAxes: {
0: {
title: 'Altered Value',
label:'Altered Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue, // Sets the maximun value of altered or real value to the window size (both axis)
},
format: this.numberFormat,
type: 'bars'
},
1: {
title: 'Real Value',
label:'Real Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue,
},
format: this.numberFormat,
type: 'bars'
}
},
aggregationTarget: 'auto',
stackSeries: true,
isStacked : true,
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
maxZoomIn: 4.0
}
};
}
The chart shows the data correctly, the only problem is the layout.
Some reference that might help:
Google Developers - Visualization: Combo Chart
amCharts Layered Column chart
Overlapped bars - Stack overflow quote - Here the result was a stacked bar chart (something I don't want)
I have done a small graph with Google charts combochart combining
a stacked bar chart with a line chart.
The tooltips appear on all stacks and points of the line chart triggered by
mouse actions: 'focus' (mouse on the target), 'selection' (on click) and 'both' both click and focus.
I wanted to have all tooltips from line chart appeared after a click, trigger: set to 'selection' and all tooltips from stacked bar chart after a focus on the zone, trigger: set to 'focus'. Is this possible with Google Charts to set different tooltip behaviour in the same chart? How do I develop this?
Play my example here:
https://jsfiddle.net/machesne/xf1kccdq/
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var tooltipdata = [["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "],["Apples detail: ","Tomatoes detail: ", "Oranges detail : ", "Strawberries detail : "]]
var valuedata = [[50, 10, 15, 15, 90, 90],[50, 12, 15, 15, 92, 92],[60, 10, 15, 15, 100, 100]];
var data = google.visualization.arrayToDataTable([
['Date', 'Apples', { role: 'tooltip' }, 'Tomatoes', { role: 'tooltip' }, 'Orange', { role: 'tooltip' }, 'Strawberries', { role: 'tooltip' }, { role: 'annotation' }, 'Sum' , { role: 'tooltip' }],
['', valuedata[0][0], tooltipdata[0][0], valuedata[0][1], tooltipdata[0][1], valuedata[0][2], tooltipdata[0][2], valuedata[0][3], tooltipdata[0][3], valuedata[0][4],valuedata[0][5], tooltipdata[0][4]],
['', valuedata[1][0], tooltipdata[1][0], valuedata[1][1], tooltipdata[1][1], valuedata[1][2], tooltipdata[1][2], valuedata[1][3], tooltipdata[1][3], valuedata[1][4],valuedata[1][5], tooltipdata[1][4]],
['', valuedata[2][0], tooltipdata[2][0], valuedata[2][1], tooltipdata[2][1], valuedata[2][2], tooltipdata[2][2], valuedata[2][3], tooltipdata[2][3], valuedata[2][4],valuedata[2][5], tooltipdata[2][4]], ]);
var options = {
width: 1200,
height: 1000,
legend: { position: 'bottom', maxLines: 2 },
seriesType: 'bars',
bar: { groupWidth: '90%' },
isStacked: true,
tooltip: { isHtml: true, trigger: 'both' }, // CSS styling affects only HTML tooltips.
series: {4: {type: 'line', pointSize: 15 } }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Thanks a lot for your answers!
I have created a Google bar chart, with two x-axis.
My problem is that I cannot seem to get the correct format on the bottom axis, which should be shown in percentage.
I have tried to use the following
axes:{{},{format:'#%'}}}
And in general inserting format:'#%' at places that would make sense, but nothing seems to work.
Is there anyone who has an idea for this?
See the entire code here: https://jsfiddle.net/laursen92/azr4kfn0/1/
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Slave number', 'Voltage', '%'],
['Slave 1', 12.15, 0.40],
['Slave 2', 12.18, 0.50],
['Slave 3', 11.80, 0.60],
['Slave 4', 13.12, 0.70],
]);
var formatter = new google.visualization.NumberFormat({
pattern: '##0.00'
});
var formatter2 = new google.visualization.NumberFormat({
pattern: '##0%'
});
formatter.format(data, 1);
formatter2.format(data, 2);
var options = {
width: 800,
chart: {
title: 'Status of slaves',
subtitle: 'Overview of the voltage and SOC of connected slaves. '
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: {
axis: 'voltage'
}, // Bind series 0 to an axis named 'voltage'.
1: {
axis: 'percent'
} // Bind series 1 to an axis named 'soc'.
},
axes: {
x: {
voltage: {
side: 'top',
label: 'Voltage'
}, // Top x-axis.
percent: {
label: 'Percent',
} // Bottom x-axis.
}
},
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
Here's an update to your fidde: https://jsfiddle.net/Balrog30/azr4kfn0/4/
I used the a little codepen I wrote to reverse-engineer the changes to the material chart options, which are still mostly undocumented. You can find that here: http://codepen.io/nbering/pen/Kddvge
Here's how the option should be formatted:
var options = {
axes: {
x: {
yourAxis: {
format: {
pattern: "#%"
}
}
}
};
-- Or --
options.axes.x.yourAxis.format.pattern = "#%";
Ugh, the documentation for this seems so blasted clear, but I can't seem to correctly change the colors of the bars in my chart. There has to be something obvious that I'm missing....here's what I'm working with at the moment:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 700px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var options = {
width: 700,
height: 500,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'distance'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
chart.draw(data, options);
};
</script>
In my mind, I've defined the role, and formatted the colors exactly as they're shown on the docs - and yet I still have all blue (default) bar colorings.
[![Screenshot of Blue Bars][1]][1]
So, yeah, there's that. What did I botch?
As always, SO community, thanks for your time, attention, and expertise.
CDM
Update:
So now I'm here, but still with blue bars:
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres", { role: "style" } ],
["Conoco", 8.94, "#b87333"],
["Tesla", 10.49, "silver"],
["Texaco", 19.30, "gold"],
["Yahoo.com", 21.45, "color: #e5e4e2"]
]);
var options = {
width: 700,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
The code you posted in your question works fine with a few simple changes:
In this script tag:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
Change 'packages':['bar'] to 'packages':['corechart']
And in this line:
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
Change google.charts.Bar to google.visualization.ColumnChart
And change this options code:
var options = {
width: 700,
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
series: {
0: { axis: 'Acres' }, // Bind series 0 to an axis named 'Acres'.
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
To this instead:
var options = {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
legend: {
position: 'none'
},
hAxis: {
title: 'Companies'
},
vAxis: {
title: 'Acres'
}
};
JS Fiddle
Note that the regular Google charts do not support subtitles, so that is why I left the subtitle out in the options code I posted above.
Google material charts do support subtitles, but they apply colors to each series of data in your chart, not to each value within a series. Here's the complete code to use the material chart:
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="dual_y_div" style="width: 700px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
["Companies", "Acres1", "Acres2", "Acres3", "Acres4"],
["Conoco", 8.94, 10.21, 5.67, 14.53],
["Tesla", 10.49, 16.32, 20.15, 13.49],
["Texaco", 19.30, 17.10, 15.23, 25.37],
["Yahoo.com", 21.45, 22.32, 18.19, 27.43]
]);
var options = {
chart: {
title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
subtitle: 'updated December 15, 2015'
},
legend: {
position: 'none'
},
colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
series: {
0: { axis: 'Acres' },
1: { axis: 'Acres' },
2: { axis: 'Acres' },
3: { axis: 'Acres' }
},
axes: {
y: {
Acres: {label: 'Acres'}, // Left y-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_y_div'));
chart.draw(data, options);
};
</script>
JS Fiddle
I have not found a way to change the color shown on the material chart for each value within a series. So, it looks like you have to make a choice between omitting the subtitle and having the chart colors the way you want, or including the subtitle by using the material chart but having the color for each value within a series be the same.
This how u change the color of graph
var options = {
colors: ['#2980b9']
};
add this color option in ur options variable
in your case
var options = {
width: 700,
colors: ['#2980b9'],
.....
.....
if you have two bars in ur chart den do like this colors: ['#0d6957','#1fb89a']
If category axis label text is long or multiple words in a c3js chart, they are overlapping and makes it unreadable, is there any config or hack to fix this issue?
c3js category axis example
Copy and paste following code to reproduce this bug.
var chart = c3.generate({
data: {
columns: [
['data1',40, 30, 200, 100, 400, 150, 250, 50, 100, 250,67,190,48,123,76,54,254]
]
},
axis: {
rotated: true,
x: {
type: 'category',
categories: ['Travel and Hospitality','Life Science and Pharma', 'Saas and Cloud', 'Hi-tech Manufacturing', 'Software', 'Business Services', 'Govt/Public Sector', 'Energy', 'Manufacturing', 'Healthcare','Media','Internet','Retail','Biotech','Automobile','Consumer Goods','Financial Services']
}
}
});
I found the solution in the 'multiline' config under axis_x_tick as shown below:-
axis: {
rotated: true,
x: {
tick: {
multiline: false,
},
type: 'category',
}
}
Working example- multiline axis label disabled