English Français
acWBHighCharts.net
Shortcut links
159.-
USD
included VAT
179.-USD
Try it Buy it
Skip Navigation LinksHome > Products > acWBHighCharts.net > Demonstration
Demonstration
Examples of acWBHighcharts.net WebControl. These ASP.NET AJAX examples are similar to the one given by Highsoft, for Highcharts and Highstock.
Basic charts
<acdev:UILineHighChart ID="Chart1" runat="server" Width="478px" BackColor="AliceBlue">
  <TitleGroup Title="Monthly Average Temperature"  />
  <SubTitleGroup Title="Source: WorldClimate.com"></SubTitleGroup>
  <XAxisItems>
    <acdev:UIHighChartXAxis Categories="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec">
    </acdev:UIHighChartXAxis>
  </XAxisItems>
  <YAxisItems>
    <acdev:UIHighChartYAxis>
        <TitleGroup Title="Temperature (°C)" />
    </acdev:UIHighChartYAxis>
  </YAxisItems>
  <PlotOptionsGroup EnableMouseTracking="false">
    <DataLabelsGroup Enabled="True"></DataLabelsGroup>
  </PlotOptionsGroup>
  <Items>
    <acdev:UIHighChartLineSerie Name="Tokyo">
      <Items>
        <acdev:UIHighChartLineItem YValue="7.0" />
        <acdev:UIHighChartLineItem YValue="6.9" />
        <acdev:UIHighChartLineItem YValue="9.5"  />
        <acdev:UIHighChartLineItem YValue="14.5" />
        <acdev:UIHighChartLineItem YValue="18.4" />
        <acdev:UIHighChartLineItem YValue="21.5" />
        <acdev:UIHighChartLineItem YValue="25.2" />
        <acdev:UIHighChartLineItem YValue="26.5" />
        <acdev:UIHighChartLineItem YValue="23.3" />
        <acdev:UIHighChartLineItem YValue="18.3" />
        <acdev:UIHighChartLineItem YValue="13.9" />
        <acdev:UIHighChartLineItem YValue="9.6" />
      </Items>
    </acdev:UIHighChartLineSerie>
    <acdev:UIHighChartLineSerie Name="London">
      <Items>
        <acdev:UIHighChartLineItem YValue="3.9" />
        <acdev:UIHighChartLineItem YValue="4.2" />
        <acdev:UIHighChartLineItem YValue="5.7" />
        <acdev:UIHighChartLineItem YValue="8.5" />
        <acdev:UIHighChartLineItem YValue="11.9" />
        <acdev:UIHighChartLineItem YValue="15.2" />
        <acdev:UIHighChartLineItem YValue="17.0" />
        <acdev:UIHighChartLineItem YValue="16.6" />
        <acdev:UIHighChartLineItem YValue="14.2" />
        <acdev:UIHighChartLineItem YValue="10.3" />
        <acdev:UIHighChartLineItem YValue="6.6" />
        <acdev:UIHighChartLineItem YValue="4.8" />
      </Items>
    </acdev:UIHighChartLineSerie>
  </Items>
</acdev:UILineHighChart>
<acdev:UIAreaHighChart ID="Chart2" runat="server" Width="478px"
                     BackColor="AliceBlue"
                     OnClientOptionsInitialized="Chart2_OnOptionsInitialized">
  <ChartGroup ZoomType="x"></ChartGroup>
  <TitleGroup Title="USD to EUR exchange rate over time"  />
  <SubTitleGroup Title="Click and drag in the plot area to zoom in"></SubTitleGroup>
  <LegendGroup Enabled="False"></LegendGroup>
  <XAxisItems>
    <acdev:UIHighChartXAxis AxisType="Datetime">
    </acdev:UIHighChartXAxis>
  </XAxisItems>
  <YAxisItems>
    <acdev:UIHighChartYAxis>
        <TitleGroup Title="Exchange rate" />
    </acdev:UIHighChartYAxis>
  </YAxisItems>
  <PlotOptionsGroup>
  </PlotOptionsGroup>
  <WebServiceGroup IsCrossDomain="True"
                   WebServiceUrl="https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?"  />
  <Items>
    <acdev:UIHighChartAreaSerie Name="USD to EUR" YAxisIndex="0" />
  </Items>
</acdev:UIAreaHighChart>   
function Chart2_OnOptionsInitialized(nSender, nArgs) {
    var nOptions = nArgs.get_options();

    $acDev.$.extend(nOptions.plotOptions.area, {
        threshold: null
    });
}
Area charts
<acdev:UIAreaHighChart ID="Chart3" runat="server" Width="478px" BackColor="AliceBlue">
  <ChartGroup></ChartGroup>
  <TitleGroup Title="Historic and Estimated Worldwide Population Growth by Region"  />
  <SubTitleGroup Title="Source: Wikipedia.org"></SubTitleGroup>
  <XAxisItems>
  <acdev:UIHighChartXAxis Categories="1750, 1800, 1850, 1900, 1950, 1999, 2050"
                           TickmarkPlacement="on">
    <TitleGroup Enabled="False"></TitleGroup>
  </acdev:UIHighChartXAxis>
  </XAxisItems>
  <YAxisItems>
  <acdev:UIHighChartYAxis>
    <TitleGroup Title="Billions" />
  </acdev:UIHighChartYAxis>
  </YAxisItems>
  <PlotOptionsGroup LineColor="#666666" LineWidth="1"
                    Stacking="normal">
  </PlotOptionsGroup>
  <ToolTipGroup Split="True" ValueSuffix=" millions" />
  <Items>
    <acdev:UIHighChartAreaSerie Name="Asia">
      <Items>
        <acdev:UIHighChartAreaItem YValue="502" />
        <acdev:UIHighChartAreaItem YValue="635" />
        <acdev:UIHighChartAreaItem YValue="809" />
        <acdev:UIHighChartAreaItem YValue="947" />
        <acdev:UIHighChartAreaItem YValue="1402" />
        <acdev:UIHighChartAreaItem YValue="3634" />
        <acdev:UIHighChartAreaItem YValue="5268" />
      </Items>
    </acdev:UIHighChartAreaSerie>
    <acdev:UIHighChartAreaSerie Name="Africa">
      <Items>
        <acdev:UIHighChartAreaItem YValue="106" />
        <acdev:UIHighChartAreaItem YValue="107" />
        <acdev:UIHighChartAreaItem YValue="111" />
        <acdev:UIHighChartAreaItem YValue="133" />
        <acdev:UIHighChartAreaItem YValue="221" />
        <acdev:UIHighChartAreaItem YValue="767" />
        <acdev:UIHighChartAreaItem YValue="1766" />
      </Items>
    </acdev:UIHighChartAreaSerie>
    <acdev:UIHighChartAreaSerie Name="Europe">
      <Items>
        <acdev:UIHighChartAreaItem YValue="163" />
        <acdev:UIHighChartAreaItem YValue="203" />
        <acdev:UIHighChartAreaItem YValue="276" />
        <acdev:UIHighChartAreaItem YValue="408" />
        <acdev:UIHighChartAreaItem YValue="547" />
        <acdev:UIHighChartAreaItem YValue="729" />
        <acdev:UIHighChartAreaItem YValue="628" />
      </Items>
    </acdev:UIHighChartAreaSerie>
    <acdev:UIHighChartAreaSerie Name="America">
      <Items>
        <acdev:UIHighChartAreaItem YValue="18" />
        <acdev:UIHighChartAreaItem YValue="31" />
        <acdev:UIHighChartAreaItem YValue="54" />
        <acdev:UIHighChartAreaItem YValue="156" />
        <acdev:UIHighChartAreaItem YValue="339" />
        <acdev:UIHighChartAreaItem YValue="818" />
        <acdev:UIHighChartAreaItem YValue="1201" />
      </Items>
    </acdev:UIHighChartAreaSerie>
    <acdev:UIHighChartAreaSerie Name="Oceania">
      <Items>
        <acdev:UIHighChartAreaItem YValue="2" />
        <acdev:UIHighChartAreaItem YValue="2" />
        <acdev:UIHighChartAreaItem YValue="2" />
        <acdev:UIHighChartAreaItem YValue="6" />
        <acdev:UIHighChartAreaItem YValue="13" />
        <acdev:UIHighChartAreaItem YValue="30" />
        <acdev:UIHighChartAreaItem YValue="46" />
      </Items>
    </acdev:UIHighChartAreaSerie>
  </Items>
</acdev:UIAreaHighChart>
<acdev:UIAreaSplineHighChart ID="Chart4" runat="server" Width="478px" BackColor="AliceBlue">
  <TitleGroup Title="Average fruit consumption during one week"  />
  <LegendGroup Layout="Vertical" Align="Left" Floating="true" 
               VerticalAlign="Top" XValue="150" YValue="100" 
               BorderWidth="1">
  </LegendGroup>
  <XAxisItems>
    <acdev:UIHighChartXAxis Categories="Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday">
    </acdev:UIHighChartXAxis>
  </XAxisItems> 
  <YAxisItems>
    <acdev:UIHighChartYAxis>
        <TitleGroup Title="Fruit units" />
    </acdev:UIHighChartYAxis>
  </YAxisItems>
  <ToolTipGroup ToolTipShared="True" ValueSuffix=" units" />
  <PlotOptionsGroup></PlotOptionsGroup>
  <Items>
    <acdev:UIHighChartAreaSplineSerie Name="John">
      <Items>
       <acdev:UIHighChartAreaSplineItem YValue="3" />
       <acdev:UIHighChartAreaSplineItem YValue="4" />
       <acdev:UIHighChartAreaSplineItem YValue="3" />
       <acdev:UIHighChartAreaSplineItem YValue="5" />
       <acdev:UIHighChartAreaSplineItem YValue="4" />
       <acdev:UIHighChartAreaSplineItem YValue="10" />
       <acdev:UIHighChartAreaSplineItem YValue="12" />
      </Items>
    </acdev:UIHighChartAreaSplineSerie>
    <acdev:UIHighChartAreaSplineSerie Name="Jane">
      <Items>
       <acdev:UIHighChartAreaSplineItem YValue="1" />
       <acdev:UIHighChartAreaSplineItem YValue="3" />
       <acdev:UIHighChartAreaSplineItem YValue="4" />
       <acdev:UIHighChartAreaSplineItem YValue="3" />
       <acdev:UIHighChartAreaSplineItem YValue="3" />
       <acdev:UIHighChartAreaSplineItem YValue="5" />
       <acdev:UIHighChartAreaSplineItem YValue="4" />
      </Items>
    </acdev:UIHighChartAreaSplineSerie>
  </Items>               
</acdev:UIAreaSplineHighChart>
Column and bar charts
<acdev:UIBarHighChart ID="Chart5" runat="server" Width="478px" BackColor="AliceBlue"
                OnClientOptionsInitialized="Chart5_OnOptionsInitialized">
<TitleGroup Title="Population pyramid for Germany, 2015"  />
<SubTitleGroup Title="Source: &lt;a href='http://populationpyramid.net/germany/2015/'>" &
                     "Population Pyramids of the World from 1950 to 2100</a>"></SubTitleGroup>
<XAxisItems>
  <acdev:UIHighChartXAxis Categories="0-4, 5-9, 10-14, 15-19,
                                    20-24, 25-29, 30-34, 35-39, 40-44,
                                    45-49, 50-54, 55-59, 60-64, 65-69,
                                    70-74, 75-79, 80-84, 85-89, 90-94,
                                    95-99, 100  "
                        Reversed="false">
    <LabelsGroup StepValue="1"></LabelsGroup>
  </acdev:UIHighChartXAxis>
  <acdev:UIHighChartXAxis Categories="0-4, 5-9, 10-14, 15-19,
                                    20-24, 25-29, 30-34, 35-39, 40-44,
                                    45-49, 50-54, 55-59, 60-64, 65-69,
                                    70-74, 75-79, 80-84, 85-89, 90-94,
                                    95-99, 100  "
                        Reversed="false"
                        Opposite="true"
                        LinkedTo="0">
    <LabelsGroup StepValue="1"></LabelsGroup>
  </acdev:UIHighChartXAxis>
</XAxisItems>
<YAxisItems>
  <acdev:UIHighChartYAxis>
  </acdev:UIHighChartYAxis>
</YAxisItems>
<PlotOptionsGroup >
  <SeriesGroup Stacking="normal"></SeriesGroup>
</PlotOptionsGroup>
<Items>
<acdev:UIHighChartBarSerie Name="Male">
  <Items>
    <acdev:UIHighChartBarItem YValue="-2.2" />
    <acdev:UIHighChartBarItem YValue="-2.2" />
    <acdev:UIHighChartBarItem YValue="-2.3" />
    <acdev:UIHighChartBarItem YValue="-2.5" />
    <acdev:UIHighChartBarItem YValue="-2.7" />
    <acdev:UIHighChartBarItem YValue="-3.1" />
    <acdev:UIHighChartBarItem YValue="-3.2" />
    <acdev:UIHighChartBarItem YValue="-3.0" />
    <acdev:UIHighChartBarItem YValue="-3.2" />
    <acdev:UIHighChartBarItem YValue="-4.3" />
    <acdev:UIHighChartBarItem YValue="-4.4" />
    <acdev:UIHighChartBarItem YValue="-3.6" />
    <acdev:UIHighChartBarItem YValue="-3.1" />
    <acdev:UIHighChartBarItem YValue="-2.4" />
    <acdev:UIHighChartBarItem YValue="-2.5" />
    <acdev:UIHighChartBarItem YValue="-2.3" />
    <acdev:UIHighChartBarItem YValue="-1.2" />
    <acdev:UIHighChartBarItem YValue="-0.6" />
    <acdev:UIHighChartBarItem YValue="-0.2" />
    <acdev:UIHighChartBarItem YValue="0" />
    <acdev:UIHighChartBarItem YValue="0" />
  </Items>
</acdev:UIHighChartBarSerie>
<acdev:UIHighChartBarSerie Name="Female">
  <Items>
    <acdev:UIHighChartBarItem YValue="2.1" />
    <acdev:UIHighChartBarItem YValue="2.0" />
    <acdev:UIHighChartBarItem YValue="2.2" />
    <acdev:UIHighChartBarItem YValue="2.4" />
    <acdev:UIHighChartBarItem YValue="2.6" />
    <acdev:UIHighChartBarItem YValue="3.0" />
    <acdev:UIHighChartBarItem YValue="3.1" />
    <acdev:UIHighChartBarItem YValue="2.9" />
    <acdev:UIHighChartBarItem YValue="3.1" />
    <acdev:UIHighChartBarItem YValue="4.1" />
    <acdev:UIHighChartBarItem YValue="4.3" />
    <acdev:UIHighChartBarItem YValue="3.6" />
    <acdev:UIHighChartBarItem YValue="3.4" />
    <acdev:UIHighChartBarItem YValue="2.6" />
    <acdev:UIHighChartBarItem YValue="2.9" />
    <acdev:UIHighChartBarItem YValue="2.6" />
    <acdev:UIHighChartBarItem YValue="1.8" />
    <acdev:UIHighChartBarItem YValue="1.2" />
    <acdev:UIHighChartBarItem YValue="0.6" />
    <acdev:UIHighChartBarItem YValue="0.1" />
    <acdev:UIHighChartBarItem YValue="0" />
  </Items>
</acdev:UIHighChartBarSerie>
function Chart5_OnOptionsInitialized(nSender, nArgs) {
    var nOptions = nArgs.get_options();

    $acDev.$.extend(nOptions.yAxis.labels, {
        formatter: function () {
            return Math.abs(this.value) + '%';
        }
    });

    $acDev.$.extend(nOptions.tooltip, {
        formatter: function () {
            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
        }
    });
}
<acdev:UIColumnHighChart ID="Chart6" runat="server" Width="478px" BackColor="AliceBlue"
                        OnClientOptionsInitialized="Chart6_OnOptionsInitialized">
<TitleGroup Title="Stacked column chart"  />
<XAxisItems>
  <acdev:UIHighChartXAxis Categories="Apples, Oranges, Pears, Grapes, Bananas">
  </acdev:UIHighChartXAxis>
</XAxisItems>
<YAxisItems>
  <acdev:UIHighChartYAxis Min="0">
    <TitleGroup Title="Total fruit consumption"></TitleGroup>
    <StackLabelsGroup Enabled="True">
      <Style Font-Bold="true" />
    </StackLabelsGroup>
  </acdev:UIHighChartYAxis>
</YAxisItems>
<LegendGroup Align="Right" XValue="-30" VerticalAlign="Top" YValue="25" Floating="True" BorderColor="#CCC" BorderWidth="1" Shadow="False">
</LegendGroup>
<ToolTipGroup HeaderFormat="&lt;b>{point.x}</b><br/>" PointFormat="{series.name}: {point.y}<br/>Total: {point.stackTotal}" />
<Items>
  <acdev:UIHighChartColumnSerie Name="John">
    <Items>
       <acdev:UIHighChartColumnItem YValue="5" />
       <acdev:UIHighChartColumnItem YValue="3" />
       <acdev:UIHighChartColumnItem YValue="4" />
       <acdev:UIHighChartColumnItem YValue="7" />
       <acdev:UIHighChartColumnItem YValue="2" />
    </Items>
  </acdev:UIHighChartColumnSerie>
  <acdev:UIHighChartColumnSerie Name="Jane">
    <Items>
       <acdev:UIHighChartColumnItem YValue="2" />
       <acdev:UIHighChartColumnItem YValue="2" />
       <acdev:UIHighChartColumnItem YValue="3" />
       <acdev:UIHighChartColumnItem YValue="2" />
       <acdev:UIHighChartColumnItem YValue="1" />
    </Items>
  </acdev:UIHighChartColumnSerie>
  <acdev:UIHighChartColumnSerie Name="Joe">
    <Items>
       <acdev:UIHighChartColumnItem YValue="3" />
       <acdev:UIHighChartColumnItem YValue="4" />
       <acdev:UIHighChartColumnItem YValue="4" />
       <acdev:UIHighChartColumnItem YValue="2" />
       <acdev:UIHighChartColumnItem YValue="5" />
    </Items>
</acdev:UIHighChartColumnSerie>
</Items>
</acdev:UIColumnHighChart>   
function Chart6_OnOptionsInitialized(nSender, nArgs) {
    var nOptions = nArgs.get_options();

    $acDev.$.extend(nOptions.yAxis.stackLabels.style, {
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
    });
    $acDev.$.extend(nOptions.legend, {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white'
    });
    $acDev.$.extend(nOptions.plotOptions.column, {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
    });
}
Pie charts
<acdev:UIPieHighChart ID="Chart7" runat="server" Width="478px" BackColor="AliceBlue">
  <TitleGroup Title="Browser market shares January, 2015 to May, 2015"></TitleGroup>
  <ToolTipGroup PointFormat="{series.name}: &lt;b>{point.percentage:.1f}%</b>" />
  <PlotOptionsGroup AllowPointSelect="true" ShowInLegend="true">
    <DataLabelsGroup Enabled="False"></DataLabelsGroup>
  </PlotOptionsGroup>
  <Items>
    <acdev:UIHighChartPieSerie Name="Brands" >
      <Items>
        <acdev:UIHighChartPieItem Name="Microsoft Internet Explorer" YValue="56.33" />
        <acdev:UIHighChartPieItem Name="Chrome" YValue="24.03" Selected="true" Sliced="true" />
        <acdev:UIHighChartPieItem Name="Firefox" YValue="10.38" />
        <acdev:UIHighChartPieItem Name="Safari" YValue="4.77" />
        <acdev:UIHighChartPieItem Name="Opera" YValue="0.91" />
        <acdev:UIHighChartPieItem Name="Proprietary or Undetectable" YValue="0.2">
          <DataLabelsGroup Enabled="False"></DataLabelsGroup>
        </acdev:UIHighChartPieItem>
      </Items>
    </acdev:UIHighChartPieSerie>
  </Items>
</acdev:UIPieHighChart>  
<acdev:UIPieHighChart ID="Chart8" runat="server"
                      Width="478px" BackColor="AliceBlue">
  <TitleGroup Title="Browser&lt;br>shares<br>2015" Align="Center"
              VerticalAlign="Middle" YValue="40"></TitleGroup>
  <ToolTipGroup PointFormat="{series.name}: &lt;b>{point.percentage:.1f}%</b>" />
  <PlotOptionsGroup StartAngle="-90" EndAngle="90" Center="50%, 75%">
    <DataLabelsGroup Enabled="true" Distance="-50">
      <Style ForeColor="White" Font-Bold="true" />
    </DataLabelsGroup>
  </PlotOptionsGroup>
  <Items>
    <acdev:UIHighChartPieSerie Name="Browser share" InnerSize="50%">
      <Items>
        <acdev:UIHighChartPieItem Name="Firefox" YValue="10.38" />
        <acdev:UIHighChartPieItem Name="IE" YValue="56.33" />
        <acdev:UIHighChartPieItem Name="Chrome" YValue="24.03" />
        <acdev:UIHighChartPieItem Name="Safari" YValue="4.77" />
        <acdev:UIHighChartPieItem Name="Opera" YValue="0.91" />
        <acdev:UIHighChartPieItem Name="Proprietary or Undetectable" YValue="0.2">
          <DataLabelsGroup Enabled="false"></DataLabelsGroup>
        </acdev:UIHighChartPieItem>
      </Items>
    </acdev:UIHighChartPieSerie>
  </Items>
</acdev:UIPieHighChart>
Other charts
<acdev:UIMultiHighChart ID="Chart9" runat="server" Width="478px" BackColor="AliceBlue">
  <TitleGroup Title="Highcharts Polar Chart"></TitleGroup>
  <ChartGroup Polar="true"></ChartGroup>
  <PaneGroup StartAngle="0" EndAngle="360"></PaneGroup>
  <XAxisItems>
    <acdev:UIHighChartXAxis Min="0" Max="360" TickInterval="45">
    </acdev:UIHighChartXAxis>
  </XAxisItems>
  <YAxisItems>
    <acdev:UIHighChartYAxis Min="0">
    </acdev:UIHighChartYAxis>
  </YAxisItems>
  <PlotOptionsGroup>
    <Seriesgroup PointStart="0" PointInterval="45"></Seriesgroup>
    <Items>
      <acdev:UIHighChartsColumnPlotOptionsGroup GroupPadding="0" PointPadding="0">
      </acdev:UIHighChartsColumnPlotOptionsGroup>
    </Items>
  </PlotOptionsGroup>
  <Items>
    <acdev:UIHighChartColumnSerie Name="Column" PointPlacement="between">
      <Items>
        <acdev:UIHighChartColumnItem YValue="8" />
        <acdev:UIHighChartColumnItem YValue="7" />
        <acdev:UIHighChartColumnItem YValue="6" />
        <acdev:UIHighChartColumnItem YValue="5" />
        <acdev:UIHighChartColumnItem YValue="4" />
        <acdev:UIHighChartColumnItem YValue="3" />
        <acdev:UIHighChartColumnItem YValue="2" />
        <acdev:UIHighChartColumnItem YValue="1" />
      </Items>
    </acdev:UIHighChartColumnSerie>
    <acdev:UIHighChartLineSerie Name="Line">
      <Items>
        <acdev:UIHighChartLineItem YValue="1" />
        <acdev:UIHighChartLineItem YValue="2" />
        <acdev:UIHighChartLineItem YValue="3"  />
        <acdev:UIHighChartLineItem YValue="4" />
        <acdev:UIHighChartLineItem YValue="5" />
        <acdev:UIHighChartLineItem YValue="6" />
        <acdev:UIHighChartLineItem YValue="7" />
        <acdev:UIHighChartLineItem YValue="8" />
      </Items>
    </acdev:UIHighChartLineSerie>
    <acdev:UIHighChartAreaSerie Name="Area">
      <Items>
        <acdev:UIHighChartAreaItem YValue="1" />
        <acdev:UIHighChartAreaItem YValue="8" />
        <acdev:UIHighChartAreaItem YValue="2" />
        <acdev:UIHighChartAreaItem YValue="7" />
        <acdev:UIHighChartAreaItem YValue="3" />
        <acdev:UIHighChartAreaItem YValue="6" />
        <acdev:UIHighChartAreaItem YValue="4" />
        <acdev:UIHighChartAreaItem YValue="5" />
      </Items>
    </acdev:UIHighChartAreaSerie>                                       
  </Items>
</acdev:UIMultiHighChart>  
<acdev:UILineHighChart ID="Chart10" runat="server" Width="478px" Height="370px" BackColor="AliceBlue">
    <XAxisItems>
        <acdev:UIHighChartXAxis Categories="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec">
        </acdev:UIHighChartXAxis>
    </XAxisItems>
    <YAxisItems>
        <acdev:UIHighChartYAxis LineWidth="1" LineColor="#F33" UniqueName="temperature-axis">
            <TitleGroup Title="Temperature (°C)" />
        </acdev:UIHighChartYAxis>
    </YAxisItems>
    <Items>
        <acdev:UIHighChartLineSerie Name="Temperature" Color="#F33">
            <Items>
                <acdev:UIHighChartLineItem YValue="7.0" />
                <acdev:UIHighChartLineItem YValue="6.9" />
                <acdev:UIHighChartLineItem YValue="9.5"  />
                <acdev:UIHighChartLineItem YValue="14.5" />
                <acdev:UIHighChartLineItem YValue="18.2" />
                <acdev:UIHighChartLineItem YValue="21.5" />
                <acdev:UIHighChartLineItem YValue="25.2" />
                <acdev:UIHighChartLineItem YValue="26.5" />
                <acdev:UIHighChartLineItem YValue="23.3" />
                <acdev:UIHighChartLineItem YValue="18.3" />
                <acdev:UIHighChartLineItem YValue="13.9" />
                <acdev:UIHighChartLineItem YValue="9.6" />
            </Items>
        </acdev:UIHighChartLineSerie>
    </Items>                                                  
</acdev:UILineHighChart>
<acdev:UIButton ID="Chart10_AddAxisAndSerie" runat="server"
                Text="Add axis and serie" AutoPostBack="False"
                OnClientClick="Chart10_AddAxisAndSerie_OnClientClick(this)">
</acdev:UIButton>
<acdev:UIButton ID="Chart10_RemoveAxisAndSerie" runat="server"
                Text="Remove axis and serie" AutoPostBack="False"
                OnClientClick="Chart10_RemoveAxisAndSerie_OnClientClick(this)">
</acdev:UIButton>
var g_iSerieCounter = 0;

function Chart10_AddAxisAndSerie_OnClientClick(nSender) {
    var nHighchart = $find('<%=Chart10.ClientID %>');

    g_iSerieCounter = Math.max(g_iSerieCounter, nHighchart.getSeries().length);

    nHighchart.addYAxis({
        id: 'rainfall-axis' + g_iSerieCounter,
        title: {
            text: 'Rainfall'
        },
        lineWidth: 2,
        lineColor: '#08F',
        opposite: true
    });
    nHighchart.addSerie({
        name: 'Rainfall' + g_iSerieCounter,
        type: 'column',
        color: '#08F',
        yAxis: 'rainfall-axis' + g_iSerieCounter,
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    });
}
function Chart10_RemoveAxisAndSerie_OnClientClick(nSender) {
    var nHighchart = $find('<%=Chart10.ClientID %>');

    nHighchart.removeSerie(0);
    nHighchart.removeYAxis(0);
}
Charts with ASP.NET Datasource
<acdev:UIFunnelHighChart ID="Chart11" runat="server" Width="478px" BackColor="AliceBlue">
    <TitleGroup Title="Funnel with Table Datasource"></TitleGroup>
</acdev:UIFunnelHighChart>
    private DataTable CreateTableDatasource()
    {
        DataTable nTable = new DataTable();

        for (int i = 0; i <= 4; i) {
            nTable.Columns.Add(new DataColumn(string.Format("Value_{0}", i), typeof(double)));
        }

        for (int j = 0; j <= 4; j) {
            DataRow nRow = nTable.NewRow();

            for (int i = 0; i <= 4; i) {
                nRow(string.Format("Value_{0}", i)) = (j  1) * i;
            }

            nTable.Rows.Add(nRow);
        }

        return nTable;
    }

    private void InitializeHighcharts()
    {
        UIHighChartFunnelSerie nSerie = new UIHighChartFunnelSerie();

        nSerie.ItemYField = "Value_2";

        Chart11.Items.Add(nSerie);
    }

    private void InitializeHighChartsDataSource()
    {
        Chart11.DataSource = CreateTableDatasource();
    }

    private void DataBindHighChartsDataSource()
    {
        Chart11.DataBind();
    }

    protected override void OnInit(System.EventArgs e)
    {
        base.Oninit(e);

        InitializeHighChartsDataSource();
    }

    protected override void OnLoad(System.EventArgs e)
    {
        base.OnLoad(e);

        if (!IsPostBack()) {
            InitializeHighcharts();
        }

        DataBindHighChartsDataSource();
    }



<asp:XmlDataSource ID="DataSource12" runat="server"
                   DataFile="LineHighChartWithXmlDatasource.xml">
</asp:XmlDataSource>
<acdev:UILineHighChart ID="Chart12" runat="server"
                       Width="478px" BackColor="AliceBlue"
                      DataSourceID="DataSource12">
  <TitleGroup Title="Line with XmlDataSource"></TitleGroup>
  <Items>
    <acdev:UIHighChartLineSerie ItemXField="xvalue"
                                ItemYField="yvalue"
                                Name="XML">
    </acdev:UIHighChartLineSerie>
  </Items>
</acdev:UILineHighChart>
<?xml version="1.0" encoding="utf-8" ?>
<data>
  <item xvalue="1" yvalue="4"></item>
  <item xvalue="2" yvalue="7"></item>
  <item xvalue="3" yvalue="12"></item>
  <item xvalue="4" yvalue="5"></item>
  <item xvalue="5" yvalue="-2"></item>
  <item xvalue="6" yvalue="-1"></item>
  <item xvalue="7" yvalue="3"></item>
</data>