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/
Related
I am having trouble aligning the text above the correct bars in the following bar graph, I can't figure out where it's going wrong?
CODE:
bar(two_weeks,zAxis);
text(1:length(two_weeks),zAxis,num2str(zAxis),'vert','bottom','horiz','center');
box off
ylabel('Z Axis')
BAR CHART:
The arrows were added post production and are showing where they should be aligned to. Also note that I was too lazy to draw all of the arrows.
DATA:
two_weeks =
1×14 datetime array
[ 21-Nov-2018, 22-Nov-2018, 23-Nov-2018, 24-Nov-2018, 25-Nov-2018, 26-Nov-2018, 27-Nov-2018, ...
28-Nov-2018, 29-Nov-2018, 30-Nov-2018, 01-Dec-2018, 02-Dec-2018, 03-Dec-2018, 04-Dec-2018 ]
zAxis =
[ 5, 12, 1, 7, 13, 24, 2, 27, 62, 0, 3, 17, 74, 4 ].'
Your x axis is specified using a datetime array. What you're then using is guesswork to align indices (1:length(two_weeks)) for the x coordinates of your text items.
Instead, simply use the same datetime array for the position of the text!
bar( two_weeks, zAxis );
text( two_weeks, zAxis, arrayfun(#num2str,zAxis,'uni',0) );
As you did in the question, we want to set 'VerticalAlignment' to 'bottom' and 'HorizontalAlignment' to 'center' to neaten things up above the bars:
bar( two_weeks, zAxis );
text( two_weeks, zAxis, arrayfun(#num2str,zAxis,'uni',0), ...
'VerticalAlignment', 'bottom', 'HorizontalAlignment', 'center' );
Output:
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
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!!
How can I create a columnrange highchart with a point object with one x and two y values? I need to have a point object as the points should be clickable and styleable.
Is there something like
data: [
{x:1, y1:-5.2, y2:10.4}
]
or
data: [
{x:2, y: [-13.5, 9.8]}
]
I already tried these and some other things but they didn't work.
Is there any way to create something like that?
Thanks!
Instead of y1/y2 you should use low/high
{
x:Date.UTC(2012,12,2),
low:-9.7,
high:9.4
},
data: [
[Date.UTC(2010, 0, 1),-9.7, 9.4],
[Date.UTC(2010, 0, 2),-8.7, 6.5],
[Date.UTC(2010, 0, 3),-3.5, 9.4],
[Date.UTC(2010, 0, 6),-1.4, 19.9],
[Date.UTC(2010, 0, 7),0.0, 22.6],
[Date.UTC(2010, 0, 8),2.9, 29.5],
]
DEMO