How do I get the Y value of a Line chart using crosshairs?


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Ian on 23rd January 2018
Hi!

So, I understand that there is no x-axis in line-charts, but that it is possible to get the y-value.

I have working crosshairs, and a .on-function for getting the dataset and point. Is there a way to get the y-value of a specific point using crosshairs?

Here's the relevant script (note that I'm using python tornado, so the dictionary prints in data, keys and labels is replaced with correctly formatted HTML and JS.


  <script>
     window.onload = function ()
     {
     var line = new RGraph.Line({
         id: 'cvs',
         data: [
                 {% for ta,clean_dict in total_dict.items() %}
                   [
                   {% for keys,values in clean_dict.items() %}
                     {% for each in values %}
                       {{ each }}
                     {% end %}
                   {% end %}
                   ],
                 {% end %}
               ],
          options: {
                 labels: [
                           {% for time in time_total %}
                               {% raw time %}
                           {% end %}
                           ],
                 gutterLeft: 50,
                 gutterRight: 50,
                 gutterBottom: 50,
                 key: [
                       {% for ta in total_dict %}
                         {% raw ta %}
                       {% end %}
                       ],
                 keyPosition: 'gutter',
                 keyTextBold: true,
                 keyTextSize: 18,
                 textColor: 'white',
                 backgroundColor: 'grey',
                 yaxisColor: 'white',
                 xaxisColor: 'white',
                 hmargin: 5,
                 linewidth: 3,
                 shadow: true,
                 crosshairs: true,
                 crosshairsSnap: true,
                 teextAngle: 45,
                 textAccessible: true
         }
       }).on('crosshairs', function (obj)
       {
         document.getElementById("dataset").value = obj.canvas.__crosshairs_snap_dataset__;
         document.getElementById("point").value = obj.canvas.__crosshairs_snap_point__;
         var yValue = line.getValue(e);

       }).draw();
   };
   </script>

<p style="color: white;">

Time:
<br>
<input id="dataset" type="text">
<br>
<br>

Point:
<br>
<input id="point" type="text">
<br>

Hits:
<br>
<input id="yValue" type="text">
</p>


I understand that there is a myLine.getValue-method, but I can't seem to implement it correctly. Where does it generate the value for e?

As I stated in a previous post, I'm fairly new to JS. So I'm having trouble wrapping my head around some of the logic.


Thanks loads in advance!
- Ian
Posted by Richard on 23rd January 2018
Hi there,

You can get the value by using the getValue() function like this:

myLineChartObject.canvas.onclick = function (e)
{
     var value = myLineChartObject.getValue(e);

     alert(value);
}



And for the Scatter it would be this:

scatter.canvas.onclick = function (e)
{
     var value = scatter.getYValue(e);

     alert(value);
}


And the e variable is the event object that's generated by the browser and passed to the function automatically. eg

myDOMObject.onclick = function (e)
{
     alert('Clicked!');
};

Richard
Posted by Ian on 23rd January 2018
Thank you so much! That worked perfectly.

- Ian

Add a reply




« Back to message list