How to separate the dates in area chart of google charts - charts

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

Related

How to get string value centered above bars in bar chart

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:

Google Chart with Proportional Y-Axis

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

google chart multiple values in one column

How make a possible to display 2 values in 1 column (split red and yellow columns in one)?
I have plan of sold and value of sold ordered by months.
For ex:
Jan -
plan:100, sold:80
Feb -
plan:150, sold:150
So i want to see 2(4 columns in mind, second value should overlap first value) columns:
100 80
150 150
first column will be colored in two colors because sold value less then plan (100/80 )
second column will be colored in one color(yellow), because second column overlap first value 150/150
isStacked: true doesn't overlay first column
Thanks for advise.
Code that i use JsFiddle and what I need
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Plan');
data.addColumn('number', 'Sold');
data.addRows([
['Jan, 2015', 100, 80],
['Feb, 2015', 150, 150],
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'yellow'],
width: 600,
height: 175,
title: 'Total',
legend: 'none',
});
}
I was just doing a pie sample so I set up a diff bar sample with your data. It has our PDF print code in it but shows what I think you want (except the color):
http://jsfiddle.net/1og99wL1/
function drawChart() {
var oldData = new google.visualization.DataTable();
oldData.addColumn('string', 'Date');
oldData.addColumn('number', 'Plan');
oldData.addRows([
['Jan, 2015', 100],
['Feb, 2015', 150],
]);
var newData = new google.visualization.DataTable();
newData.addColumn('string', 'Date');
newData.addColumn('number', 'Sold');
newData.addRows([
['Jan, 2015', 80],
['Feb, 2015', 150],
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var data = chart.computeDiff(oldData, newData);
var options = {
colors: ['yellow'],
diff: {
oldData: { opacity: 1, color: '#ff0000' },
newData: { opacity: 1, widthFactor: 1 }
},
legend: 'none',
width: 600
};
<!-- For the PDF print -->
google.visualization.events.addListener(chart, 'ready', AddNamespace);
chart.draw(data, options);
}
Result:
Comments:
You must use "oldData" and "newData" as the names for the datasets. You cannot just choose arbitrary names. If you do, the chart will draw but the "diff" option will not work (crazy, must be burned into the code). The color must be set like below with one color set in "colors" option and the other set in "diff" option.

100 % stacked bar chart JQPlot

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 to prevent axis label running through tick labels

I have created a chart using dc.js, and I havea a nice label on my Y axis. However, it is running through the number next to the ticks. How can I prevent this?
Code to create the chart:
chart
.x(d3.scale.ordinal().domain(allCodes))
.xUnits(dc.units.ordinal)
.yAxisLabel("Number of actions")
.elasticY(true)
.dimension(runDimension)
.group(openActionCountGroup, "Open")
.stack(closedActionCountGroup, "Closed")
.colors (d2acolors)
.legend(dc.legend().x(540).y(10))
.title(function(d) { return d.key + ": " + d.value; })
;
You are likely looking for the margins method.
Here is an example: http://jsfiddle.net/djmartin_umich/rRVgu/
chart
.x(d3.scale.ordinal().domain(allCodes))
.height(300)
.width(300)
.margins({left: 50, right: 30, top: 0, bottom: 40})
.xUnits(dc.units.ordinal)
.yAxisLabel("Number of actions")
.elasticY(true)
.dimension(runDimension)
.group(openActionCountGroup, "Open")
.stack(closedActionCountGroup, "Closed")
.legend(dc.legend().x(540).y(10))
.title(function(d) { return d.key + ": " + d.value; });
You can change the left margin to give more room for the ticks.