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>
Related
I've created a Google Charts Scatter plot, but even though I don't specify any lines, the chart draws a line between my points (seen in the picture below as a faint blue line).
I've tried setting trendline to 0, but it doesn't do anything. How can I make this line go away?
function drawScatterPlot (table_arguments={}) {
var data = new google.visualization.DataTable();
data.addColumn('number', table_arguments["xtitle"]);
data.addColumn('number', table_arguments["ytitle"]); // Required to be a number
data.addRows(table_arguments["data"]);
var options = {
chart: {
title: table_arguments["title"],
subtitle: table_arguments["subtitle"]
},
hAxis: {title: table_arguments["xtitle"]},
vAxis: {title: table_arguments["ytitle"]},
legend: {position: 'none'},
trendlines: { 0: { opacity: 0 }}
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatterchart_material'));
// DRAW CHART
chart.draw(data, options);
}
set the line width to zero using the following config option...
lineWidth: 0
lineWidth - Data line width in pixels. Use zero to hide all lines and show only the points.
I have some info which is in this format (speed, frequency, date). What happens is that I need to plot this chart with speed x frequency, but I want to allow the users to use the navigation filtering by the date, which is not appearing on the chart.
Also, I have some info which is not built dynamically, which is the limits of speed x frequency. This info will be fixed as reference points on the plot. So, when I filter the plot info (not the limits), it must always display these limit plots.
You can have an idea by this chart, the area plots show the limits for the points (speed, frequency). Then, I would add points of speed x frequency (x date), and filter then by date.
Can you guys give me some advice on this?
here is a JSFIDDLE
JSFIDDLE
data: [
[0, 20, here is a date], [10, 20,here is a date],
[50, 39.9994, here is a date], [100,49.7494, here is a date]
],
Guys, notice that every element of the array in the series has 3 elements [a, b, c], suppose the third one (c) is a DATE and not a random number as it is right now. I want to be able to use the commented the navigator code to filter this series by this C element, which doesn't in fact appear on the chart you see, it is a hidden element, just to filter the data.
There will be a little tricky, if you want to have a navigator in the same chart. Navigator works only with datetime data and it must be connected with the axis from the main chart.
So, you have data in that format:
var points = [
[5, 9, Date.UTC(2016, 1, 0)],
[65, 6, Date.UTC(2016, 1, 1)],
...
You need two x axes - one which represents the data and the other which is connected to the navigator. The second axis must be visible to work with the navigator and must be connected with the datetime data.
So now, except two x axes, you need two series - one with the actual data, and the other consists of [date, y] values from the first series. The additional data will be visible in the navigator - note, that in the navigator you cannot use scatter series - so it will be converted to line series - to happen it without errors, your data should be sorted by date.
series: [{
id: 'main-series',
data: points.map(function(point) {
return [point[0], point[1], point[2], point[1]]
}),
showInNavigator: false,
xAxis: 1,
keys: ['x', 'y', 'date', 'holdY'] //holdY is for easier hiding points
}, {
xAxis: 0,
data: points.map(function(point) {
return [point[2], point[1]];
}),
showInNavigator: true,
enableMouseTracking: false,
color: 'transparent',
showInLegend: false
}],
xAxis: [{
minRange: 1000 * 3600 * 24,
type: 'datetime',
tickLength: 0,
tickLength: 0,
labels: {
enabled: false
},
}, {
type: 'linear'
}],
The last thing you need a callback which will hide/show points after the extremes in the navigator are set. Hiding/showing depends on the third point's property which is date. There is no directly API to hide/show specific points (except pie), but it can be achieved by setting point's value to null (that is why I preserved the real y in holdY).
events: {
afterSetExtremes: function(e) {
var points = this.chart.get('main-series').points;
points.forEach(function(point) {
point.update({
y: e.min <= point.date && point.date <= e.max ? point.holdY : null
}, false, false);
});
this.chart.redraw();
}
}
example: https://jsfiddle.net/3wuwdonn/1/
I would consider using a navigator as a separate chart, then you wouldn't need the second x axis and series in the main chart and you wouldn't need to make them look invisible.
example with a navigator only chart here: http://jsfiddle.net/f7Y9p/
I'm trying to find a way to change the position of the labels on my vertical axis. By default, a line chart renders the labels to the left of the chart, I'd like them to display on the right instead. It seems as if this isn't possible but I'm not too aware of ways to extend the line graph implementation to make it behave like I want it to.
you can use the series configuration option to change the targetAxisIndex
the documentation says...
targetAxisIndex: Which axis to assign this series to, where 0 is the default axis, and 1 is the opposite axis. Default value is 0; set to 1 to define a chart where different series are rendered against different axes. At least one series much be allocated to the default axis. You can define a different scale for different axes.
but seems to work without assigning anything to the default axis...
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Amount');
data.addRows([
['Label 1', 10],
['Label 2', 20],
['Label 3', 30],
['Label 4', 40]
]);
new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
series: {
0: {
targetAxisIndex: 1
}
}
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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.
The Flot chart api supports dual v-axis scales, as shown by this example.
I'm using Google Charts - is this possible also with Google? I've had a look through the examples and docs, but can't find any examples / references to indicate it does support dual axis charts.
It took me a while, to figure this out, but Google Charts does support dual Y-axis (v-axis). I want to use the Javascript API and not the HTML interface.
This example can be tested here:
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
Replace all of that code with this code showing how to have two different Y-axis scales:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", 1, 1, 0.5]);
data.addRow(["B", 2, 0.5, 1]);
data.addRow(["C", 4, 1, 0.5]);
data.addRow(["D", 8, 0.5, 1]);
data.addRow(["E", 7, 1, 0.5]);
data.addRow(["F", 7, 0.5, 1]);
data.addRow(["G", 8, 1, 0.5]);
data.addRow(["H", 4, 0.5, 1]);
data.addRow(["I", 2, 1, 0.5]);
data.addRow(["J", 3.5, 0.5, 1]);
data.addRow(["K", 3, 1, 0.5]);
data.addRow(["L", 3.5, 0.5, 1]);
data.addRow(["M", 1, 1, 0.5]);
data.addRow(["N", 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function", width: 500, height: 400,
vAxes: {0: {logScale: false},
1: {logScale: false, maxValue: 2}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1}}}
);
}
By adding maxValue: 2 to the code, and setting series 1 & 2 to that axis, they work properly on a second axis.
Non-JavaScript solution
Assuming that you are looking for a series that shares that same X-axis (horizontal) but has different values (and scales) for the Y-axis (vertical) then you can do this without recourse to JavaScript as follows:
Select Insert | Chart from the menu.
Double-click the chart, and in the chart editor select Chart Type | Line chart.
Click the grid icon in the "Data range" box to get the data range dialog.
Click the worksheet containing the data you're interested in for the Y-axis lines and highlight from the top left to the bottom right so you cover all the Y-axis lines. You can tidy up the columns later.
Click OK and you'll see a collection of series has been extracted. Use the "dot menu" for each series to remove those you're not interested in.
Click the grid icon in the "X-axis" box to the get the data range dialog once again.
Click the worksheet containing the data you're interested in for the X-axis line and highlight from the top to the bottom.
Click OK and you'll see the X-axis has been filled in and both Y-axis lines are sharing the same left axis label.
Click on the line you want to use the right axis label for and use the "Axis" box in the chart editor dialog to select "Right axis".
You can now edit the various other properties of the chart to get it to look the way you want in terms of presentation.
I did it.
Click on the data series
A small box will appear with 2 small squares with only two bold sides each
Click on the second one
Might be done then.