draw an ellipse/oval on a chart - Javascript highcharts

Javascript examples for highcharts:Custom Draw

  1. HOME
  2. Javascript
  3. highcharts
  4. Custom Draw

Description

draw an ellipse/oval on a chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Oil well deliverability (IPR/VLP)</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from   w  w w  . j a  v  a2  s  . c  om
   height: 500px;
   width: 500px;
   margin: 0 auto
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
$(function() {
    var drawEllipse = function(chart, x, y, xr, yr) {
        // get pixel coordinates of rect
        var x1 = chart.xAxis[0].toPixels(x-xr)
        var x2 = chart.xAxis[0].toPixels(x+xr)
        var y1 = chart.yAxis[0].toPixels(y-yr)
        var y2 = chart.yAxis[0].toPixels(y+yr)
        // remove previous ellipse
        var rectClass = 'operating-point-ellipse'
        $('.' + rectClass).remove()
        // draw ellipse using rect()
        chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
            .attr({
                'stroke-width': 1,
                'stroke': 'green',
                'fill': 'green',
                'fill-opacity': 0.2,
                'zIndex': 0
            })
            .addClass(rectClass)
            .add();
    };
    $('#container').highcharts({
        title: {
            text: 'Oil well deliverability (IPR/VLP)'
        },
        chart: {
            zoomType: 'x',
            events: {
                redraw: function() {
                    drawEllipse(this, 22.42, 23.35, 6, 3);
                },
                load: function() {
                    drawEllipse(this, 22.42, 23.35, 6, 3);
                }
            }
        },
        yAxis: {
            title: {
                text: 'Pressure (MPa)'
            },
            max: 50,
        },
        xAxis: {
            title: {
                text: 'Flow Rate (cu m)'
            },
            max: 50,
        },
        series: [
            // first series
            {
                name: 'IPR',
                data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]]
            },
            // second series
            {
                name: 'VLP',
                data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]]
            },
            // intersection
            {
                name: 'Operating point',
                data: [
                    [22.42, 23.35]
                ]
            }
        ],
    });
});

      </script>  
   </body>
</html>

Related Tutorials