AngularJS directive for the FlexChart control.
Use the wj-flex-chart directive to add charts to your AngularJS applications. Note that directive and parameter names must be formatted using lower-case letters with dashes instead of camel case. For example:
<p>Here is a FlexChart control:</p> <wj-flex-chart style="height:300px" items-source="data" binding-x="country"> <wj-flex-chart-axis wj-property="axisY" major-unit="5000"> </wj-flex-chart-axis> <wj-flex-chart-series binding="sales" name="Sales"> </wj-flex-chart-series> <wj-flex-chart-series binding="expenses" name="Expenses"> </wj-flex-chart-series> <wj-flex-chart-series binding="downloads" name="Downloads" chart-type="LineSymbols"> </wj-flex-chart-series> </wj-flex-chart>
The example below creates a FlexChart control and binds it to a 'data' array exposed by the controller. The chart has three series objects, each corresponding to a property in the objects contained in the source array. The last series in the example uses the 'chart-type' attribute to override the default chart type used for the other series objects.
The wj-flex-chart directive supports the following attributes:
@The name of the property that contains Y values for the chart. You can override this at the series level.
@The name of the property that contains X values for the chart. You can override this at the series level.
@The default chart type to use in rendering series objects. You can override this at the series level. See ChartType.
=A reference to the FlexChart control that this directive creates.
@The text to display in the chart footer (plain text).
=The style to apply to the chart footer.
@The text to display in the chart header (plain text).
=The style to apply to the chart header.
&This event occurs after the binding has finished initializing the control with attribute values.
=A value indicating whether the binding has finished initializing the control with attribute values.
@The value indicating whether to interpolate or leave gaps when there are null values in the data.
=The formatter function that customizes the appearance of data points.
=An array or ICollectionView object that contains the data used to create the chart.
@The value indicating whether clicking legend items toggles series visibility.
=Chart options that only apply to certain chart types. See options under FlexChart for details.
=An array that contains the default colors used for displaying each series.
=The number of pixels of space to leave between the edges of the control and the plot area, or CSS-style margins.
@The value indicating whether to flip the axes so that X is vertical and Y is horizontal.
=The series object that is selected.
@The SelectionMode value indicating whether or what is selected when the user clicks a series.
@The Stacking value indicating whether or how series objects are stacked or plotted independently.
@The size of the symbols used to render data points in Scatter, LineSymbols, and SplineSymbols charts, in pixels. You can override this at the series level.
@The value to display in the ChartTooltip content property.
&The FlexChart.gotFocus event handler.
&The FlexChart.lostFocus event handler.
&The FlexChart.rendering event handler.
&The FlexChart.rendered event handler.
&The FlexChart.seriesVisibilityChanged event handler.
&The FlexChart.selectionChanged event handler.
The wj-flex-chart directive may contain the following child directives: wijmo.angular.chart.WjFlexChartAxis, wijmo.angular.chart.WjFlexChartSeries, wijmo.angular.chart.WjFlexChartLegend and wijmo.angular.chart.WjFlexChartDataLabel.