I am currently facing an issue with Google charts which looks fairly simply. All I need is to remove the stroke-width of the current chart:
And make it look like the chart below:
What I have is a stacked area chart, so the options were set as follows:
var options = {
'title': '',
isStacked: true,
legend: {
textStyle: { fontSize: '16' },
position: 'top'
},
hAxis: {
title: '',
gridlines: {
color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
}
//ticks: [0, 100, 200, 75, 100] // display labels every 25
},
vAxis: {
title: '',
gridlines: {
color: '#D3D3D3',
count: 10,
//lineDashStyle: [2,2]
},
textStyle: {
fontName: 'Arial',
fontSize: '18'
},
viewWindow: { max: range_max, min: range_min } //TODO: make them generable
//showTextEvery: 100
},
'width': 1100, //100% //TODO: make this relative
'height': 600,
crosshair:
{
trigger: 'both'
},
series:
{
0: { pointSize: 8 },
3: { lineDashStyle: [5, 1, 3] },
4: { type: 'area', color: 'transparent'}, //visibleInLegend: false
5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent'
},
intervals: { 'style': 'line' },
colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000']
}
But the strokeWidth property doesn't seem to be working. Any suggestions on what I am doing wrong please?
using a style column, you customize each series individually
it works the same for all the Column Roles, (annotation, style, etc...)
the role is applied to which ever series column it follows
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
problem with the above example, the legend is now out of sync with the series style
use the chart's 'ready' event to correct the legend entry,
the black line will be a path element
depending on the styles used, the logic may need to be adjusted, but works here
the elements found in the container will be in the same order as the data
see following working snippet to correct legend entry...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'],
// add same style for each point, series 1 only
['2013', 1000, 400, 'stroke-width: 0;', 200, 400],
['2014', 1170, 460, 'stroke-width: 0;', 200, 400],
['2015', 660, 1120, 'stroke-width: 0;', 200, 400],
['2016', 1030, 540, 'stroke-width: 0;', 200, 400]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', color: 'transparent' },
1: { type: 'area', color: 'black' },
2: { type: 'line', color: 'red' },
3: { type: 'line', color: 'blue' }
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
if (path.getAttribute('stroke') === '#000000') {
path.setAttribute('stroke', 'transparent');
}
});
});
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I have a code that generates a google column chart but want to fix 3 things:
Show annotation on top of each stack.
Remove the scales generated on the right side of the graph shown in the image.
There are only three legend colors but it display nine colors. Just display colors of Actual Current, Actual Saving and Actual Time.
Thanks in advance.
Output image
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
isStacked: true,
theme: 'material',
width: 800,
height: 480,
annotations: {
style: 'line',
textStyle: {
bold: true,
color: "#000",
fontSize: 18,
auraColor: 'transparent'
},
alwaysOutside: true,
stem:{
color: 'transparent',
},
},
legend: {
position: 'bottom',
textStyle: {
bold: true,
color: "#000",
fontSize: 18,
auraColor: 'transparent'
}
},
//styles: ['color: #ee8800;opacity: 0.2;', 'color: #dd7790;opacity: 0.2;', 'color: #ff9900;opacity: 0.2;'],
// colors: ['#FF00FF', '#d2691e', '#a9a9a9'],
fillOpacity: 0.7,
bar: {
width: 28
},
vAxis: {
textPosition: 'none'
},
series: {
0: {//['#FF00FF', '#d2691e', '#a9a9a9']
targetAxisIndex: 0,
color: '#FF00FF',
annotations: {
// style: 'line',
alwaysOutside: true,
stem: {
//color: "transparent",
length: 15
},
textStyle: {
bold: true,
color: "#000",
fontSize: 18,
auraColor: 'transparent'
}
}
},
1: {
targetAxisIndex: 0,
color: '#d2691e'
},
2: {
targetAxisIndex: 0,
color: '#a9a9a9',
},
3: {
targetAxisIndex: 1,
color: '#FF00FF'
},
4: {
targetAxisIndex: 1,
color: '#d2691e'
},
5: {
targetAxisIndex: 1,
color: '#a9a9a9'
},
6: {
targetAxisIndex: 2,
color: '#FF00FF'
},
7: {
targetAxisIndex: 2,
color: '#d2691e'
},
8: {
targetAxisIndex: 2,
color: '#a9a9a9'
}
},
theme: 'material'
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Quarter');
data.addColumn('number', 'ActualCurrent');
data.addColumn('number', 'ActualSaving');
data.addColumn('number', 'ActualTime');
data.addColumn('number', 'PlanCurrent');
data.addColumn('number', 'PlanSaving');
data.addColumn('number', 'PlanTime');
data.addColumn('number', 'StategyCurrent');
data.addColumn('number', 'StrategySaving');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn('number', 'StrategyTime');
data.addColumn({ type: 'string', role: 'annotation' });
data.addRows([
['2001', 9866, 333, 721, 163, 986, 333, 263, 386,'386', 733,'733'],
['2002', 1633, 231, 539, 125, 986, 333, 463, 186,'186', 253,'253'],
['2003', 1255, 819, 123, 197, 986, 333, 893, 586,'586', 933,'933'],
['2004', 1977, 536, 613, 231, 986, 333, 463, 186,'186', 833,'833']
]);
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
// move annotations
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
var yLocation = chartLayout.getYLocation(0) + options.annotations.textStyle.fontSize;
var observer = new MutationObserver(function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (annotation) {
if ((annotation.getAttribute('text-anchor') === 'middle') &&
(parseInt(annotation.getAttribute('font-size')) === options.annotations.textStyle.fontSize)) {
var rotate = 'rotate(270 ' + annotation.getAttribute('x') + ' ' + yLocation + ')';
annotation.setAttribute('y', yLocation);
annotation.setAttribute('transform', rotate);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<div id="chart_div" style="width: 100%; height: 100%;"></div>
I have an annoying problem. I'm creating a google line chart with an area-interval. As soon as I give the interval-columns the role: 'interval' the chart creates some sort of left and right boundary inside my linechart. How can I get rid of this?
This is my chart-code:
chartType: 'LineChart',
dataTable: {
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', p: {role: 'interval'}},
{id: 'i1', type: 'number', p: {role: 'interval'}}
],
rows: []
},
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindowMode: 'maximized'
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: blauw1,
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: blauw5},
fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
colors: [blauw1],
areaOpacity: 0.0,
}
};```
This is how my chart look's like when the 2 interval-columns don't have the ```role: 'interval'``` added:
[without role: interval][1]
This is how my chart look's like when the 2 interval-columns have the ```role: 'interval'``` added:
[with role: interval][2]
[1]: https://i.stack.imgur.com/zpT3D.png
[2]: https://i.stack.imgur.com/0x3XG.png
instead of using option --> hAxis.viewWindowMode: 'maximized'
use a distinct view window using the min and max dates from the data...
hAxis.viewWindow: data.getColumnRange(0)
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', role: 'interval'},
{id: 'i1', type: 'number', role: 'interval'}
],
rows: [
{c:[{v: new Date(2020, 0, 27)}, {v: 10}, {v: 8}, {v: 12}]},
{c:[{v: new Date(2020, 0, 29)}, {v: 12}, {v: 10}, {v: 14}]},
{c:[{v: new Date(2020, 0, 31)}, {v: 14}, {v: 12}, {v: 16}]},
{c:[{v: new Date(2020, 1, 2)}, {v: 10}, {v: 8}, {v: 12}]}
]
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
dataTable: data,
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindow: data.getColumnRange(0)
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: 'cyan',
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: 'blue'},
//fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
//colors: [blauw1],
areaOpacity: 0.0,
}
});
chart.draw();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I would like to know what is other option that I need to disabled the hover state of my column bar. I try this code
'tooltip' : {
trigger: 'none'
}
this doesn't work.
I only have a simple code here
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Phase', 'Sales', 'Expenses', 'Profit'],
['1', 20, 40, 70],
['2', 90, 75, 50],
['3', 20, 40, 10],
['4', 30, 75, 80],
['5', 100, 75, 50],
['6', 50, 90, 50],
['7', 100, 75, 20],
['8', 40, 30, 50],
]);
var options = {
tooltip: { trigger: 'none'},
bars: 'vertical',
vAxis: {format: 'decimal'},
enableInteractivity: false,
height: 400,
colors: ['#ac226d', '#016ac6', '#fff'],
backgroundColor: '',
legend: { position: "none" },
bar: {groupWidth: "15%"},
hAxis: {
textStyle:{color: '#FFF'}
},
series: {
lineWidth: 10
},
vAxis: {
textStyle:{color: '#FFF'},
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
I try to search it, but the only answer that I find is the trigger:none.
look at this:
Tooltips | Charts | Google Developers
you can add column with rol tooltip and empty it.
Try setting this option:
var options = {
enableInteractivity: false
}
See image hAxis labels:
The hAxis labels are wrapping onto two lines, their values are, for example, 10.09 with no spaces. But on narrower screens its wrapping onto two lines, this is in Firefox.
In Chrome it works much better. This is how it looks in Chrome:
var options = {
height: 314,
areaOpacity: 0.18,
enableInteractivity: false,
isStacked: true,
hAxis: {
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
}
},
vAxis: {
slantedText: true,
minValue: 0,
textPosition: 'out',
title: 'Revenue',
titleTextStyle: {
fontSize: 14
},
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
},
baselineColor: '#eff1f2',
gridlines: {
color: '#eff1f2',
count: 15
}
},
lineWidth: 2,
colors: ['#00a8ff'],
curveType: 'function',
pointSize: 5,
pointShapeType: 'circle',
pointFillColor: '#008ffb',
backgroundColor: {
fill: '#ffffff',
strokeWidth: 0,
},
chartArea: {
left: 60,
top: 10,
width: '100%',
height: 260
},
fontSize: 11,
fontName: 'Proxima Nova',
tooltip: {
trigger: 'selection',
isHtml: true
},
seriesType: 'bars',
series: {
0: { color: '#2db56e' },
1: { color: '#cc0000' },
2: {
type: 'line',
color: '#00a8ff',
pointSize: 4,
pointShapeType: 'circle'
}
}
};
How can I improve the appearance of the Firefox version? Because at present its very hard to read
try setting the following option to 1 --> hAxis.maxTextLines
hAxis: {
maxTextLines: 1,
...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['date', 'revenue'],
['10.01', 20],
['10.02', 30],
['10.03', 40],
['10.04', 50],
['10.05', 60],
['10.06', 70],
['10.07', 80],
['10.08', 90],
['10.09', 100],
['10.10', 120],
['10.11', 130],
['10.12', 150],
['10.13', 200],
['10.14', 220],
['10.15', 230],
['10.16', 240],
['10.17', 250],
['10.18', 260],
['10.19', 270],
['10.20', 280],
['10.21', 280],
['10.22', 290],
['10.23', 320],
['10.24', 340],
['10.25', 350],
['10.26', 360],
['10.27', 370],
['10.28', 380],
['10.29', 390],
['10.30', 400],
['10.31', 420]
]);
var options = {
height: 314,
areaOpacity: 0.18,
enableInteractivity: false,
isStacked: true,
hAxis: {
maxTextLines: 1,
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
}
},
vAxis: {
slantedText: true,
minValue: 0,
textPosition: 'out',
title: 'Revenue',
titleTextStyle: {
fontSize: 14
},
textStyle: {
color: '#919fa9',
fontName: 'Proxima Nova',
fontSize: 11,
italic: false
},
baselineColor: '#eff1f2',
gridlines: {
color: '#eff1f2',
count: 15
}
},
lineWidth: 2,
colors: ['#00a8ff'],
curveType: 'function',
pointSize: 5,
pointShapeType: 'circle',
pointFillColor: '#008ffb',
backgroundColor: {
fill: '#ffffff',
strokeWidth: 0,
},
chartArea: {
left: 60,
top: 10,
width: '100%',
height: 260
},
fontSize: 11,
fontName: 'Proxima Nova',
tooltip: {
trigger: 'selection',
isHtml: true
},
seriesType: 'bars',
series: {
0: { color: '#2db56e' },
1: { color: '#cc0000' },
2: {
type: 'line',
color: '#00a8ff',
pointSize: 4,
pointShapeType: 'circle'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am developing a dynamic google chart with asp.net , my problem is that when i pass Double values to google chart it parses the values to integer , even if the value is double , how can i view data as it is (double), here is my code
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 20.22, 640.52, 200],
['2013', 50.72, 150, 30.52]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 30, 100, 100],
['2013', 120, 80, 20]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 180, 200, 70],
['2013', 170, 60, 190]
]);
var options2 = {
chart: {
title: 'jordan -mk3',
subtitle: 'jordan -mk3 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var options1 = {
chart: {
title: 'jordan -mk2',
subtitle: 'jordan -mk2 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
chart2.draw(data2, options2);
var options3 = {
chart: {
title: 'jordan -mk4',
subtitle: 'jordan -mk4 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart3 = new google.charts.Bar(document.getElementById('chart_div3'));
chart3.draw(data3, options3);
var options = {
chart: {
title: 'jordan -mk4',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#d95f02']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options1);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>
The answer was easy just to add this line of code google.charts.Bar.convertOptions(
chart.draw(data, google.charts.Bar.convertOptions(options1));
The code will be like:
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 20.22, 40.52, 200],
['2013', 50.72, 150, 30.52]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 30, 100, 100],
['2013', 120, 80, 20]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Egypt', 'Morocco', 'Tunisia'],
['2012', 180, 200, 70],
['2013', 170, 60, 190]
]);
var options2 = {
chart: {
title: 'jordan -mk3',
subtitle: 'jordan -mk3 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var options1 = {
chart: {
title: 'jordan -mk2',
subtitle: 'jordan -mk2 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart2 = new google.charts.Bar(document.getElementById('chart_div2'));
chart2.draw(data2, google.charts.Bar.convertOptions(options2));
var options3 = {
chart: {
title: 'jordan -mk4',
subtitle: 'jordan -mk4 2012-2013',
backgroundColor: 'transparent'
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
chartArea: {
backgroundColor: 'transparent',
},
height: 400,
backgroundColor: {
fill: null
},
colors: ['#004389', '#AA2121', '#3C3C3C', '#3C3C3C', '#d95f02']
};
var chart3 = new google.charts.Bar(document.getElementById('chart_div3'));
chart3.draw(data3, google.charts.Bar.convertOptions(options3));
var options = {
chart: {
title: 'jordan -mk4',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {
format: 'decimal'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3', '#7570b3', '#d95f02']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options1));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>