Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="https://stackoverflow.com/a/12061734/1566575">The above solution</a> like I said, is really cool, but is kind of a hack (getting the path of the crosshair) into the implementation details of highcharts, and may stop working in future releases, may not be totally cross browser (esp since &lt;IE8 do not support SVG, the adding path may still work as it should be handled by highchart's add path method, but getting the crosshair's path may not work, I may be wrong, am an SVG noob). So here I give you the alternate solution of <a href="http://api.highcharts.com/highstock#Axis.addPlotLine%28%29" rel="nofollow noreferrer">dynamically adding plotLines</a>. PlotLines also allow some additional features like dashStyles, label etc.</p> <p>get the axis and x value of point clicked (may not exactly overlap the crosshair)</p> <pre><code> var xValue = evt.xAxis[0].value; var xAxis = evt.xAxis[0].axis; </code></pre> <p>Or</p> <p><strong>EDIT</strong> If you want to have the plotLine at the location of the crosshair and not the click position, you can use following formula (<em>No direct API to get this, obtained from source code hence may stop working if code changes</em>)</p> <pre><code> var chart = this; var index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft; var xValue = chart.series[0].tooltipPoints[index].x; </code></pre> <p>Add plotline</p> <pre><code> xAxis.addPlotLine({ value: xValue, width: 1, color: 'red', //dashStyle: 'dash', id: myPlotLineId }); </code></pre> <p>You can cleanup existing plotline</p> <pre><code> $.each(xAxis.plotLinesAndBands,function(){ if(this.id===myPlotLineId) { this.destroy(); } }); </code></pre> <p>OR</p> <pre><code> try { xAxis.removePlotLine(myPlotLineId); } catch (err) {} </code></pre> <p>Putting the pieces together</p> <pre><code> var myPlotLineId="myPlotLine"; ... var chart=this; index = chart.inverted ? chart.plotHeight + chart.plotTop - evt.chartY : evt.chartX - chart.plotLeft; var xValue = chart.series[0].tooltipPoints[index]; // var xValue = evt.xAxis[0].value; // To use mouse position and not crosshair's position var xAxis = evt.xAxis[0].axis; $.each(xAxis.plotLinesAndBands,function(){ if(this.id===myPlotLineId) { this.destroy(); } }); xAxis.addPlotLine({ value: xValue, width: 1, color: 'red', //dashStyle: 'dash', id: myPlotLineId }); ... </code></pre> <p><a href="http://jsfiddle.net/jugal/wHnnE/" rel="nofollow noreferrer">Add plot lines at click position @ jsFiddle </a><br> <a href="http://jsfiddle.net/jugal/G7v8a/" rel="nofollow noreferrer">Persist crosshair/cursor as plot lines on click @ jsFiddle</a></p>
    singulars
    1. This table or related slice is empty.
    1. POHighCharts Keep Vertical Line on Click Event
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USJugal Thakkar
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI find that plotLines are a better approach and they can be turned on/off easily.
      singulars
      1. PO
      1. USwergeld
    2. CO@Jugal - This does seem like a much better approach, but I noticed in a few samples the plot line is a few pixels off from the hover. Can anything be done about that?
      singulars
      1. PO
      1. USDexter
    3. COLike i said in the post, it may not exactly overlap the cursor/mouse position. Reasons being the spacing between points is larger than resolution of mouse, so there may not be a corresponding X value to the place you clicked, in which case the crosshair will be placed at the nearest point. When you use the click event arg, you get the plotline exactly where you clicked without rounding to the nearest point(where the crosshair appears to be) hence the crosshair and the new line may not overlap. If you want to add a line to where the crosshair is not the mouse position, check updated answer
      singulars
      1. PO
      1. USJugal Thakkar
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload