kendo ui - Based on selection is it possible to change value axis -
i have requirement i.e based on tree view check box selection value axis need update.i using 4 check boxes 4 value axis.when ever check first item corresponding value axis should changed .3 other axis should in invisible state.
here tried of code , updated .
code:
<div id="treeview"></div> <div id="example" class="k-content"> <div class="chart-wrapper"> <div id="chart"></div> </div> </div> var valueaxes = [ { name: "km",visible:false, title: { text: "km" ,visible:false} }, { name: "miles per gallon", title: { text: "miles per gallon" } }, { name: "miles", title: { text: "miles " } }, { name: "liters per 100km", title: { text: "liters per 100km" } } ]; function createchart() { $("#chart").kendochart({ legend: { position: "top" }, series: [{ type: "column", data: [20, 40, 45, 30, 50], stack: true, name: "on battery", color: "#003c72" }, { type: "column", data: [20, 30, 35, 35, 40], stack: true, name: "on gas", color: "#0399d4" }, { type: "area", data: [30, 38, 40, 32, 42], name: "mpg", color: "#642381" }, { type: "area", data: [7.8, 6.2, 5.9, 7.4, 5.6], name: "l/100 km", color: "#e5388a" }], valueaxes:valueaxes, categoryaxis: { categories: ["mon", "tue", "wed", "thu", "fri"], axiscrossingvalues: [0, 0, 10, 10] } }); } $(document).ready(function() { createchart(); $("#treeview").kendotreeview({ checkboxes: { checkchildren: true }, datasource: [{ id: 1, text: "value axis", expanded: true, items: [{ id: 2, text: "km" }, { id: 3, text: "miles per gallon" }, { id: 4, text: "miles " }, { id: 5, text: "liters per 100km" }] }] }).data("kendotreeview"); $("#treeview").on("change", function (e) { var chart = $("#chart").data("kendochart"); var checkedseries = []; $("#treeview").find(":checked").each(function() { var nodetext =$(this).parent().parent().text(); $.each(valueaxes, function(index, valueaxes) { if (valueaxes.name == nodetext) { checkedseries.push(valueaxes); checkedseries.visible==="true"; checkedseries.title.visible===true; } }); }); chart.options.valueaxes = checkedseries; chart.refresh(); }); }); jsbin: value axis change
yes , possible bind , unbind value axis , series @ time.
change scripts below
var valueaxes = [ { name: "km", labels: { format: "{0}" }, min: 0, max: 9, title: { text: "km" } }, { name: "miles per gallon", labels: { format: "{0}%" }, min: 0, max: 5, title: { text: "miles per gallon" } }, { name: "miles", labels: { format: "{0}%" }, title: { text: "miles " } }, { name: "liters per 100km", min: 0, max: 1, title: { text: "liters per 100km" } }]; var series = [{ type: "column", axis: "km", data: [20, 40, 45, 30, 50], stack: true, name: "km", color: "#003c72" }, { type: "column", data: [20, 30, 35, 35, 40], axis: "miles per gallon", stack: true, name: "miles per gallon", color: "#0399d4" }, { type: "column", data: [30, 38, 40, 32, 42], axis: "miles", name: "miles", color: "#642381" }, { type: "column", axis: "liters per 100km", data: [7.8, 6.2, 5.9, 7.4, 5.6], name: "liters per 100km", color: "#e5388a" }]; function createchart(inputvalueaxes, inputseries) { $("#chart").kendochart({ legend: { position: "top" }, series: inputseries, valueaxes: inputvalueaxes, categoryaxis: { categories: ["mon", "tue", "wed", "thu", "fri"], axiscrossingvalues: [0, 0, 10, 10] } }); } $(document).ready(function () { createchart(valueaxes, series); $("#treeview").kendotreeview({ checkboxes: { checkchildren: true }, datasource: [{ id: 1, text: "value axis", expanded: true, items: [{ id: 2, text: "km" }, { id: 3, text: "miles per gallon" }, { id: 4, text: "miles " }, { id: 5, text: "liters per 100km" }] }] }).data("kendotreeview"); $("#treeview").on("change", function (e) { var chart = $("#chart").data("kendochart"); var checkedseries = []; var checkedaxes = []; if ($("#treeview").find(":checked").length !== 0) { $("#treeview").find(":checked").each(function () { var nodetext = $(this).parent().parent().text(); $.each(valueaxes, function (index, valueaxes) { if (valueaxes.name == nodetext.trim()) { checkedaxes.push(valueaxes); checkedaxes.visible = true; } }); $.each(series, function (index, series) { if (series.name == nodetext.trim()) { checkedseries.push(series); } }); }); createchart(checkedaxes, checkedseries); } else { createchart(checkedaxes, checkedseries); } }); });
Comments
Post a Comment