In this step, you will add the script that will allow you to load data conditionally.

1. Place your cursor below the client-side references that you added in Step 1. Add the following markup:

   To write code in Source View

   <script id="scriptInit" type="text/javascript">
   </script>
   

2. The first section of script you'll add populates the C1ComboBox with data:

   To write code in Source View

   $(document).ready(function () {
               var staticSeries = [];
               var count = 0;
               $("#tagsinput").c1combobox(
               {               
                   selectedIndex: -1,
                   data: [
                           {
                               label: 'West',
                               value: 'West'
                           },
                           {
                               label: 'Central',
                               value: 'Central'
                           },
                           {
                               label: 'East',
                               value: 'East'
                           }
                   ],
   

3. The next part of the script handles the selectedIndexChanging event. This allows the data in the C1BarChart control to change based on the chosen C1ComboBoxItem:

   To write code in Source View

   selectedIndexChanging: function (e, args) {
                       var color;
                       switch (args.newIndex) {
                           case 0: color = "Red"
                               break;
                           case 1: color = "Blue"
                               break;
                           case 2: color = "Orange"
                       };
                       count++;
                       var series = $("#C1BarChart1").c1barchart('option', 'seriesList')
                       if (count === 1) {
                           staticSeries = series;
                       }
                       staticSeries[args.newIndex].visible = true;
                       staticSeries[args.newIndex].legendEntry = true;
                       $("#C1BarChart1").c1barchart('option', 'seriesList', [staticSeries[args.newIndex]]);
                       $("#C1BarChart1").c1barchart({
                           hint: {
                               enable: true
                           },
                           seriesStyles: [{
                               fill: color, stroke: color
                           }]
                       });
                       $("#C1BarChart1").c1barchart('redraw');
                   }
               });
   

4. The last section of script to add creates the Hint and the SeriesList data for the C1BarChart control:

   To write code in Source View

   $("#C1BarChart1").c1barchart({
                   axis: {
                       y: {
                           text: "Total Hardware"
                       },
                       x: {
                           text: ""
                       }
                   },
                   hint: {
                       enable: false,
                       content: function () {
                           return this.data.label + '\n ' + this.y + '';
                       },
                       compass: "south", offsetX: 0, offsetY: 0
                   },               
                   seriesList: [{
                       visible: false,
                       label: "West",
                       legendEntry: false,
                       data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
                   }, {
                       visible: false,
                       label: "Central",
                       legendEntry: false,
                       data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
                   }, {
                       visible: false,
                       label: "East",
                       legendEntry: false,
                       data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
                   }]
               });
           });
   

   In this step, you added the script to handle the C1ComboBox's selectedIndexChanging event and the Hint and SeriesList data for the C1BarChart control. In the next step, you'll run your application.