CODEWITHSUNDEEP
jquerychart.jsattr
cheny
cheny

Reputation: 2725

How to get an attribute of element by jquery

I have a Html pie chart like this:

    //In Html:
    <canvas id="pieChart" data="12,12,12,4"></canvas>

    //In js: 
    //pie chart
    var ctx = document.getElementById("pieChart");
    ctx.height = 300;
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: [{
                //data: $(this).attr("data").split(","), //This is what I want to do.
                data: [45, 25, 20, 10], //This is the original code.
                backgroundColor: [
                    "rgba(0, 123, 255,0.9)",
                    "rgba(0, 123, 255,0.7)",
                    "rgba(0, 123, 255,0.5)",
                    "rgba(0,0,0,0.07)"
                ],
                hoverBackgroundColor: [
                    "rgba(0, 123, 255,0.9)",
                    "rgba(0, 123, 255,0.7)",
                    "rgba(0, 123, 255,0.5)",
                "rgba(0,0,0,0.07)"
                ]

            }],
            labels: [
                "green",
                "green",
                "green"
            ]
        },
        options: {
            responsive: true
        }
    });

the code $(this).attr("data").split(",") raise an error says :

    Cannot read property 'split' of undefined

So, how can I get the value of "data"? Thanks.

The answer is ctx.getAttribute('data'). Thanks for your guys :)

Upvotes: 1

Views: 228

Answers (2)

Takit Isy
Takit Isy

Reputation: 10081

You shouldn't use this, it returns an error because it refers to the Chart, not the HTML node.

As you already have the ctx variable targeting the node, I suggest you to use it. Then, there are 2 possibilities:

  • Using .getAttribute(…) on your ctx element in native JavaScript (you don't need jQuery),
  • Or using $(ctx).attr(…) if you prefer using jQuery.

Snippet

//pie chart
var ctx = document.getElementById("pieChart");
ctx.height = 300;
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: ctx.getAttribute("data").split(","), // Here is how you can do it without jQuery !…
      // data: $(ctx).attr("data").split(","),   // … And with jQuery !
      backgroundColor: [
        "rgba(0, 123, 255,0.9)",
        "rgba(0, 123, 255,0.7)",
        "rgba(0, 123, 255,0.5)",
        "rgba(0,0,0,0.07)"
      ],
      hoverBackgroundColor: [
        "rgba(0, 123, 255,0.9)",
        "rgba(0, 123, 255,0.7)",
        "rgba(0, 123, 255,0.5)",
        "rgba(0,0,0,0.07)"
      ]

    }],
    labels: [
      "green",
      "green",
      "green"
    ]
  },
  options: {
    responsive: true
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="pieChart" data="12,12,12,4"></canvas>

Upvotes: 2

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

First of all you should use the data-* syntax.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Secound:

I would say ctx.getAttribute('data') would be your fix?

But please change the data attribute to something else. (data-set....) :)

Upvotes: 1

Related Questions