JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<select id="selector">
<option value="None">Default</option>
</select>
</div>
<div id="chartdiv" style="width: 100%; height: 600px;"></div>
JavaScript
// note, each data item has "bullet" field.
var chartData = [{
"name": "John",
"points": 35654,
"color": "#7F8DA9",
"bullet": "0.gif"
}, {
"name": "John",
"points": 35654,
"color": "#7F8DA9",
"bullet": "0.gif"
},{
"name": "John",
"points": 35654,
"color": "#7F8DA9",
"bullet": "0.gif"
},{
"name": "Damon",
"points": 65456,
"color": "#FEC514",
"bullet": "1.gif"
}, {
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"bullet": "2.gif"
},{
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"bullet": "2.gif"
},{
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"bullet": "2.gif"
},{
"name": "Patrick",
"points": 45724,
"color": "#DB4C3C",
"bullet": "2.gif"
}, {
"name": "Mark",
"points": 13654,
"color": "#DAF0FD",
"bullet": "3.gif"
}];
var select = document.getElementById("selector");
var lookup = {};
var uniqNames = _.unique(_.pluck(chartData, 'name'));
var len = uniqNames.length;
//alert(items)
for (var i = 0; i < len; i++) {
var name = uniqNames[i];
var option = document.createElement("option");
option.value = name;
option.textContent = name;
select.appendChild(option);
};
select.addEventListener('change', function () {
var selValue = select.options[select.selectedIndex].value;
if (selValue === 'None') {
return;
}
var selectedOptions = _.where(chartData, {name:selValue})
alert(JSON.stringify(selectedOptions))
})