how to use button in place of checkbox

Question

I am novice to Mathematica and want to ask how can I use Button in place of Checkboxes. I have used 4 Checkboxes, which does work accordingly when pressed. But I want there should be a button which when pressed shows actual plot and again pressed, shows mean plot.

With[{ae = {.65, .47, .54, .62, 1.14},
me = {.607, .434, .439, .505, .784},
as = {5.749, 4.359, 4.37, 4.837, 7.115},
ms = {5.466, 4.522, 4.403, 4.664, 6.423}}, 
Row[{Column[{Spacer[0] Text[Style["Earning per share-$", Bold, 18]], 
     Spacer[20], 
     Row[{Spacer[0] Text[Style["Click on/off ", Bold, 14]], 
       Labeled[Checkbox[Dynamic[q1]], Mean], Spacer[19], 
       Labeled[Checkbox[Dynamic[q2]], Actual], Spacer[19]}], 
     Column[{Dynamic@
        ListPlot[
         Accumulate[{ConstantArray[0, Length[ae]], If[q1, ae, 0], 
           If[q2, me, 0]}], ImageSize -> {270, 450}, 
         GridLines -> {None, Automatic}, 
         PlotMarkers -> {Automatic, 6}]}]}], Spacer[10], 
   Column[{Spacer[0] Text[Style["Total sales-$ billion", Bold, 18]], 
 Spacer[20], 
 Row[{Spacer[0] Text[Style["Click on/off ", Bold, 14]], 
   Labeled[Checkbox[Dynamic[q3]], Mean], Spacer[19], 
   Labeled[Checkbox[Dynamic[q4]], Actual], Spacer[19]}], 
 Column[{Dynamic@
    ListPlot[
     Accumulate[{ConstantArray[0, Length[as]], If[q3, as, 0], 
       If[q4, ms, 0]}], GridLines -> {None, Automatic}, 
     PlotMarkers -> {Automatic, 6}, 
     ImageSize -> {270, 450}]}]}]}]]

I have three questions related to this:

1. how to use Button in place of Checkboxes here?
2. I am not able to resize the image by ImageSize. i.e. width=270 and height=450.
3. When I am deploying it in CDF, the Text are coming in quotes. How to removes this quotes.

For more clarification,

http://graphics.thomsonreuters.com/12/01/US_APPLEBREAK0112_VT.html

Please help me.

Answer 1

Third try. Please confirm if this is correct behavior, and I will refine the code:

With[{ae = {.65, .47, .54, .62, 1.14}, 
  me = {.607, .434, .439, .505, .784}, 
  as = {5.749, 4.359, 4.37, 4.837, 7.115}, 
  ms = {5.466, 4.522, 4.403, 4.664, 6.423}}, 
 Row[{Column[{Spacer[0] Text[Style["Earning per share-$", Bold, 18]], 
     Spacer[20], 
     Row[{Spacer[0] Text[Style["Click on/off ", Bold, 14]], q1 = True;
        Labeled[
        Button["     ", q1 = ! q1, Background -> Orange, 
         Appearance -> "Frameless"], "Mean"], Spacer[19], 
       Labeled[Button["     ", q2 = ! q2, Background -> Lighter@Blue, 
         Appearance -> "Frameless"], "Actual"], Spacer[19]}], 
     Column[{Dynamic@
        ListPlot[
         Accumulate[{ConstantArray[0, Length[ae]], If[q1, ae, 0], 
           If[q2, me, 0]}], ImageSize -> 300, 
         GridLines -> {None, Automatic}, 
         PlotMarkers -> {Automatic, 6}]}]}], Spacer[10]}]]

Answer 2

I think what is needed is TogglerBar which provides set of independent buttons which add their values as elements to a list.

With[{
  ae = {.65, .47, .54, .62, 1.14},
  me = {.607, .434, .439, .505, .784},
  as = {5.749, 4.359, 4.37, 4.837, 7.115},
  ms = {5.466, 4.522, 4.403, 4.664, 6.423}}, 
 Panel@Row[{Column[{Spacer[0] Text[
        Style["Earning per share-$", Bold, 18]], Spacer[20],
          TogglerBar[
           Dynamic[fc], {ae -> Style["Mean", Blue, Bold], 
            me -> Style["Actual", Orange, Bold]}], 
          Dynamic@ListPlot[
            Accumulate[{ConstantArray[0, Length[ae]]}~Join~fc], 
            ImageSize -> {270, 200}, GridLines -> {None, Automatic}, 
            PlotMarkers -> {Automatic, 6}, PlotRange -> {0, 2}, 
            Joined -> True, Filling -> 0]}], Spacer[10], 
        Column[{Spacer[0] Text[Style["Total sales-$ billion", Bold, 18]], 
      Spacer[20],
      TogglerBar[
       Dynamic[sc], {as -> Style["Mean", Blue, Bold], 
        ms -> Style["Actual", Orange, Bold]}], 
      Dynamic@ListPlot[
        Accumulate[{ConstantArray[0, Length[as]]}~Join~sc], 
        GridLines -> {None, Automatic}, PlotMarkers -> {Automatic, 6},
         ImageSize -> {270, 200}, PlotRange -> {0, 14}, 
        Joined -> True, Filling -> 0]}]}]]

Based on your comments I can imagine you may want something like this. Note problem with image I think is fixed. It is also possible to sync buttons colors with bar colors. You can experiment and figure it out.

With[{
  ae = {.65, .47, .54, .62, 1.14},
  me = {.607, .434, .439, .505, .784},
  as = {5.749, 4.359, 4.37, 4.837, 7.115},
  ms = {5.466, 4.522, 4.403, 4.664, 6.423}}, 
 Panel@Row[{Column[{Spacer[0] Text[
        Style["Earning per share-$", Bold, 18]], Spacer[20],
          TogglerBar[
           Dynamic[fc], {ae -> Style["Mean", Blue, Bold], 
            me -> Style["Actual", Orange, Bold]}], 
          Dynamic@BarChart[
            Transpose[
             Accumulate[{ConstantArray[.05, Length[ae]]}~Join~fc]], 
            GridLines -> {None, Automatic}, ImageSize -> {270, 450}, 
            AspectRatio -> 45/27, PlotRange -> {0, 2}, 
            ChartElementFunction -> "GlassRectangle", 
            ChartStyle -> "Rainbow"]}], Spacer[10], 
        Column[{Spacer[0] Text[Style["Total sales-$ billion", Bold, 18]], 
      Spacer[20],
      TogglerBar[
       Dynamic[sc], {as -> Style["Mean", Blue, Bold], 
        ms -> Style["Actual", Orange, Bold]}], 
      Dynamic@BarChart[
        Transpose[
         Accumulate[{ConstantArray[.3, Length[as]]}~Join~sc]], 
        GridLines -> {None, Automatic}, ImageSize -> {270, 450}, 
        AspectRatio -> 45/27, PlotRange -> {0, 14}, 
        ChartElementFunction -> "GlassRectangle", 
        ChartStyle -> "Pastel"]}]}]]