Not entirely sure what you are asking. But if you want that kind of movement you can either key it manually on translation just like you have done in the first image example, or you can use the graph editor. Now if you want X movement to be linear, but the Y movement to be a smooth curve you can use two bones for it since the graph editor combines X and Y. So on the first bone (which is the parent of the second one) you move on X, and on the second one which is the child, you only move on Y and then use the graph editor to make it move in a smooth curve.
I've attached an example project for you.