0

The values in each bar can be seen after mouse hover

I am trying to get the text from the bar-chart in this picture. It doesn't have any element so that I cannot get the text. It only show in dom tree.

The dom element after i inspect the canvas

After inspecting the canvas i can only see canvas eleement with no other child element so that i can get the text from the graph.

Can anyone help me how can I get the values from the bar in this bar-chart ?

The link to the website i am trying is below The website where i am trying to automate canvas elements

Saroz Duwadi
  • 1
  • 3
  • the problem here is that the text is rendered (drawn) into a rastor format and displayed as a single image (svg?). Taking a screenshot that can be reviewed manually may be your only option. (from the browser side...) – pcalkins Oct 21 '19 at 19:53
  • now that I look, it's a standard bitmap (so it is rastor not vector): https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/ – pcalkins Oct 21 '19 at 20:07
  • You will need to do a capture of the values in myBarChart . However, since the tooptip is a rendered standard bitmap , you will also is to do an image comparison when you mouse over. This is not efficient. – john Oct 21 '19 at 22:12

3 Answers3

0

I think you can use the logic which is image and text inside the container class.In this way your image can appear in front of your text our wherever you want without any overflow.I guess this should work for canvas.You can check this link : https://www.w3schools.com/howto/howto_css_image_text.asp

Timuçin Çiçek
  • 1,516
  • 3
  • 14
  • 39
0

The data of the bar chart is availabe in the javascript:

<script>
  //Basic example
  var ctxB = document.getElementById("myChart").getContext('2d');
  var myBarChart = new Chart(ctxB, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '% of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    optionss: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });

See this on how to extract javascript variables: Reading JavaScript variables using Selenium WebDriver

Abhinav Anand
  • 11
  • 4
  • I read that link. It was mainly omn ruby. Can you help me how can I read the value from this javasrcipt. For exmaple: i would like to print "label" and "first data" – Saroz Duwadi Oct 23 '19 at 13:49
0

So that tooltip is a separate element AFAIK, so you need to get some attribute of the tooltip element. Take a look in dev tools

But if you want to extract the value from actual canvas and if you have this code that generate this chart than you need to evaluate a code against that element like so:

let programNames = await this.$barsSection.evaluate("programs"),
    programsData = await this.$barsSection.evaluate("data");

You may need to contact developers to find out what is the property name that you're looking for

Sergey Pleshakov
  • 7,964
  • 2
  • 17
  • 40