0

I use Microsoft chart and I have below line of code to get chart.

 <img src="@Url.Action("GetChart")" alt="Bar Chart using MVC" class="img-responsive" />

I have a radio button list and upon changing the selection, i need to show a different chart in the same place.

<form method="post" id="frmFormType">
        @Html.Label("Select Chart Type")
        @Html.RadioButton("rbChartType", "1", isChecked: true) @Html.Label("First Option")
        @Html.RadioButton("rbChartType", "2", isChecked: false) @Html.Label("Second option")
    </form>

I'm not sure if I can use jQuery change function on this "rbChartType" or use something take advantage of Form. I don't really need to re-post the page but only to change graph. I am not sure how to refetch new chart when selection changed using jQuery. Can anyone please throw some light on this? Thanks

techspider
  • 3,370
  • 13
  • 37
  • 61

2 Answers2

0

Have both the images:

Make them this way:

$(function () {
  $("input").click(function () {
    $(".graph").addClass("hidden");
    $("#" + $(this).attr("value")).removeClass("hidden");
  });
});
img {display: block;}
.hidden {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label><input type="radio" name="graph" value="graph-1" /> Graph 1</label>
<label><input type="radio" name="graph" value="graph-2" /> Graph 2</label>
<img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=Graph%201&w=200&h=200" class="graph hidden" id="graph-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=50&txt=Graph%202&w=200&h=200" class="graph hidden" id="graph-2" />
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • this solution requires all graphs to be loaded at the time of page load, which is not an elegant solution. Page size increases a lot! – techspider Sep 03 '15 at 19:04
0

you can try it!

$(function(){
   $(":radio").click(function() { 
       //do something 
    }); 
})

if above soluation did not work,please use the debug of browser to look for the correct documents. in this way ,you can operate documents with jquery.

First,you have to get the srcs of each RadioButton ,if you want to change the img of src by click radio. $(function(){ $("input:radio").click(function(){ if($(this).is("#1")){$(".img").css('background',src1);}else{$(".img").css('background',src2);}})

shijiuchexiang
  • 1
  • 2