Reputation: 419
I wonder how can I achieve such a goal: when I change the choice from the select combox, the data distribution in the pie gragh will change correspondingly.
The HTML code snippet:
<oj-option value="flow1">Flow1</oj-option>
<oj-option value="flow2">Flow2</oj-option>
<oj-option value="flow3">Flow3</oj-option>
The JS code snippet:
var barSeries = [{name: "field1", items: [90, 34]},
{name: "field2", items: [55, 30]},
{name: "field3", items: [36, 50]},
{name: "field4", items: [22, 46]},
{name: "field5", items: [60, 46]}];
self.barSeriesValue = ko.observableArray(barSeries);
To be simplified, the problem should be: how to obtain oj-option value from HTML and use it as a condition in JS to change the variable barSeries ?
Upvotes: 2
Views: 1679
Reputation: 3959
Like this:
Provide an on-value-changed
attribute. Its value will be the name of a function that you will use to update the chart when the value changes, say 'updateChart':
<oj-select-one id="basicSelect" value="{{currentFlow}}" on-value-changed="
[[updateChart]]" >
<oj-option value="flow1">Flow1</oj-option>
<oj-option value="flow2">Flow2</oj-option>
<oj-option value="flow3">Flow3</oj-option>
</oj-select-one>
Inside the 'updateChart' function, get the current value of currentFlow
observable, and change the value of your observableArray barSeriesValue
accordingly.
self.updateChart = function(){
if (self.currentFlow() == 'flow1'){
self.barSeriesValue.push({name:'field6',items:[70,22]});
}
if (self.currentFlow() == 'flow2'){
self.barSeriesValue.pop();
}
if (self.currentFlow() == 'flow3'){
self.barSeriesValue.push({name:'field6',items:[30,52]});
}
}
Upvotes: 4
Reputation: 605
This one should be pretty straight forward. In the on-value-change event handler, get the value of the select component and use it to reset the value of the barSeries array.
The barSeries array is used as the basis for the observable that feeds the chart. Once you change the array, the chart will auto-update to reflect the new data.
Since it appears you are using the new JET 4.0.0 custom element syntax, the on-value-change event now looks like this (this was the optionChange event option in previous versions of JET):
<oj-select-one id="select" on-value-changed="[[valueChangedHandler]]"
style="max-width:20em">
<oj-option value="Internet Explorer">Internet Explorer</oj-option>
<oj-option value="Firefox">Firefox</oj-option>
<oj-option value="Chrome">Chrome</oj-option>
<oj-option value="Opera">Opera</oj-option>
<oj-option value="Safari">Safari</oj-option>
</oj-select-one>
Notice the "on-value-change" attribute that is passed an event handler method.
Upvotes: 2