Question

I want to dynamically add chart controls inside my ul tags through code. How can I do this?
This is my statement for the anythingslider javascript

<script type="text/javascript">
     var slider2 = ['Machines', 'Trend','test','test2','test3'];
     function formatText(index, panel) {
         return slider2[index - 1];
     }

     $(function () {
         $('#slider2').anythingSlider({
             width: 800,       // if resizeContent is false, this is the default width if panel size is not defined
             height: 400,       // if resizeContent is false, this is the default height if panel size is not defined
             buildArrows: true,
             resizeContents: false,     // If true, solitary images/objects in the panel will expand to fit the viewport
             autoPlay: true,     // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
             navigationFormatter: formatText, // Format navigation labels with text
             forwardText: "&raquo;",
             backText: "&laquo;"
         })
     });
</script>

Edit:
This is the source code to the page with the new added code:

<ul id="MainContent_slider2">
<img id="MainContent_PlantMachineChart" src="/ChartImg.axd?i=chart_93717cef16e84387b35d83bdd04da217_0.png&amp;g=898a170672b0476ca6f6d49173c231b1" alt="" usemap="#MainContent_PlantMachineChartImageMap"    style="height:400px;width:868px;border-width:0px;" />

<map name="MainContent_PlantMachineChartImageMap"  id="MainContent_PlantMachineChartImageMap">
 </map>

 <li><img id="MainContent_ctl01" src="/ChartImg.axd?    i=chart_93717cef16e84387b35d83bdd04da217_1.png&amp;g=23020f9898ab40898782de3234fae6e4"    alt="" style="height:400px;width:868px;border-width:0px;" /></li'><li'><img    id="MainContent_ctl03" src="/ChartImg.axd?   i=chart_93717cef16e84387b35d83bdd04da217_2.png&amp;g=aa749f6279484859a7892f1f117fbd1c"    alt="" style="height:400px;width:868px;border-width:0px;" /></li></ul>

It has all the data points listed for the first chart(which I left out here) which isn’t added dynmically.

Answer 1

I dont really know why you would want to do this, but you can make the ul runat="server" and add the controls to it like so:

HTML:

<ul runat="server" ID="ul_Charts"></ul>

ServerSide:

ul_Charts.Controls.Add(yourControl);

Edit: You need to programmatically create the chart and insert the chart control into your element like this:

// Create a pie chart
Chart chart = new Chart();

// Choose chart type and add series info
Series series = new Series("Default");
series.ChartType = SeriesChartType.Pie;
chart.Series.Add(series);

// Create chart legend
Legend legend = new Legend();
chart.Legends.Add(legend);

// Define the chart area
ChartArea chartArea = new ChartArea();
ChartArea3DStyle areaStyle = new ChartArea3DStyle(chartArea);
areaStyle.Rotation = 0;
chart.ChartAreas.Add(chartArea);

Axis yAxis = new Axis(chartArea, AxisName.Y);
Axis xAxis = new Axis(chartArea, AxisName.X);

// Bind the data to the chart
chart.Series["Default"].Points.DataBindXY(xValues, yValues);

// Add chart
HtmlGenericControl li = new HtmlGenericControl("li");
li.Controls.Add(chart);
ul_Charts.Controls.Add(li);

This example was found on the asp.net forums and was tweaked a little to fit your scenario. There are other options but this should at list give an idea of what you need to do.