Vue component that encapsulates the FlexChart control.
The example below shows how to instantiate and initialize a FlexChart control using Vue markup:
<wj-flex-chart
:items-source="data"
binding-x="country"
:header="props.header"
:footer="props.footer">
<wj-flex-chart-legend :position="props.legendPosition">
</wj-flex-chart-legend>
<wj-flex-chart-axis wj-property="axisX" :title="props.titleX">
</wj-flex-chart-axis>
<wj-flex-chart-axis wj-property="axisY" :title="props.titleY">
</wj-flex-chart-axis>
<wj-flex-chart-series name="Sales" binding="sales">
</wj-flex-chart-series>
<wj-flex-chart-series name="Expenses" binding="expenses">
</wj-flex-chart-series>
<wj-flex-chart-series name="Downloads" binding="downloads">
</wj-flex-chart-series>
</wj-flex-chart>
The code sets the itemsSource property to a collection that contains the chart data and the bindingX property to the data property that contains the chart X values. It also sets the chart's header and footer properties to define titles to show above and below the chart.
The wj-flex-chart-legend and wj-flex-chart-axis components are used to customize the chart's legend and axes.
Finally, three wj-flex-chart-series components are used to specify the data properties to be shown on the chart.
Vue component that encapsulates the FlexGrid control.
The example below shows how to instantiate and initialize a FlexGrid control using Vue markup:
<wj-flex-grid :items-source="data"> <wj-flex-grid-column binding="name" header="Name"> </wj-flex-grid-column> <wj-flex-grid-column binding="sales" header="Sales" format="c0"> </wj-flex-grid-column> <wj-flex-grid-column binding="expenses" header="Expenses" format="c0"> </wj-flex-grid-column> <wj-flex-grid-column binding="active" header="Active"> </wj-flex-grid-column> <wj-flex-grid-column binding="date" header="Date"> </wj-flex-grid-column> </wj-flex-grid>
The code sets the itemsSource property to a collection that contains the grid data, then specifies the columns to display using wj-flex-grid-column components.
Vue component that represents a FlexGridFilter in a FlexGrid control.
The example below shows how to instantiate and initialize a FlexGrid control with a filter using Vue markup:
<wj-flex-grid :items-source="data"> <wj-flex-grid-filter></wj-flex-grid-filter> </wj-flex-grid>
Vue filter that applies globalized formatting to dates and numbers.
For example, the code below uses the wj-format filter to format a number as a currency value and a date as a short date using the current Wijmo culture:
<p>value: {{ theAmount | wj-format('c') }}</p>
<p>date: {{ theDate | wj-format('d') }}</p>Vue component that represents a GroupPanel control.
The example below shows how to instantiate and connect a GroupPanel and a FlexGrid in Vue:
<wj-group-panel id="thePanel" placeholder="Drag columns here to create Groups"> </wj-group-panel> <wj-flex-grid id="theGrid" :items-source="data"> </wj-flex-grid>
var app = new Vue({
el: '#app',
// connect group panel and grid
mounted: function () {
var panel = wijmo.Control.getControl(document.getElementById('thePanel'));
var grid = wijmo.Control.getControl(document.getElementById('theGrid'));
panel.grid = grid;
}
});Vue component that includes a given HTML fragment into the document.
The wj-include component takes a src attribute that specifies a file to load and include into the document. For example:
<wj-popup control="modalDialog" :modal="true" :hide-trigger="None"> <wj-include src="includes/dialog.htm"></wj-include> </wj-popup>
Vue component that encapsulates the LinearGauge control.
The example below shows how to instantiate and initialize a LinearGauge control using Vue markup:
<wj-linear-gauge
:min="0" :max="1000" :step="50" :is-read-only="false"
format="c0" :thumb-size="20"
:show-ranges="false"
:value="sales"
:value-changed="salesChanged">
<wj-range wj-property="face" :thickness="0.5">
</wj-range>
<wj-range wj-property="pointer" :thickness="0.5">
</wj-range>
<wj-range :min="0" :max="333" color="red">
</wj-range>
<wj-range :min="333" :max="666" color="gold">
</wj-range>
<wj-range :min="666" :max="1000" color="green">
</wj-range>
</wj-linear-gauge>
The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it binds the gauge's value property to a sales variable in the controller.
Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.
Vue component that encapsulates the RadialGauge control.
The example below shows how to instantiate and initialize a RadialGauge control using Vue markup:
<wj-radial-gauge
:min="0" :max="1000" :step="50" :is-read-only="false"
format="c0" :thumb-size="12" :show-text="Value"
:show-ranges="false"
:value="sales"
:value-changed="salesChanged">
<wj-range wj-property="face" :thickness="0.5">
</wj-range>
<wj-range wj-property="pointer" :thickness="0.5">
</wj-range>
<wj-range :min="0" :max="333" color="red">
</wj-range>
<wj-range :min="333" :max="666" color="gold">
</wj-range>
<wj-range :min="666" :max="1000" color="green">
</wj-range>
</wj-radial-gauge>
The code min, max, step, and isReadOnly properties to define the range of the gauge and to allow users to edit its value. Next, it binds the gauge's value property to a sales variable in the controller.
Then it sets the format, thumbSize, and showRanges properties to define the appearance of the gauge. Finally, the markup sets the thickness of the face and pointer ranges, and extra ranges that will control the color of the value range depending on the gauge's current value.
Wijmo interop module for Vue 2.
This module provides Vue 2 components that encapsulate Wijmo controls.
To use it, your application must include references to the Vue 2 framework (RC6 or later), as well as the regular Wijmo CSS and js files.
To add Wijmo controls to Vue pages, include the appropriate tags in your HTML files. For example, the code below adds an InputNumber control to a Vue page:
// Wijmo event handler // update "sales" value to match the InputNumber value function salesChanged(sender, eventArgs) { this.sales = sender.value; }The example illustrates the following important points:
:min="0").:value-changed="salesChanged").All Wijmo Vue components include an "initialized" event that is raised after the control has been added to the page and initialized. You can use this event to perform additional initialization in addition to setting properties in markup. For example:
// Vue application var app = new Vue({ el: '#app', methods: { initGrid: function(s, e) { // assign a custom MergeManager to the grid s.mergeManager = new CustomMergeManager(s); } } });