CODEWITHSUNDEEP
javascriptshieldui
Martin Nelson
Martin Nelson

Reputation: 9

Specifying Shield UI JavaScript Chart series color, based on user preferences

I have a Shield UI JavaScript Chart on a web page. My aim is to be able to refresh the chart by pressing a button, which works, and to apply some settings based on user’s choice. For that purpose I have a select menu, from which a color for the data series can be chosen:

<select id="seriescolor">
    <option value="red"> Red  </option>
    <option value="green"> Green </option>
    <option value="blue"> Blue </option>
</select>

In addition I placed the following code in my refresh function:

       seriesSettings: {
            line: {
                applyAnimation: {
                    duration: 0
                },
                pointMark: {
                    enabled: false
                },
                if (document.getElementById("seriescolor").value=='red'){
                    color: 'green',
                },                    
                if (document.getElementById("seriescolor").value=='green'){
                    color: 'green',
                },                    
                if (document.getElementById("seriescolor").value=='blue'){
                    color: 'green',
                },
            }
        },

Upvotes: 0

Views: 179

Answers (1)

Ed Jankowski
Ed Jankowski

Reputation: 449

You may not check for the select state/values in the chart creation module. Instead you need to assign the selected value. For that purpose you might want to update your select options like this:

<select id="seriescolor">
    <option value="#E01B1B"> Red  </option>
    <option value="#46E01B"> Green </option>
    <option value="#1B28E0"> Blue </option>    
</select>

In addition you may assign the color’s value by choosing one of the two options:

color: document.getElementById("seriescolor").value

or you can use an additional variable:

var SeriesColor = document.getElementById("seriescolor").value

and than assign its value to the property: 

 color: document.getElementById("seriescolor").value

Upvotes: 1

Related Questions