I am trying to get the y-axis of my stacked Google column chart proportional. I have tweaked the settings and am not able to get it to work. If the max column value is 1, there should only be 1 horizontal grid line. There should not be three with the value of 1. That doesn't make sense.
Here are my chart options:
var options = {
colors: ['#ba1f1f', '#306b34', '#255f85', '#e28413', '#f24333'],
bar: { groupWidth: "90%" },
chartArea: { left: 50, top: 10, width: '100%', height: '75%' },
legend: { position: 'bottom' },
animation: { startup: true, duration: 250, easing: 'linear' },
isStacked: true,
hAxis: {
slantedText: true
},
vAxis: {
format: '#'
},
height: 350
};
And here is a picture of my problem:
Does anyone have any suggestions on how to fix this? Thanks!
Update with #WhiteHat's suggestions:
I tried your suggestion. It didn't really work. Here is my result if I set explicitly and not based on the column range max.
The total count for the 8 AM column is 7. 7 AM is 4 and 6 AM is 1.
I could have to do some other data manipulation to count the total number per column in the stacked column chart and find the max to not explicitly set the gridlines count. But that is after I can get it working correctly.
you can add following option when max column value is 1
vAxis: {
gridlines: {
count: 2 //<-- default is 5
}
},
or add decimals to format : '#,##0.00' to avoid repeating 1
you can use data table method to check max column value
data.getColumnRange(columnIndex).max
Related
I want the gauge chart inside a 'rectangular' div, with height=300px and width =400px
If I setup the chart height=300, width=400,the resulting chart is not taking all the available height&width (see image), in fact it looks as if it is taking the necessary space for a circle instead of a semi-circle.
I set up height=300, width=400 for all internal pies, as well as these parameters in 'chart', with no improvements
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0,
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacing: [0, 0, 0, 0]
jsfiddle available here https://jsfiddle.net/perikut/0woz42vt/248/
thanks in advance
You are right, the space is adapted for a circle - please check this example: https://jsfiddle.net/BlackLabel/2jrch4xn/
You need to position the chart as you want by center property:
pane: {
...,
center: ['50%', '100%']
},
plotOptions: {
series: {
...,
center: ['50%', '115%']
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/4m2t6p35/1/
I'm using google charts and in partivular I have an area chart with many monthly data. However, as you can see in the image below, the dates on x-axis are too much close and is not possible to read them. How can i separate the dates in order to show them? Many thanks!
and this is my code:
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>;
<script type='text/javascript'>;
google.charts.load('current', {'packages':['corechart']});;
google.charts.setOnLoadCallback(drawChart2);;
function drawChart2() {;
var data = google.visualization.arrayToDataTable([;
['Time', 'Retorno'],;
for ($x = 0; $x <= count($date_array_all)-1; $x++) {
['" . $date_array_all[$x] . "', " . $equity_array_all[$x] . "], ;
}
]);;
var options = {;
chartArea: {left: 70, right:50, top: 30, bottom: 50},;
series: {;
0: { color: '#469DE4' },},;
legend: 'none',;
vAxis: {textStyle:{color: '#7F7F7F'}, baselineColor: '#CCCCCC', format: '#%', gridlines: {color: 'transparent'}},;
fontName: 'Source Sans Pro',;
hAxis: {textStyle:{color: '#7F7F7F'}}};;
var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));;
var formatter = new google.visualization.NumberFormat({pattern:'#,###%'});;
formatter.format(data, 1);;
chart.draw(data, options);;
};
</script>;
<div id='chart_div2' style='height: 450px;'></div>;
try increasing the bottom of the chart area...
chartArea: {left: 70, right:50, top: 30, bottom: 72} // <-- increase bottom here
with a discrete axis (string values on the x-axis), you also have the following options...
hAxis.minTextSpacing - Minimum horizontal spacing, in pixels, allowed between two adjacent text labels.
hAxis.showTextEvery - How many horizontal axis labels to show, where 1 means show every label, 2 means show every other label, and so on.
more control is allowed with a continuous axis (actual date objects on the x-axis)
in this case, you could build an array (hAxis.ticks) with the exact values
I am building a chart with dates as the x-axis and we use Baidu echarts to build them.
For a range of 10-15 days, I just plot them via xAxis.data and it works. But when I have a bigger range, say of 2-3 months, the dates come up stacked or too crunched for space as there are many of them. After looking at some ideas on the web, I was thinking of formating them as below(The days are grouped by months and seperated at a uniform gap of 8-10 days):
2 12 22 2 12 22 2 12 22
Dec Jan Feb
I am aware of the xAxis.axisLabel.formatter but that seems to be helpful when I want to format individual entry, not what I want. Is it possible in echarts to have a multi-level x-axis where top is individual entries & bottom row basically represents group for them?
Hope it made sense.
Here's an example: https://gallery.echartsjs.com/editor.html?c=xBk7TY_hWx
Generally speaking, you need to create an extra entry in xAxis (or yAxis in the example's case) and another series like:
{
type: 'bar',
data:['-', '-', '-', '-', '-'],
yAxisIndex: 2
}
For more general implementation of the grouped category axis, hope this example is helpful to you.
https://jsfiddle.net/borguenon/kyj2pxhz/13/
xAxis: [
{
position: "bottom",
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
{
position: "bottom",
data: ["group1", "", "", "group2", "", ""],
interval: 1,
axisLine: {
show: false
},
axisTick: {
alignWithLabel: false,
length: 40,
align: "left",
interval: function(index, value) {
return value ? true : false;
}
},
axisLabel: {
margin: 30
},
splitLine: {
show: true,
interval: function(index, value) {
return value ? true : false;
}
}
}
]
Grouped category axis
I'm using Google Chart's stacked column chart, what i wanna achieve is to display the total on top of each column and i'm using annotation for this. As you look at the image, somehow only the annotation on the 5th column (1,307.20) is working as expected.
As i investigate , this seem like a bug of Google Chart , this bug can be explained like below
[[Date, Car, Motobike, {role: :annotation}],
[June 2015, 500, 0, 500],
[Feb 2015, 500, 600, 1100]]
[March 2015, 700, 0, 700],
With the above data, the annotation for Feb 2015 is the only which is displayed correctly , the other 2 do not since the last value of then is 0 , when I change the last value to 1 for June and March , the annotation is displayed correctly.
Then I think of a work around is to always display the "non-zero" data on top , and here's the result:
The annotations are moved on top properly , but as you can see, it's located within the column and what i want to achieve is to move it on top of the column .
I'm stuck with this for a while , Google Documentation doesn't help much with this case. Any help would be highly appreciated
I had the same problem, some of my series had 0 as my last value so the label would show on the X Axis instead of at the top. With dynamic data it would be a real challenge to ensure the last value was never 0. #dlaliberte gave me a hint where to start with this comment:
"As a workaround, you might consider using a ComboChart with an extra
series to draw a point at the top of each column stack. You'll have to
compute the total of the other series yourself to know where to put
each point."
I found a combo chart from google's gallery and opened jsfiddle to see what I could do. I left the data mostly, but changed the series name labels and made the numbers a little simpler. Don't get caught up on the purpose of the graph the data is regardless, I just wanted to figure out how to get my annotation to the top of the graph even when the last column was 0 (https://jsfiddle.net/L5wc8rcp/1/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Total', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
That produced this graph, which is a great start:
As you can see since series 5 (our Total of the other series) is a type: 'line', so it will always point to the top of the stack. Now, I didn't necessarily want the line in my chart, since it was not used to compare continuous horizontal totals, so I updated series 5 with lineWidth: 0, and then made the title of that category '' so that it wouldn't be included in the legend as a stack (https://jsfiddle.net/Lpgty7rq/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line', lineWidth: 0}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
And Voila!
Use alwaysOutside: true.
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
}
You will want to use the annotations.alwaysOutside option:
annotations.alwaysOutside -- In Bar and Column charts, if set to true,
draws all annotations outside of the Bar/Column.
See https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
However, with a stacked chart, the annotations are currently always forced to be inside the columns. This will be fixed in the next major release.
As a workaround, you might consider using a ComboChart with an extra series to draw a point at the top of each column stack. You'll have to compute the total of the other series yourself to know where to put each point. Then make the pointSize 0, and add the annotation column after this series.
I have the below code for drawing a JQPlot bar chart. Now I want all the bars to be at the same height and display the colors in percentages. Couldn't seem to find an example. Please help!!
Current graph
Expected result
var s3 = [11, 28, 22, 47, 11, 11];
var s1 = [0, 6, 3, 0, 0, 0];
var s2 = [1, 0, 3, 0, 0, 0];
var dataArray = [s3, s1, s2];
var ticks = ['John', 'Tumm', 'Wen', 'Ken', 'Dolly'];
var options = {
title: 'Title ',
stackSeries: true,
seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
// renderer: $.jqplot.CategoryAxisRenderer,
//
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min: 0,
tickInterval: 5,
max: 50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};
var plot = $.jqplot('chartDivId', dataArray, options);
I resolved this issue recently and thought I would share a description of how I solved the problem. I managed to produce a "normalized" stacked bar chart; a chart where all the bars are the same size with data of different scales. Excel of course produces this easily. Turns out, so does jqPlot; there just are no good examples.
The solution is to structure the chart data so that each of the inner-most elements contain three items (i.e. [1, 2, 3]) rather than the usual 2 ([1, 2]). The 1st item is the series number, the 2nd item is the plot point, which jqPlot assumes will also be the label for the plot point. However, this behavior is over ridden by the third item, a label which can be different from the data. So in my case the structure is: ([series], [bar percent], [data]).
For example, if my first bar has two stacks, the 1st stack is 97% and the 2nd stack is 3%, yet the data displayed can be 12 and 456 (12 + 456 = 468 >>> 12/468 = 2.56% and 456/468 = 97.43% [you could also just subtract the first from 100%])
The jqPlot documentation does hint at this but it's not very explicit and I spent an entire day trying to figure this out myself. Read carefully example #2: http://www.jqplot.com/tests/point-labels.php. That's what cracked it for me. :)
Cheers,
Rich
The problem is resolved now!! Its all about supplying the data though arrays(S1,S2,S3) in percentages!!