CODEWITHSUNDEEP
javascriptjqueryruby-on-railscharts
pyfl88
pyfl88

Reputation: 1710

How to use toggle for different charts in rails?

I am trying to create a chart to show in days, weeks and months. I have made a chart for days and wondering how to use the toggle button so that when I click on the weeks, I can put another chart for weeks. 

<div class="actions">
    <div class="btn-group btn-group-devided" data-toggle="buttons">
        <label class="btn btn-transparent grey-salsa btn-circle btn-sm active">
        <input type="radio" name="options" class="toggle" id="option1">Today</label>
        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
        <input type="radio" name="options" class="toggle" id="option2">Week</label>
        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
        <input type="radio" name="options" class="toggle" id="option2">Month</label>
    </div>
</div>

And here is my daily chart for example:

<%= content_tag :div, "", id: "sales_statistics", data: {orders: balance_sales }, class: "portlet-body-morris-fit morris-chart", style: "height: 272px" %>

Upvotes: 0

Views: 168

Answers (1)

Kristj&#225;n
Kristj&#225;n

Reputation: 18803

One simple way is to render all three charts, hide two of them, and set up click handlers on the radio buttons to toggle which is visible.

Your radio button setup is already pretty good. Here's a minimal version, just removing all the classes you're using so they don't distract us:

<div id="actions">
    <div>
        <label><input type="radio" name="chart" value="today" checked="checked"/>Today</label>
        <label><input type="radio" name="chart" value="week"  />Week</label>
        <label><input type="radio" name="chart" value="month" />Month</label>
    </div>
</div>

The important part is each value, which will correspond with the chart we want to display:

<div id="charts">
    <div id="today" class="chart">Today Chart</div>
    <div id="week"  class="chart hidden">Week Chart</div>
    <div id="month" class="chart hidden">Month Chart</div>
</div>

As you can see, I gave each chart an id matching a radio button value. By default, our Today radio button is checked, so the Week and Month charts are hidden with simple CSS.

.hidden {
    display: none;
}

Finally, we attach click handlers to all of the radio buttons:

$(function() {
    $('#actions input').click(revealChart);
});

When a button is clicked, we'll figure out which it is, hide all the charts, and then display the chart corresponding with the clicked button.

function revealChart(event) {
    var chart = $(event.target).val(); // Name of chart to display
    $('#charts .chart').hide(); // Hide all charts
    $('#' + chart).show();  // Display chart with ID matching name
}

And here it is, all together so you can run it:

function revealChart(event) {
    var chart = $(event.target).val(); // Name of chart to display
    $('#charts .chart').hide(); // Hide all charts
    $('#' + chart).show();  // Display chart with ID matching name
}

$(function() {
    $('#actions input').click(revealChart);
});
.hidden {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="actions">
    <div>
        <label><input type="radio" name="chart" value="today" checked="checked"/>Today</label>
        <label><input type="radio" name="chart" value="week"  />Week</label>
        <label><input type="radio" name="chart" value="month" />Month</label>
    </div>
</div>

<hr />
    
<div id="charts">
    <div id="today" class="chart">Today Chart</div>
    <div id="week"  class="chart hidden">Week Chart</div>
    <div id="month" class="chart hidden">Month Chart</div>
</div>

Upvotes: 1

Related Questions