Live data update line and bars chart with zoom and drag

I need a component to display live data stream in a chart. Requirements: 1. Show lines 2. Show bars at the same chart as lines 3. Two axes on left and right sides 4. Tooltips 5. Legend 6. Zoom with mouse wheel 7. Dragging graphic left and right 8. Preserve zoom and dragged position after new data points addition 9. Allow loading data for the whole day, but show only last hour. With an ability to drag to the past to see other data in this day. 10. Ability to specify offset from the right side, e.g. 5 minutes. Note that it is about data, not about padding around graphic. 11. A button to stop graph from moving when new data arrives. Horizontal axes should stay unmoved, and new data points should appear in the empty space from the point #10. When empty space would be exhausted, the horizontal axis should move 5 minutes to prepare new portion of free space for new data. I already have a prototype in google charts. it has problems with points #8 and #9. There are two ways to accomplish this project: 1. fix #8 and #9 for the current google charts prototype. 2. build it from scratch. preferably, with d3js