I am using kendo-charts for the graphs in my project and, I understood it has default colors each streams .Issue is when i set a color to those streams still it shows the default color
html
<kendo-chart [categoryAxis]="{ categories: categories }" #primeChart [transitions]="transitions">
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let item of series1" type="line" [data]="item.data" [name]="item.name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
ts file
this.series1= [{
name: "Stream 1",
streamId: 1,
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855, 1.111,2.222],
color:"green"
}
, {
name: "Stream 2",
streamId: 2,
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3, 1.111,3.333],
color:"green"
}]
scss
#import url("~#progress/kendo-theme-default/dist/all.css");
#import "theme";
#import "material-overrides";
#import "kendo-overrides";
Found it my self
add a view child to the chart element.( as already appears in html)
#ViewChild('primeChart') primeChart: any;
in the data setting method catch the primeChart element using this.primeChart
this.primeChart.theme.seriesColors=["green","red","green","red"]
this overrides the default series colors successfully
Related
I know tis might be a silly problem but I'm not sure how to frame this line of code to do what I need. I'm using Vue CLI and I have a some objects within an array in my data. one of those objects have several image links with key that goes -> img1 : ./link, img2: ./link2. In my function i need to change the target elements source to the next image i.e from img1 to img2 where I have a counter that stores the number that i want img to change to. however the results only show NaN.
here is my some HTML:
<img #click="storyboard" v-else :src="slide.img1" />
<div class="counter hide">
<p>{{ counter }} / 5</p>
</div>
here is some JS
data() {
return {
slides: [
{ title: 'Landing Page', img1: require("../assets/wadah/proposal.mp4"), info: "Wadah Archive is an alternative museum where everyday artefacts are given meaning through crowdsourced nostalgia. The online archive stresses on the idea that the stories and conversations about the artefact by people visiting the archive should be a part of the artefact itself. It is a reflection on traditional methods of preserving and displaying objects through proposing an alternative navigation system by translating physical artefacts into a digital space.", makeSmall: false
}, {
title: "Interacting with 3D objects", img1: require("../assets/wadah/pinStill.jpg"), info: "dummydata", makeSmall: false
}, {
title: "Designing Pins and Signage", img1: require("../assets/wadah/pins.png"), info: "dummydata", makeSmall: true
},{
title: "Home and Index Navigation", img1: require("../assets/wadah/home1.jpg"), img2: require("../assets/wadah/home3.jpg"), img3: require("../assets/wadah/home2.jpg"), img4: require("../assets/wadah/index.jpg"), img5: require("../assets/wadah/index2.jpg"), info: "dummydata", makeSmall: false
},{
title: "User Flow", img1: require("../assets/wadah/wireflow.png"), info: "dummydata", makeSmall: false
},
],
visibleSlide: 0,
counter: 1
}
}
methods: {
storyboard(event) {
if (this.visibleSlide === 3) {
let ele = event.target
this.counter++
ele.src = this.slides[3].img + this.counter
// console.log(this.slides[3].img + 2)
// console.log(ele.src, this.counter)
}
}
}
const obj = {
title: "Home and Index Navigation",
img1: "../assets/wadah/home1.jpg",
img2: "../assets/wadah/home3.jpg",
img3: "../assets/wadah/home2.jpg",
img4: "../assets/wadah/index.jpg",
}
let counter = 2
console.log("Incorrect:", obj.img + counter) // obj.img does not exists = undefined
console.log("Correct:", obj["img"+counter])
I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here
I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.
I have setup a JSBIN example for the same here:
When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example
Piece of cake. Demo and code:
<script type="text/javascript">
Morris.Bar({
element: 'bar-example',
data: [
{y: '2006',a: 100,b: 90},
{y: '2007',a: 75,b: 65},
{y: '2008',a: 50,b: 40},
{y: '2009',a: 75,b: 65},
{y: '2010',a: 50,b: 40},
{y: '2011',a: 75,b: 65},
{y: '2012',a: 100,b: 90}
],
hoverCallback: function(index, options, content, row) {
return(content);
},
xkey: 'y',
ykeys: ['a', 'b'],
stacked: true,
labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>
ARGUMENTS:
1: index: it represents record number i.e. from 0 to n records.
2: content: this is default hover div.
3: option : you data is inside this, before return(content);. do console.log(options) to view details.
4: row : to see the use of row below is an example.
hoverCallback: function (index, options, content, row) {
console.log(row);
var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
return hover;
},
UPD:
For flying label, you need to add Morris CSS stylesheet to the code - demo
IMPORTANT NOTE
Flying labels works since version 0.4.3
http://jsbin.com/finuqazofe/1/edit?html,js,output
{ y: ..., x: ..., label: "my own label"},'
...
Morris.Line({
hoverCallback: function(index, options, content) {
var data = options.data[index];
$(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
},
...
other params
});
I am using Sencha Touch charts 1.0.0 for my project. I would like to add values on each point in my line chart (as in image). I tried the same approach in this question for column chart, but it didn't work out.
I had the same problem with you. But i find a solution instead for that. You can add marker at each node of line and when you click on marker a popup will show detail information as you want. This's my code may help you :
-Add marker in cofig of series :
type: 'line',
title: 'Clickeds : ' + total[4] + ' ( ' + Math.round(arrInfo[4]) + '% )',
highlightCfg: { scale : 0.7 },
xField: 'Date', yField: 'Clks',
style : {
stroke: 'rgb(50, 185, 150)',
miterLimit : 3,
lineCap: 'miter',
lineWidth: 2
}
,
marker:{
type: 'image',
src: 'resources/images/square.png',
width: 24,
height: 24,
x: -12,
y: -12,
scale: 0.5,
fx: {
duration: 200
}
}
Handle event when you click on node, you add listeners to config of chart : `listeners: {
itemtap: function( series, item, event, eOpts ){
//handle your code here.
}`
Regards,
(Sorry for bad english.)