When user click on Hide Laptop stacked bar radio button, the stacked bar displayed for Laptop(blue color) should be hidden and when clicked on ALL radio button all bars should be displayed. But currently when i click on Hide Laptop stacked bar, the Shipping data is not dispalyed and even the Legend name for shipping is showing wrong when clicked on ALL radio button after Hide Laptop radio button.
Please find the demo here
js code:
angular.module('myApp', ['googlechart'])
.controller('myController', function($scope) {
var chart1 = {};
var variableCol = {
id: "laptop-id",
label: "Laptop",
type: "number"
};
chart1.type = "ColumnChart";
chart1.displayed = false;
var valueSelected;
$scope.newValue = function(value) {
console.log(value);
console.log(chart1.data.cols.length);
valueSelected = value;
if(value == 'few' && chart1.data.cols.length == 5) {
alert("Laptop data should not be shown" );
chart1.data.cols.pop();
} else {
chart1.data.cols.push(variableCol);
}
}
//if the ALL radio button is selected all the stacked bars should be shown
//if SDL radio button is selected, show only server,desktop,laptop but onmouse over show the shipping details tooo
chart1.data = {
"cols": [{
id: "month",
label: "Month",
type: "string"
},variableCol,
{
id: "desktop-id",
label: "Desktop",
type: "number"
}, {
id: "server-id",
label: "Server",
type: "number"
}, {
id: "cost-id",
label: "Shipping",
type: "number"
}],
"rows": [{
c: [{
v: "January"
}, {
v: 19,
f: "42 items"
}, {
v: 12,
f: "Ony 12 items"
}, {
v: 7,
f: "7 servers"
}, {
v: 4
}]
}, {
c: [{
v: "February"
}, {
v: 13
}, {
v: 1,
f: "1 unit (Out of stock this month)"
}, {
v: 12
}, {
v: 2
}]
}, {
c: [{
v: "March"
}, {
v: 24
}, {
v: 5
}, {
v: 11
}, {
v: 6
}
]
}]
};
chart1.options = {
"title": "Sales per month",
"isStacked": "true",
focusTarget: 'category',
"fill": 20,
"displayExactValues": true,
colors: ['blue', 'green', 'pink', 'brown'],
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 10
}
},
"hAxis": {
"title": "Date"
}
};
$scope.myChart = chart1;
}).value('googleChartApiConfig', {
version: '1.1',
optionalSettings: {
packages: ['bar'],
language: 'en'
}
});
You are calling array.pop, which removes the last element from the array. The laptop element is at position 1. Here's a snippet of how you would search for the variableCol index, and then splice the array removing that element. That's the safest way to do this since you'll ensure you are finding that particular column.
So far, these solutions are not solving for the data
Without regard for colors
if(value == 'few' && chart1.data.cols.length == 5) {
//alert("Laptop data should not be shown" );
var idx = chart1.data.cols.indexOf(variableCol);
chart1.data.cols.splice(idx, 1);
console.log("var col at " + idx);
}
Here's a working plnkr
Keeping Blue Color for laptop
This version will keep the laptop being blue (position does change though).
if (value == 'few' && chart1.data.cols.length == 5) {
//alert("Laptop data should not be shown" );
var colIdx = chart1.data.cols.indexOf(variableCol);
chart1.data.cols.splice(colIdx, 1);
var colorIdx = chart1.options.colors.indexOf("blue");
chart1.options.colors.splice(colorIdx, 1);
} else {
chart1.data.cols.push(variableCol);
chart1.options.colors.push("blue");
}
Related
Here is an example of google column chart built using static data : https://plnkr.co/edit/WBApWlwTIDa7HjOQMyxe?p=preview
I want to draw the chart dynamically.One issue i'm facing is how to dynamically assign the value for ticks:[..]
Please find the updated plunker https://plnkr.co/edit/EGzl2XdQfuMWldzPyfr6?p=preview.
I tried to assign the values for ticks:[..] later by creating a varibale dynamicTicks but it is not working .
PS: Reference tooltip is not shown as expected when customized
--EDITED--
Below is the updated code suggested by #WhiteHat in below thread.
Below is the js code to dynamically get the data and display the chart.Issue is with the below code the h-axis dynamicTrick is not displayed, on h-axis it is showing the values given in f: property of {"v": i, "f": hAxisValue}
app.controller('myController', ['$scope', '$uibModal', 'MyService', function ($scope, $uibModal, MyService) {
$scope.chart = {};
$scope.chart.type = "ColumnChart";
$scope.chart.displayed = false;
var dynamicTicks = [];
$scope.chart.options = {
focusTarget: 'category',
"fill": 20,
"displayExactValues": true,
"isStacked": 'true',
tooltip: {text: 'value',textStyle: {fontName: '"Arial"'}},
hAxis: {
titleTextStyle: {bold: 'true'},
slantedText: false,
ticks: dynamicTicks
},
};
$scope.chart.view = {
columns: [0, 1, 2, 3]
};
$scope.chart.data = {
"cols": [
{id: "label", label: "Label", type: "string"},
{id: "count", label: "Count", type: "number"},
{id: "pizza", label: "Pizza", type: "number"},
{id: "softDrink", label: "SoftDrink", type: "number"},
]
};
$scope.loadMyChart = function () {
MyService.getChartData().then(
function (response) {
$scope.myResponse= response;
//check for error
var count = 0;
var pizza = 0;
var softDrink = 0;
var myRows = [];
$scope.chart.data.rows = {};
var i = 0; var cData=[];
angular.forEach($scope.myResponse, function (value, key) {
count = value.myData.count;
pizza = value.myData.pizza;
softDrink = value.myData.softDrnk;
hAxisValue = value.myData.title;
cData = {
"c": [{"v": i, "f": hAxisValue}, {"v": passsed},
{"v": failed},
{"v": notExecute}, {"v": key}]
};
myRows.push(cData); i++;
});
alert("cData.length " + i);
for (var j = 0; j < i; j++) {
alert("in for" + j + "Series" + (j+1)); //This alert is being executed..
dynamicTicks.push({
v: j, /*cData[j].c[0].v */
f: 'Series ' + (j + 1)
});
}
$scope.chart.data.rows = weekRows;
},
}
$scope.loadMyChart();
}]);
When used the statement cData[j].c[0].v, following error is displayed on browser console and no chart is shown on UI.
angular.min.js:sourcemap:119 TypeError: Cannot read property 'c' of undefined
wouldn't you build dynamic ticks where the chart data and options are created?
something like...
var createChart = function (rows, label) {
return {
"type": "ColumnChart",
"data": {
"cols": [
{"id": label, "label": label, "type": "number"},
{"id": "count", "label": "count", "type": "number"},
{"id": "pizza", "label": "Pizza", "type": "number"},
{"id": "softdrink", "label": "Softdrink", "type": "number"}
],
"rows": rows
},
"options": {
"title": label,
"isStacked": "true",
focusTarget: 'category',
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
slantedText: false,
"ticks": dynamicTicks,
},
tooltip: {
text: 'value'
}
}
}
};
var data = [
{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
{"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]},
{"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]}
];
var dynamicTicks = [];
for (var i = 0; i < data.length; i++) {
dynamicTicks.push({
v: data[i].c[0].v,
f: 'Series ' + (i + 1)
});
}
$scope.myChart = createChart(data, "Data Series");
I have two Select dijits that are based off the same data store. The first dijit is the required response and the second dijit is an optional response. For the second dijit, I want to add the additional item "None" to the top of the list. However, when I do that, I cannot select the second item in the list. In this JSBin, if you select "General lakebed mapping" in the second dijit, the returned value is the added item "None".
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory",
"dojo/domReady!"
], function (Select, ObjectStore, Memory) {
var data = [
{ id: 0, label: 'General lakebed mapping' },
{ id: 1, label: 'Bathymetry/Digital Elevation Model' },
{ id: 2, label: 'Ferrous object detections/magnetic anomalies' },
{ id: 3, label: 'Ground-truth data' },
{ id: 4, label: 'Lakebed color' },
{ id: 5, label: 'Lakebed surface type, hardness/smoothness/slope' },
{ id: 6, label: 'Sub-bottom geology' }
];
var store = new Memory({
data: data
});
var os = new ObjectStore({ objectStore: store });
var s = new Select({
store: os,
sortByLabel: false
}, "target");
s.startup();
data.unshift({ id: -1, label: 'None' })
store.setData(data);
var s1 = new Select({
store: os,
sortByLabel: false
}, "target1");
s1.startup();
s1.on("change", function () {
console.log("my value: ", this.get("value"))
});
})
Do not use the value 0 as an id. It is a falsey value in JavaScript and I suspect that the Select dijit source treats it somewhere as false and fails. Just use another value in its place.
I came across a datamap example here and trying to edit it. I need to change the state color depending on the value, ranging from dark blue to light blue.
At the moment,
fills: {
'lightBlue': '#cc4731',
'justBlue': '#306596',
'deepBlue': '#667faf',
'mediumBlue': '#a9c0de',
'deepBlue': '#ca5e5b',
'defaultFill': '#eddc4e'
}
And the data has,
data: {
AZ: {
fillKey: 'lightBlue',
userVisits: 5
},
CO: {
fillKey: 'justBlue',
userVisits: 5
},
DE: {
fillKey: 'deepBlue',
userVisits: 32
},
....
}
But is there to generate shades of blue depending on the userVisits?
I don't think there is a an option to put logic in the fillkey selection. I'd recommend processing the data to assign a fillkey before giving it to Datamaps.
I made a codepen to demonstrate.
Also, the "fills" data has duplicate keys and hex values that do not match the color described.
var stateData = {
AZ: {
userVisits: 5
},
CO: {
userVisits: 15
},
DE: {
userVisits: 32
}
}
function addFillKey(mapData){
for (var mapDatum in mapData){
var userVisits = mapData[mapDatum].userVisits;
if(userVisits < 10){
mapData[mapDatum].fillKey = "lightBlue"
}else if(userVisits < 20){
mapData[mapDatum].fillKey = "justBlue"
}else{
mapData[mapDatum].fillKey = "mediumBlue"
}
}
}
addFillKey(stateData);
var map = new Datamap({
element: document.getElementById('container'),
scope: 'usa',
fills: {
'lightBlue': '#cc4731',
'justBlue': '#306596',
'deepBlue': '#667faf',
'mediumBlue': '#a9c0de',
'deepBlue': '#ca5e5b',
'defaultFill': '#eddc4e'
},
data: stateData
});
I am using KendoUI Scheduler control and here is initialization code
$("#Scheduler").kendoScheduler({
dataSource: [],
selectable: true,
height: 500,
editable: false,
eventTemplate: $("#event-template").html(),
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
resources: [
{
field: "resourceviewid",
name: "ResourceViews",
dataColorField: "key",
dataSource: [
{ text: "Appointments", value: 1, key: "orange" },
{ text: "Delivery Specialist", value: 2, key: "blue" },
{ text: "Orientation Specialist", value: 3, key: "green" }
]
}
],
group: {
resources: ["ResourceViews"],
orientation: "horizontal"
}
});
Here "Appointments" group is default, it will be available always
I have check box in my screen
<div id="divResourceView">
<label><input checked type="checkbox" value="1" />Delivery Specialist</label>
<label><input checked type="checkbox" value="2" />Orientation Specialist</label>
</div>
On change event I wrote below code to get selected values from checkbox and updating GROUP datasource of KendoUI scheduler as below
$("#divResourceView :checkbox").change(function (e) {
var checked = $.map($("#divResourceView :checked"), function (checkbox) {
return parseInt($(checkbox).val());
});
});
var scheduler = $("#Scheduler").data("kendoScheduler");
var arrayOfStrings = checked.toString().split(",");
for (var i = 0; i < arrayOfStrings.length; i++)
{
if(arrayOfStrings[i] == 1)
{
var data = [{ text: "Delivery Specialist", value: 2, color: "blue" }];
scheduler.resources[1].dataSource.data(data);
}
if (arrayOfStrings[i] == 2) {
var data = [{ text: "Orientation Specialist", value: 3, color: "green" }];
scheduler.resources[2].dataSource.data(data);
}
}
scheduler.refresh();
But it removes all groups and add only one. I want to see both groups when arrayOfStrings has values "1,2",
I can see all groups during initialization But it disappears when i check the check box.
Images for reference
During Initialization
After
As you can see clearly, Delivery Specialist is missing in scheduler control
Found some link: http://www.telerik.com/forums/add-filter-to-resource-datasource
But not sure what they talking about? seems like refresh issue.
I have done this I believe you're right and your issue is to do with refreshing, I use the following to refresh it.
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.view(scheduler.view().name);
hope this helps through it is stupidly late (I'm currently looking up how to do this lazerly
Working from the KO example found here: http://knockoutjs.com/examples/grid.html,
I want to add a drop-down to select different page sizes (e.g. 4, 8, 12 items per page) and update the page grid upon changing the drop-down.
tried a bunch of things and I know I am missing something to get this to work. Thanks in advance for any help or a link to an existing solution.
What I sort of have now:
=== View ===
<div data-bind='simpleGrid: gridViewModel'> </div>
<select class="form-control" name="displayCount" id="displayCount" data-bind="value: valueDisplayCount;">
<option value="4">4</option><option value="8">8</option><option value="16">16</option>
</select>
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
Jump to first page
</button>
==== View Model =====
$( document ).ready(function(){
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
this.valueDisplayCount = ko.observable(4);
this.sortByName = function() {
this.items.sort(function(a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function() {
this.gridViewModel.currentPageIndex(0);
};
this.valUpdDisplayCount= function(){
alert($('#displayCount').val());
this.gridViewModel.pageSize(6);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: this.valueDisplayCount
});
};
ko.applyBindings(new PagedGridModel(initialData));
});
JSFiddle:
http://jsfiddle.net/RNunc/1/
You would need to tweak the simplegrid code to look for an observable for pageSize. The updates could look like:
ko.simpleGrid = {
// Defines a view model class you can use to populate a grid
viewModel: function (configuration) {
this.data = configuration.data;
this.currentPageIndex = ko.observable(0);
this.pageSize = configuration.pageSize || ko.observable(5);
// If you don't specify columns configuration, we'll use scaffolding
this.columns = configuration.columns || getColumnsForScaffolding(ko.unwrap(this.data));
this.itemsOnCurrentPage = ko.computed(function () {
var size = ko.unwrap(this.pageSize);
var startIndex = size * this.currentPageIndex();
return ko.unwrap(this.data).slice(startIndex, startIndex + size);
}, this);
this.maxPageIndex = ko.computed(function () {
return Math.ceil(ko.unwrap(this.data).length / ko.unwrap(this.pageSize)) - 1;
}, this);
}
};
The simplegrid code is here: http://knockoutjs.com/examples/resources/knockout.simpleGrid.3.0.js
http://jsfiddle.net/rniemeyer/82MAR/