This might be very simple but I have been unable to find any answer.
I have this visualization:
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Week');
data.addColumn('number', 'Sales');
data.addRows([["1", 2], ["2", 1], ["3", 5], ["4", 2], ["5", 1], ["6", 0], ["7", 0], ["8", 2], ["9", 1], ["10", 0], ["11", 1], ["12", 0], ["13", 1], ["14", 0], ["15", 1], ["16", 0], ["17", 0], ["18", 3], ["19", 0], ["20", 0], ["21", 0], ["22", 0], ["23", 0], ["24", 0], ["25", 0], ["26", 0], ["27", 0], ["28", 0], ["29", 0], ["30", 0], ["31", 0], ["32", 0], ["33", 0], ["34", 0], ["35", 0], ["36", 0], ["37", 0], ["38", 0], ["39", 0], ["40", 0], ["41", 0], ["42", 0], ["43", 0], ["44", 0], ["45", 0], ["46", 0], ["47", 0], ["48", 0], ["49", 0], ["50", 0], ["51", 0], ["52", 1], ["53", 0], ["54", 0]]);
var chart = new google.visualization.ColumnChart(document.getElementById('shops_sales_pr_week'));
chart.draw(data, {width: 850, height: 300, chartArea: {left:20}, vAxis: {}, hAxis: {showTextEvery:2}});
}
</script>
For some reason the API chooses to make the Y-axis as 1.5, 3.0, 4.5, etc. Why, oh why? 1, 2, 3, 4 would be nice. I can format it using
vAxis: {format: '##'}
but that just rounds the labels - they still represent their original number.
Can someone help?
Replace your packages with:
'linechart'
will work.
It's not exact, but you can specify a maxValue for the vAxis, which will change the intervals. So, try it like this:
chart.draw(data, {vAxis: {maxValue: 8}});
You might need to mess around with the maxValue number to make it show correctly.
Good luck!
Try format: '#' instead of format: '##'
Related
I would like to achieve the following in an efficient way in numpy. Suppose I have a matrix
A = np.asarray([[1, 2], [3, 4]])
and
B = np.asarray([1, 10, 100])
I would like to multiply each element in A with the first element of B, then each element in A with the second element in B etc. At the end a matrix of shape (A.shape[0]*B.shape[0], A.shape[1])
the result should be
np.asarray([[1, 2], [3, 4], [10, 20], [30, 40], [100, 200], [300, 400]])
Out[216]:
array([[ 1, 2],
[ 3, 4],
[ 10, 20],
[ 30, 40],
[100, 200],
[300, 400]])
Reshape with numpy broadcasting:
# option 1
(A * B[:,None,None]).reshape(-1, A.shape[1])
#array([[ 1, 2],
# [ 3, 4],
# [ 10, 20],
# [ 30, 40],
# [100, 200],
# [300, 400]])
# option 2
(A.ravel() * B[:,None]).reshape(-1, A.shape[1])
#array([[ 1, 2],
# [ 3, 4],
# [ 10, 20],
# [ 30, 40],
# [100, 200],
# [300, 400]])
Or use np.einsum:
np.einsum('ij,k->kij', A, B).reshape(-1, A.shape[1])
#array([[ 1, 2],
# [ 3, 4],
# [ 10, 20],
# [ 30, 40],
# [100, 200],
# [300, 400]])
options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}},
I have this as my options for my google column chart but this displays "Division" on both my vertical and horizontal axis and removes all the labels on the hAxis. Can anyone tell me why this is happening?
is there more you can share?
seems to work fine here...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {"title":"Overall Stats","height":230,"legend":{"position":"in"},"hAxis":{"title":"Division"}}
}).draw();
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've defined a function
def pair(m,v):
ans = []
for x in m:
for sub in x[-1]:
if sub[1] == v:
ans = ans + [x[0][0], sub[0]]
print ans
Then I set pairing = pair(regs,5)
I get the desired output:
[['551c1', 5], ['2665d1', 11], ['2784a1', 5], ['3112b1', 5], ['3280i1', 7], ['3380d1',7], ['3474f1', 5], ['3774d1', 7], ['3782a1', 5], ['3879d1', 13], ['4086b1', 7], ['4556b1', 11], ['4600m1', 7], ['4617d1', 5], ['4656k1', 7], ['4979b1', 5], ['5094e1', 5], ['5982h1', 7], ['6501b1', 5], ['6786f1', 5], ['7232c1', 5], ['7566j1', 5], ['7617a1', 5], ['7742m1', 5], ['7826m1', 5], ['7974k1', 5], ['8262c1', 7], ['8528h1', 5], ['8534b1', 7], ['8710h1', 7], ['8949a1', 5], ['9048n1', 5], ['9285e1', 7], ['9520l1', 11], ['9559d1', 7], ['9622d1', 7], ['9650f1', 7], ['9865b1', 13], ['10082c1', 7], ['10549c1', 13], ['10789a1', 5], ['10926a1', 5], ['10994d1', 5], ['11482a1', 5], ['11610e1', 13], ['11840g1', 13], ['11907z1', 5], ['12114b1', 5], ['13002b1', 5], ['13188b1', 5], ['13328x1', 5], ['13502d1', 5], ['13630j1', 7], ['14123c1', 7], ['14577b1', 7], ['14706b1', 5], ['15246h1', 13], ['15575e1', 13], ['15834b1', 5], ['16224n1', 17], ['16491e1', 7], ['16577g1', 5], ['16880r1', 7], ['16936a1', 5], ['17157c1', 5], ['17507k1', 5], ['17584c1', 5], ['17898b1', 5], ['19043a1', 11], ['19431a1', 5], ['19620m1', 7]]
Why is it that when I now do len(pairing), I get the following error:
TypeError: object of type 'NoneType' has no len()
Because you are not returning anything from your function.
Try changing
print ans
to
return ans
Or, if you want to keep the print statement, put return ans below it.
I'm using scatter plot for my application, so I selected google API for scatter charts. For my application I need to connect some points with line marker. I followed this
link for test. please help me to improve.
If you need to connect points on your ScatterChart, you can do so by setting either the lineWidth option (creates lines connecting points for all data series) or the series.<series index>.lineWidth option (which creates lines connecting the points of a single series). Here are some examples:
Use the lineWidth option to connect points in all series (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
lineWidth: 1
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
Connect all the points in one data series using the series.<series index>.lineWidth option (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[1, 6, 6],
[2, 5, 9],
[3, 6, 5],
[4, 5, 4],
[7, 9, 2],
[8, 4, 6],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
If you want to connect only certain points in a data series, you must insert null values between all points that you do not want lines to connect. Here's an example connecting points (2, 5) and (3, 6) in series Y1 (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[0, 2, 5],
[null, null, null],
[1, 6, 6],
[null, null, null],
[2, 5, 9],
[3, 6, 5],
[null, null, null],
[4, 5, 4],
[null, null, null],
[7, 9, 2],
[null, null, null],
[8, 4, 6],
[null, null, null],
[9, 3, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
The important thing to note here is that points which are adjacent in the DataTable will be connected with lines. If you want to connect points which are not adjacent in the chart, you need to re-arrange the data. Here's an example that connects the points (2, 5) and (8, 4) in Y1 and (4, 4) and (8, 6) in Y2 (jsfiddle example):
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRows([
[null, null, null],
// Y1 data
// make (2, 5) and (8, 4) adjacent in the DataTable
[2, 5, null],
[8, 4, null],
// split all others with nulls
[null, null, null],
[0, 2, null],
[null, null, null],
[1, 6, null],
[null, null, null],
[3, 6, null],
[null, null, null],
[4, 5, null],
[null, null, null],
[7, 9, null],
[null, null, null],
[9, 3, null],
// Y2 data
// make (4, 4) and (8, 6) adjacent in the DataTable
[4, null, 4],
[8, null, 6],
// split all others with nulls
[null, null, null],
[0, null, 5],
[null, null, null],
[1, null, 6],
[null, null, null],
[2, null, 9],
[null, null, null],
[3, null, 5],
[null, null, null],
[7, null, 2],
[null, null, null],
[9, null, 7]
]);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
// connect the points in Y1 with a line
lineWidth: 1
},
1: {
// connect the points in Y2 with a line
lineWidth: 1
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
That should get you started on connecting points with lines in ScatterCharts.
I search for a solution, to only show every second value on the hAxis label of an Google LineChart.
The hAxis label interval is set by the hAxis.showTextEvery option as described here. This only works for discrete (non-number) horizontal axes. For example:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['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,
vAxis: {maxValue: 10},
hAxis: {showTextEvery: 2}}
);
}
If your axis is numerical, you can set this using the hAxis.minorGridlines.count option, as follows:
hAxis: {minorGridlines: {count: 1}}
This will add a single gridline (with no label) in between every two major gridlines.