jQuery addClass example

Change class name on click in jQuery

by Black Label

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.highcharts.com/5.0.7/highcharts.js"></script>
<script src="https://code.highcharts.com/5.0.7/highcharts-more.js"></script>

<div class="container-fluid">
    <div class="col-md-12 col-lg-9 col-xl-7">
        <div id="chartdiv">
            <div class="container-ch" style="margin:0 auto; width:100%;min-width:700px;height:580px;">
                <div class="starter-template ">
                    <div id="container-ch">
                        <div class="clearfix">
                            <div id="chart"></div>
                            <div id="chartpanel">
                                <div class="lbl" style="display:none;">Provinces</div>
                                <ul id="pointlist" style="display:none;"></ul>
                                <br />
                                <label class="lbl" for="markersize">Size</label>
                                <select id="markersize" class="form-control">
                                    <option value="1">Population</option>
                                    <option value="2">Same size</option>
                                </select>
                            </div>
                        </div>

                        <div id="controls" class="clearfix">
                            <button id="play" class="btn btn-primary">Play</button>
                            <div id="slider"></div>
                        </div>
                    </div>

                    <div class="clear"> </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#banner-message {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
}

button {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
}

#banner-message.alt {
    background: #0084ff;
    color: #fff;
    margin-top: 40px;
    width: 200px;
}

#banner-message.alt button {
    background: #fff;
    color: #000;
}

JavaScript

var dataset = {
    "2000": [{
            "country": "Alberta",
            "year": 2000,
            "GDP Per Capita": 67653,
            "Composite Index": 0.617848826,
            "CompIndexColor": 60,
            "color": 2,
            "Population": 3004198,
            "Housing": 0.66287927,
            "Income": 0.895971361,
            "Jobs": 0.693667438,
            "Community": 0.676056338,
            "Education": 0.655713986,
            "Environment": 0.736842105,
            "Civic engagement": 0.198717949,
            "Health": 0.88,
            "Life Satisfaction": 0.55,
            "Safety": 0.529724291,
            "WorkLife Balance": 0.31676435,
            "Housing expenditure": 0.702343493,
            "Rooms per person": 0.623415046,
            "Household disposable income": 1,
            "Household net worth": 0.791942722,
            "Employment rate": 1,
            "Job security": 0.990724874,
            "Longterm unemployment rate": 0,
            "Personal earnings": 0.783944879,
            "Quality of support network": 0.676056338,
            "Educational attainment": 0.83974359,
            "Student skills": 1,
            "years in education": 0.127398368,
            "Air pollution": 1,
            "Water quality": 0.473684211,
            "Voter turnout": 0.198717949,
            "Life expectancy": 0.76,
            "Self reported health": 1,
            "Life satisfaction": 0.55,
            "Assault rate": 0.617271711,
            "Homicide rate": 0.442176871,
            "Employees working very long hours": 0.31389497,
            "Time devoted to leisure and personal care": 0.319633731
        },
        {
            "country": "British Columbia",
            "year": 2000,
            "GDP Per Capita": 38996,
            "Composite Index": 0.588495783,
            "CompIndexColor": 60,
            "color": 3,
            "Population": 4039230,
            "Housing": 0.203296703,
            "Income": 0.811719758,
     ...