Currently I have two graphs I'm rendering on a page, I'm using google's visualization Charts lib and due to page sizing issues the vAxes refuses to render some/most of the time.
If I give it enough space, it will render the axes fine, but if it's even slightly off, even when there's plenty of space for these bloody axes, they just refuse to render, I can't have that!
I looked into it and it seems to be rendering bunch of tags when it works and doesn't render when it doesn't work, which makes me think there ought to be some bull if-else "AI" that actively chooses to sabotage me! FS!
Has anyone had experience with Charts and managed to find a workaround on forcing the lib to render the vAxes regardless of what google "AI" wills? (Seriously, what happened to second law of robotics?! OBEY ME, SCUM!)
Sorry, I'm a bit irked atm.
Edit: Sorry, to provide the details, here's the js block rendering the charts:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.charts.load('visualization', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
hAxis: {showTextEvery: 5},
vAxes: {
0: {textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min:0},
gridlines: {color: 'transparent'},
},
1: { textPosition: 'out',
viewWindow: {min:0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {0: {targetAxisIndex:0, type: 'line'},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1},
}
};
//Chart render
var data1 = new google.visualization.DataTable(<?=$jsonEventType?>);
var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart1.draw(data1, options);
}
div element:< div id="chart_div1" style=" height: 100%;"> (it's within multiple other divs, but that's besides the point)
As you can tell it's a basic c-c-c-combo chart, the $jsonEventType doesn't matter i think but here it is:
string(661) "{"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]}"
you can use the chartArea config code to ensure there is enough room on either side of the chart.
by default, the chart will follow the size of the container,
but it does not entirely fill the container.
I like to use the chartArea option,
to stretch the chart to the height and width of the container,
and leave room on the edges for the axes and legend, etc...
chartArea: {
top: 32, // leave room on top for legend
left: 60, // for axis index 0
right: 60, // for axis index 1
bottom: 32, // for x-axis
height: '100%', // stretch height
width: '100%', // stretch width
},
height: '100%', // ensure fills height of container
width: '100%', // fills width of container
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]});
var options = {
chartArea: {
top: 32, // leave room on top for legend
left: 60, // for axis index 0
right: 60, // for axis index 1
bottom: 32, // for x-axis
height: '100%', // stretch height
width: '100%', // stretch width
},
height: '100%', // ensure fills height of container
width: '100%', // fills width of container
hAxis: {showTextEvery: 5},
vAxes: {
0: {
textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min: 0},
gridlines: {color: 'transparent'},
},
1: {
textPosition: 'out',
viewWindow: {min: 0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {
0: {targetAxisIndex:0, type: 'line'},
1: {targetAxisIndex:1},
2: {targetAxisIndex:1},
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart_div1 {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>
Related
I have this google chart timeline (using react-google-charts).
<Chart
chartType="Timeline"
data={data}
width="100%"
options={{
allowHtml: true
bar: { groupWidth: 10 },
}}
/>
I tried adding bar: { groupWidth: 10 } and its working on the normal bar chart but not on the timeline.
Try for example this jsfiddle here: https://jsfiddle.net/c5hyknfr/2/
Doesnt work for the timeline. Any other way to do that?
EDIT: Added a bounty, in case someone knows also any workaround with CSS and/or using classes. Hacky solutions approved.
You can increase the font size for the bar's labels. This will also increase the bar's height. You need to add the barLabelStyle.fontSize-property in the options-object:
var options = {
timeline: {
groupByRowLabel: true,
showRowLabels: true,
rowLabelStyle: {
fontName: 'Helvetica',
fontSize: 9,
color: '#000000'
},
barLabelStyle: {
fontSize: 30
}
},
'width': 1100,
'height': 2200,
'chartArea': {
width: '80%', // make sure this is the same for the chart and control so the axes align right
height: '80%'
},
'backgroundColor': '#ffd',
'view': {
'columns': [0, 1, 4, 5]
}
};
Then you could adjust your CSS to decrease the font-size again, but your bars will remain bigger. Please note that the labels of the bars aren't correctly centered anymore. That's why you need to transform the position, so the labels are centered again:
rect + text {
font-size: 12px;
transform: translate(0, -5px);
}
With the values from the example it will look like this:
I am attempting to render a Google bar chart. In my JavaScript, I have the following:
var options = {
width: '100%',
height: '100%',
chartArea: {
height: '100%',
width: '100%',
left: 85,
top: 10,
bottom: 60,
right: 25
},
legend: { position: 'bottom', alignment: 'start' },
annotations: { alwaysOutside: true},
hAxis: {
gridlines: { count: 10 },
},
};
When I execute this, I get the following JavaScript errors:
However, if I change the height from '100%' to '400' as shown below, the chart renders correctly with no JS errors.
var options = {
width: '100%',
height: '400',
chartArea: {
height: '100%',
width: '100%',
left: 85,
top: 10,
bottom: 60,
right: 25
},
legend: { position: 'bottom', alignment: 'start' },
annotations: { alwaysOutside: true},
hAxis: {
gridlines: { count: 10 },
},
};
If it matters, the div that represents the chart is in a Bootstrap container. The HTML looks as follows:
<div id="chart_div" class="col-xs-12 col-md-6">
</div>
The issue is here that google chart width and height expect a number, but you are sending a string including the % symbol, this is what the NaN error is, its Not a Number!
EDIT
Apologies, the documents state it can be either a number or string, my guess is that it is trying to convert it to a string and the % causes the error
chartArea.width
Type: number or string
Default: auto
chartArea.height
Type: number or string
Default: auto
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options
Edit 2
I was actually looking at the chartArea.height and not height.
The documentation states that the height and weight should be in pixels, so a number
height
Height of the chart, in pixels.
Type: number
Default: height of the containing element
width
Width of the chart, in pixels.
Type: number
Default: width of the containing element
So I cant really answer your original question, why the chart will accept a string is a mystery, when it is clearly defined as requiring a number.
I need to create pretty simple horizontal bar chart in my react application, but really can't get it done.
Things I've tried so far (vertical bars are working good though):
1) http://fraserxu.me/react-chartist/, chartist itself has horizontal bars, but I didn't find a way to make it work with react module
2) https://github.com/reactjs/react-chartjs doesn't support horizontal bars, though there is some PR for it, but also not sure how to make it work
3) https://github.com/laem/react-horizontal-bar-chart isn't supported anymore
I need to have something like this, so that not all bars start from the axes
So does somebody know any existing component for such things?
I'm also looking for opportunity to add some animation on load there.
Or any other ways out.
Thanks
full disclosure I'm a member of the ZingChart team.
ZingChart supports horizontal bar charts with offsetValues. I have put together a react example for you. The following standard vanillaJS version is below as well.
react demo on codepen
var myConfig = {
type: 'hbar',
plot: {
stacked: true,
animation: {
sequence: 3,
effect: 4,
method: 1,
speed: 500
}
},
legend: {
borderWidth: 0
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu']
},
scaleY: {
minValue: 0,
maxValue: 16,
step: 4.5,
decimals: 1
},
series: [
{
values: [5.0,3.0,5.5,2.0,2.5],
offsetValues: [1.0,3.0,0,2.0,2.5],
backgroundColor: '#FF6600',
valueBox: {
placement: 'bottom',
rules: [
{
rule: '%i == 2',
visible: false
}
]
},
text: 'Jim'
},
{
values: [5.0,8.0,9.0,4.0,3.5],
offsetValues: [1.0,3.0,0,2.0,2.5],
backgroundColor: '#DC143C',
valueBox: {},
text: 'Joe'
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
<!--Inject End-->
</head>
<body>
<div id="myChart"></div>
</body>
</html>
I am using google pie charts, all is working fine but legend label on right side is cut off.
there is also no option in google API to control these labels. here is documentations
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
for whiteHat
please see here are images..
1st with hide div
and a div not hide...
the legend would normally wrap, see following working snippet,
using the options shown in the attached image
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var data = google.visualization.arrayToDataTable([
['Education', 'People'],
['less than high school', 10],
['high school', 10],
['college associate', 10],
]);
var options = {
width: '470',
height: '450',
chartArea: {
width: '80%',
height: '80%',
left: 100,
},
pieSliceTextStyle: {
color: 'white',
fontSize: '17.5'
},
colors: ['#90c458', '#ff7f66', '#ffce55', '#52c2e8']
};
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
how to increase Google chart y axis width. pls find the image. left side full text was not comes properly. please guide me. how to increase Google chart y axis width
need to adjust the size of the chart and chartArea in the options
to leave room for the y-axis labels on left, use chartArea.left
to leave room for the title on top, use chartArea.top
see following example, added colors to highlight each area...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Category', 'Score'],
['APPLYING LEADERSHIP TECHNIQUES', 40],
['ASSERTIVENESS', 30],
['COACHING, COUNSELING, TEACHING', 10],
['CONFLICT MANAGEMENT', 20]
]);
var options = {
// adjust chart size
height: 600,
width: 800,
chartArea: {
// adjust chart area size
left: 300,
top: 40,
height: 500,
width: 480,
backgroundColor: 'magenta'
},
backgroundColor: 'cyan',
colors: ['lime'],
legend: {
position: 'bottom'
},
title: 'Title'
};
var chart2 = new google.visualization.BarChart(document.getElementById('barchart_core'));
chart2.draw(data, options);
},
packages: ['bar', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_core"></div>