JAVASCRIPT EXAMPLES Bars For Data Comparison
In this example, multiple instances of Uize.Widget.Bar are being used to display nutritional data for a set of fruits in a bar chart. An instance of Uize.Widget.Options is used to wire up an option set on the left side of the bar chart, which lets you select which nutritional data is displayed by the chart. Hovering over an option temporarily fixes the chart to that data. To have the chart persist on a nutritional data type, click an option to select it. As you move the mouse over the various options to preview nutriotional data, an instance of Uize.Fade is used to animate the bars of the chart from their position for the previous data type to their new position for the new data type.
| Property | Apples | Avocados | Bananas | Dates | Grapefruits | Grapes | Mangos | Oranges | Pears | Plums |