title: Telerik RadHtmlChart group series by column value
body: <p>I'm making a pretty simple polling app.  Users text a certain number with the values 'yes' or 'no' and the results show up live via AJAX on a projector.  There are five different items to vote on (all yes or no).</p>
  
  <p>Right now I have a SQL View that returns <code>[poll_name, vote_value, value_count]</code> where vote_value is either 'yes' or 'no'.</p>
  
  <p>Using RadHtmlChart, I'm trying to display a stacked BarChart with a bar for each <code>poll_name</code>, a red bar for no votes and a blue bar for yes votes.  I tried to alter the code from the <a href="http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/barchart/defaultcs.aspx" rel="nofollow">BarChart example</a> and merge it with the <a href="http://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/database/defaultcs.aspx" rel="nofollow">SqlDataSource example</a>:</p>
  
  <pre><code>&lt;asp:SqlDataSource ID="sqlResults" runat="server" ConnectionString="&lt;%$ ConnectionStrings:MyDB %&gt;"
      SelectCommand="select poll_name, vote_value, value_count from vw_sms_pollResults order by poll_id" /&gt;
  &lt;tel:RadScriptManager runat="server" ID="rsmScriptManager" /&gt;
  &lt;tel:RadAjaxPanel runat="server" ID="rapPanel" LoadingPanelID="ralpLoadingPanel" EnableAJAX="true"&gt;
      &lt;tel:RadHtmlChart runat="server" ID="rhcResults" Width="800" Height="500" Transitions="true" DataSourceID="sqlResults"&gt;
          ...
          &lt;PlotArea&gt;
              &lt;Appearance&gt;
                  &lt;FillStyle BackgroundColor="White" /&gt;
              &lt;/Appearance&gt;
              &lt;XAxis DataLabelsField="poll_name"&gt;
                  &lt;MajorGridLines Visible="false" /&gt;
                  &lt;MinorGridLines Visible="false" /&gt;
              &lt;/XAxis&gt;
              &lt;YAxis AxisCrossingValue="0"&gt;
                  &lt;MajorGridLines Visible="false" /&gt;
                  &lt;MinorGridLines Visible="false" /&gt;
              &lt;/YAxis&gt;
              &lt;Series&gt;
                  &lt;tel:BarSeries Stacked="true" DataFieldY="value_count"&gt;
                      &lt;Appearance FillStyle-BackgroundColor="Red" /&gt;
                  &lt;/tel:BarSeries&gt;
              &lt;/Series&gt;
          &lt;/PlotArea&gt;
      &lt;/tel:RadHtmlChart&gt;
  &lt;/tel:RadAjaxPanel&gt;
  </code></pre>
  
  <p>Unfortunately, I end up with twice as many bars as I want: a 'yes' and a 'no' for each <code>poll_name</code>, they're all the same color (obviously), and they're not stacked.  Ideally I would be able to tell it create a new <code>BarSeries</code> for each value of (ie, group by) <code>vote_value</code>.</p>
  
  <p>How should I go about either massaging the data or changing my markup to fix this?  In the future I'd like to allow an arbitrary number of responses, so I'm loathe to changing my query to simply have a 'yes_count' and 'no_count' columns, but I may have to in the meantime.</p>