I am working on graphael Chart for a Bar Graph as below. I am having difficulty in getting x-axis and y-axis for the below code.
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder");
//r.barchart(x, y, width, height, values(array), opts);
var barChart = r.barchart(100, 100, 300, 200, [100, 50, 50, 50, 50, 50, 20],
{stacked: true,width: 50,
//It is the Space between the bars and the size will be reduced
"gutter":"150%",
colors: [
"000-#d00-#900",
"000-#f64-#c31",
"000-#fc0-#c90",
"000-#3a3-#070",
"000-#2bc-#089",
"000-#00d-#00a",
"000-#808-#404"
]});
};
</script>
The chart for the above code is as below
Now I want to have x and y axis values which are empty.X and Y scales.
I have tried few techniques which haven't worked out.I added axis: "0 0 1 1" to the options and tried other few workaround but in vain.
Thanks for replying.
Related
I have a simple echart here with a simple horizontal line defined by the yAxis . My question is is there anyway I can confined the length of the line to a point on the xAxis? I want the line to end at '2017-10-18' instead of the end of the graph or '2017-10-20'
I tried specifying both x and y axis at the same time, but doesn't seem to be working. Any help will be appreciated.
You have 2 options :
Markline
series-line.markLine doc
This is what you used in your example, but replace markline data with that :
markLine: {
data: [[
{
coord: [0, 0.901],
},
{
coord: [4, 0.901]
}
]]
}
data is a list of marklines. To declare a line with specific [[x1, y1], [x2,y2]], you'll have to define a list of points within the list of marklines (that's why there are two brackets in a row).
Graphics
graphic.elements-line doc
Otherwise graphics gives more freedom to draw anything on the graph.
graphic: {
elements: [
{
type: 'group',
left: 'center',
top: 'center',
children: [
{
type: 'line',
x: 20,
shape: {
x1: -250,
y1: -100,
x2: 10,
y2: 40,
},
}
]
}
]
}
But x1,y1,x2 and y2 coordinates are in pixel. If you want it to use the series coordinates, you can use convertToPixel()
myChart.convertToPixel({seriesIndex: 0}, [0,0.901])
Result
In red : markline and in black : graphics
Code
Original position
original
When Button moving to the left
executed
https://codesandbox.io/s/material-demo-forked-hwvxl?file=/demo.js
Please tell me how to do it, thanks
you just add marginLeft t your paper as the same margin as your button
margins indicate how many spacing is there between elements , and it can be set in all 4 directions or on one of the axis
paper: {
maxWidth: 400,
minWidth: 100,
marginLeft : 50 // here
},
btn: {
marginLeft: 50 // same as this
}
Here is a chart rendered using one of the Google Charts demos. My actual use case is very similar to this, a vertical axis with integer labels and a horizontal axis with string labels.
Fiddle: https://jsfiddle.net/1f0dvehq/
The X-axis has the labels starting at what seems to be an arbitrary distance from 0,0. I need those red and blue lines to start at X=0, and have the first X-axis label shift so that it sits below 0,0, as in the following screenshot:
I have tried passing minValue options to the horizontal axis via hAxis but this doesn't seem to work with strings like it does with integers.
The following options are being passed to the fiddle chart (again, from the demo code):
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
How can I align the X axis labels so they take up 100% of the chart width, with the first label falling underneath the Y axis itself? I would like to accomplish this from within the chart configuration itself if possible, rather than CSS or extraneous JS.
If anyone could also explain the logic of this setting it would be much appreciated. It strikes me as odd that it's the default setting, and from my experience with google frameworks they usually choose default values that adhere to a convention, but this seems nonsensical. I would expect the "2004" label to be left justified on the X-axis, and the intervals between the X labels to be evenly spaced with "2007" flush against the right edge of the chart.
can't explain why, but this is default behavior for a discrete axis.
if you would like to display strings on the x-axis,
but still have the behavior of a continuous axis,
you can use the ticks option to format the axis labels.
using object notation, you can provide the value (v:) of each tick,
as well as the formatted value (f:)...
{v: 0, f: '2004'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
[0, 1000, 400],
[1, 1170, 460],
[2, 660, 1120],
[3, 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: {position: 'bottom'},
hAxis: {
ticks: [
{v: 0, f: '2004'},
{v: 1, f: '2005'},
{v: 2, f: '2006'},
{v: 3, f: '2007'}
]
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
Please see the following chart:
http://jsfiddle.net/A9v4R/
I want that the yaxis labels will be where the -90 point, it's relocated because i changed the startangle.
The xaxis now is great for me but i need to change the position of the yaxis.
Please tell me how can i do that.
i tried to do:
yAxis: {
tickPositions: [-40, -35, -30, -25, -20, -15, -10, -5, 0],
labels: {
x: -13,
}
Thanks,
Tal.
I cannot see any examples in the Google Charts API that will demonstrate how I can create a a fill color in the area between two charts. In my case this fill color should fill the area that represents the spread between worst and best outcome.
This is what I want:
This is what I have
Any ideas on how this is could be done (if at all!)?
I was able to come very close to recreating your desired chart by using a stacked AreaChart and some creative thinking. Plug the following code into the Code Playground:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['a', 'b', 'c', 'd'],
['1', 100, 10, 10],
['10', 250, 150, 50],
]);
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
isStacked: true,
series: [{color: 'white', lineWidth: 0}, {color: 'purple'}, {color: 'purple', lineWidth: 0}],
legend: {position: 'none'},
});
}
The keys are to have the bottom/first series color be the same as the background of the chart and to have the last/top series not have a line width. Both of these are controlled by the series parameter. The catch is that since the series are stacked, you'll have to subtract the values of the lower series to get the right number. For example, if you want the lowest line at 250, the middle/dark purple line at 400, and the top line at 450, you'd have to use the values 250, 150, and 50.
Never seen it but you might be able to do sth using the "interval" role.