Search code examples
javascriptjqueryangularjsradar-chart

How to bind <span> values to the radar chart field names in AngularJS or Jquery

I have below code which has the list of spans that would be generated based on input

<div id="tags" style="border:none">
<span class="tag" id="4"></span>
<input type="text" id="inptags" value="" placeholder="Add max of 6 values  (enter,)" />
</div>

For example, span tags are :: 

Movies, Housing, Bank, Holiday, Restaurant, Travel

For each of above name, my users would give some number (within 1-20)

Am trying to bind these names to my d3 radar chart input name

Radar Chart:

An empty radar chart is populated by below object

dataset_v = {
            d0: { id: 0, name: '', value: 3 },
            d1: { id: 1, name: '', value: 3 },
            d2: { id: 2, name: '', value: 3 },
            d3: { id: 3, name: '', value: 3 },
            d4: { id: 4, name: '', value: 3 },
            d5: { id: 5, name: '', value: 3 }
        };

Code to draw the chart :

 <radial-plot dsn="dataset_v">

This dataset_v variable name field needs to be binded for the input span values.

Lets say, if I enter only one input span -> my chart should be shown with only one field name and value can be any default till user changes it If I enter two input span values -> chart should show those two fields names and with default values ....

These default values in radar chart can later be adjusted by the users as per their requirement.

How can I bind my input span values with the names of my dataset_v variable?

I did some work already and achieved some progress, but am not convinced.

Manually, I created using javascript by below method which works, but as you see it is not efficient as manually I have to put condition for each tag. Example: when tags are 3 -> set dataset_v for 3 elements, when 4 again set, when 5 again set,... :

    $(function () {
        $('#tags input').on('focusout', function () {
            var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, '');
            if (txt) {
                $(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
            }
            this.value = "";
        }).on('keyup', function (e) {
            // if: comma,enter (delimit more keyCodes with | pipe)
            if (/(188|13)/.test(e.which)) $(this).focusout();
            if ($('#tags span').length == 3) {
                var div = document.getElementById("tags");
                var spans = div.getElementsByTagName("span");
      dataset_v = {
            d0: { id: 0, name: '', value: 3 },
            d1: { id: 1, name: '', value: 3 },
            d2: { id: 2, name: '', value: 3 }
           };
            }
         if ($('#tags span').length == 4) {
                var div = document.getElementById("tags");
                var spans = div.getElementsByTagName("span");
        dataset_v = {
            d0: { id: 0, name: '', value: 3 },
            d1: { id: 1, name: '', value: 3 },
            d2: { id: 2, name: '', value: 3 },
            d2: { id: 3, name: '', value: 3 }
           };
            }
            if ($('#tags span').length == 8) {
                document.getElementById('inptags').style.display = 'none';
            }
        });
        $('#tags').on('click', '.tag', function () {
            $(this).remove();
            document.getElementById('inptags').style.display = 'block';
        });
    });

Is there any way to dynamically bind my span input values with the names of my d3 radar chart variable - using normal jquery or Angular JS / Javascript ?

Screenshots

Input Spans:

enter image description here

For below variable dataset_v

dataset_v = {
        d0: { id: 0, name: 'Housing', value: 12 },
        d1: { id: 1, name: 'Movies', value: 5 },
        d2: { id: 2, name: 'Bank', value: 8 },
        d3: { id: 3, name: 'Holiday', value: 8 },
        d4: { id: 4, name: 'Restaurant', value: 6 },
        d5: { id: 5, name: 'Travel', value: 4 }
    };

Radar chart looks like this :

enter image description here

Solution

  • I have created a test case for this issue. You can do something like this: 

    var div = $("#tags");
var spans = div.find("span");
var dataset_v = {}; // declare a blank object

spans.each(function(i, elem) { // loop over each spans
  dataset_v["d" + i] = { // add the key for each object results in "d0, d1..n"
    id: i, // gives the id as "0,1,2.....n"
    name: $(elem).text(), // push the text of the span in the loop
    value: 3 // you should add this value as per your need.
  }
});
// d0: { id: 0, name: '', value: 3 },

$('pre').append(JSON.stringify(dataset_v));
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tags'>
  <span>test1</span><span>test2</span><span>test3</span><span>test4</span><span>test5</span><span>test6</span>
</div>
<p><pre></pre>
</p>