i want to use this script:

You can set each piece like this:

  $("#pieChart").drawPieChart([
    { title: "Tokyo",         value : 180,  color: "#02B3E7" },
    { title: "San Francisco", value:  60,   color: "#CFD3D6" },
    { title: "London",        value : 50,   color: "#736D79" },
    { title: "New York",      value:  30,   color: "#776068" },
    { title: "Sydney",        value : 20,   color: "#EB0D42" },
    { title: "Berlin",        value : 20,   color: "#FFEC62" },
    { title: "Osaka",         value : 7,    color: "#04374E" }
  ]);

I want to set the settings/pieces dynamically. This is what i tried:

$('.pieChart').each(function(index) {

    var queryArr = [];
    $('.pieChartPieces').each(function(index) {

        var _pieceTitle = $(this).data('title');
        var _pieceValue = $(this).data('value');
        var _pieceColor = $(this).data('color');

        var pieces = {                              
           "title" :_pieceTitle,
           "value" :_pieceValue,
           "color" :_pieceColor
        };
        queryStr = { "pieces" : pieces };
        queryArr.push(queryStr);

    });

    $(this).drawPieChart(queryArr);

});

    <div class="pieChart chart">
        <div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"></div>
        <div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"></div>
        <div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"></div>
        <div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"></div>
        <div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"></div>
        <div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"></div>
        <div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"></div>
    </div>

But its not working. I guess its because i create an object but the function drawPieChart actually want anything else?

i want to use this script: http://codepen.io/githiro/pen/xABCi

You can set each piece like this:

  $("#pieChart").drawPieChart([
    { title: "Tokyo",         value : 180,  color: "#02B3E7" },
    { title: "San Francisco", value:  60,   color: "#CFD3D6" },
    { title: "London",        value : 50,   color: "#736D79" },
    { title: "New York",      value:  30,   color: "#776068" },
    { title: "Sydney",        value : 20,   color: "#EB0D42" },
    { title: "Berlin",        value : 20,   color: "#FFEC62" },
    { title: "Osaka",         value : 7,    color: "#04374E" }
  ]);

I want to set the settings/pieces dynamically. This is what i tried:

$('.pieChart').each(function(index) {

    var queryArr = [];
    $('.pieChartPieces').each(function(index) {

        var _pieceTitle = $(this).data('title');
        var _pieceValue = $(this).data('value');
        var _pieceColor = $(this).data('color');

        var pieces = {                              
           "title" :_pieceTitle,
           "value" :_pieceValue,
           "color" :_pieceColor
        };
        queryStr = { "pieces" : pieces };
        queryArr.push(queryStr);

    });

    $(this).drawPieChart(queryArr);

});

    <div class="pieChart chart">
        <div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"></div>
        <div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"></div>
        <div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"></div>
        <div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"></div>
        <div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"></div>
        <div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"></div>
        <div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"></div>
    </div>

But its not working. I guess its because i create an object but the function drawPieChart actually want anything else?

• javascript
• jquery
• arrays

Share Follow asked Dec 8, 2015 at 9:36 egoliveegolive 39766 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

try replacing this part

 var pieces = {                              
           "title" :_pieceTitle,
           "value" :_pieceValue,
           "color" :_pieceColor
        };
        queryStr = { "pieces" : pieces };
        queryArr.push(queryStr);

by

 var pieces = {                              
       "title" :_pieceTitle,
       "value" :_pieceValue,
       "color" :_pieceColor
    };
    queryArr.push( pieces );

You can use dataset in bination with .map() method in this case, it will let you create an array with objects of every data-* attribute:

var arr = $('.pieChartPieces').map(function(){
  return {"pieces":this.dataset};
}).get(); // returns array

$('pre').html("piechartData:::"+JSON.stringify(arr));

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pieChart chart">
  <div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"></div>
  <div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"></div>
  <div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"></div>
  <div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"></div>
  <div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"></div>
  <div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"></div>
  <div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"></div>
</div>
<pre></pre>