The Problem:
I’m looking to create a line chart in html/javascript/jquery to display data in a similar fashion to this old chart control in Citect software I have used. Basically a line chart with tooltips for current y-axis values for selected x-axis value. In the Citect software they call this vertical line with values a trend cursor.
In this image below there are 3 series and by dragging the trend cursor you can see the values for all 3 series for a given time.
My environment & intended approach:
Due to multiple series with different y-axis ranges I am planning on stacking line charts (rather than scaling), if I can get the 'trend cursor' to drag on all charts at the same time so it look/feels like one control this would be ideal.
I'm trying to use html5/jquery etc. and aiming for a responsive UI that will work for desktops/tablets and mobile devices. But am open to using an asp.net control on an aspx form if there's nothing that can be easily configured in html/javascript.
Worth noting is that I have the Infragistics Ignite UI control library, their support suggested using a crosshair which doesn't suit my needs. I think it is possible to use the data chart control but being new to web programming and these products it's hard to find the information I need in their help to get started.
Key features required:
- Vertical line, dragged along x-axis
- Display values where vertical intersects series
- Can remove mouse and line/labels stay put
- Multiple stacked series, line state consistent if stacked charts used.
