I'm trying to customize the category field text of my Kendo Chart.
The text is too long so I wanted to make part of it bold to distinguish what was written
The Chart looks like this: What I have now
But what I want should look like this: Expected result
My code for the chart looks like this:
var seriesConfig = [{
field: "Duration",
categoryField: "AlarmDescription",
axis: "duration",
name: textJSLayout["Duration"],
type: seriesType,
tooltip: {
template: "${series.name} : #=mpm.functionHelper.time.getFormattedTime(value)#" +
"<br> #=textJS['PercentageString']# : ${dataItem.Pareto} %" +
"<br> #=textJSLayout['Occurrences']# : ${dataItem.Occurrences} "
},
labels: {
template: "${dataItem.Occurrences}",
visible: true
}
}];
I also tryed using a template but it looks like there is no such a thing for the categoryField...
Any solutions?
The only way that I can see you doing this would be to leverage the categoryAxis' Label's Visual property: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels#categoryaxislabelsvisual
You would do this by appending the text with a new kendo.drawing.Text with bolded font. See this example: https://dojo.telerik.com/oGulOZim
The issue that you will run into is when to break the bolding font and when to start the normal font. That will need to take some trial and error on your part.
Related
I'm trying to format text in a cell in w2ui grid using render option of a field in order to display text on
multiple lines.
I tried something like that but doesn't work, the text continue to stay on one line
{
field: 'description',
render: function(record){
var html;
html = '<div style=" overflow-wrap:anywhere;overflow-wrap:break-word;margin:2px; width:60px; heigth:60px" >'+record.description+'</div>';
return html;
},
text: 'Description',
size: '40%'
}
Needed a searchable select dropdown box and found a TomSelect library that has it all set up. I added in the required library. More specifically, this solution here.
<link href="https://cdn.jsdelivr.net/npm/tom-select#2.0.0-rc.4/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select#2.0.0-rc.4/dist/js/tom-select.complete.min.js"></script>
added in the JS code
new TomSelect("#select-state",{
create: false,
sortField: {
field: "text",
direction: "asc"
}
});
and everything works fine as intended until I realised that TomSelect filters out my text in said HTML dropdown selection.
If one of my dropdown selection was meant to say: 1 - this is option "hello" then after implementing the TomSelect, it says instead this is option, I assume filtering out elements before and after keys like - and ".
Would love to know to disable this filter, or at least modify it so that the whole text of the option is displayed otherwise the point of a dropdown is sort of defeated.
I was thinking of maybe tackling the attributes such as field: "text" but I have no idea where to begin or what other options could be. What would these SoftField option be?
Did you try to render your list with escaping?
new TomSelect("#select-state",{
create: false,
sortField: {
field: "text",
direction: "asc"
},
optionClass: 'option',
itemClass: 'item',
render:{
option: function(data, escape) {
return '<div>' + escape(data.text) + '</div>';
},
item: function(data, escape) {
return '<div>' + escape(data.text) + '</div>';
},
dropdown:function(){
return '<div></div>';
},
},
});
I have created a Stockchart using Amcharts available in https://codepen.io/Volabos/pen/PyzmYd
Where everything looks good, I however want to get rid of the Thousand-k suffix from Y-axis lables as well as from Baloon, instead I desire to have Thousand seperator + rounded value upto 2.
Is there any possibility to achieve such?
Besides, I also want to set various CSS properties of the div class = 'Right' dynamically based on the value of "value2" e.g. if its value is greater than 500 then Font-color would be green otherwise red.
Any pointer would be highly appreciated.
For the y-axis, change usePrefixes in your panelSettings to false:
"panelsSettings": {
"usePrefixes": false
},
For the balloon, implement balloonFunction to customize the formatting:
stockGraphs: [{
"id": "g1",
...
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
return "<div>Value<br/>" + Math.round(value).toLocaleString('en-us'); + "</div>";
}
}]
Updated pen
EDIT
Here is the updated pen to include dynamic balloon colors based on value2. The new balloonFunction looks like this:
function(graphDataItem, graph) {
var value = graphDataItem.values.value;
var value2 = graphDataItem.dataContext.rawData[0].value2;
return "<div style='color:" + (value2 > 500 ? 'green' : 'red') + "'>Value<br/>" +
Math.round(value).toLocaleString('en-us'); +
"</div>";
}
You can clean this up with string interpolation and CSS classes as well, but this is basically the technique.
I have a data set which looks something like this.
var toolTip = [ ["IN001", "IN002"], "IN003", "IN004", ["IN005", "IN006", "IN007"] ];
I have a scatter plot which uses these tooltips to show data in it.
{
type: 'scatter',
name: 'incidents',
yAxis: 1,
data: [ [0,100],[1,100],[2,100],[3,100] ],
tooltip: {
pointFormatter: function(){
return "Incident " + toolTip[this.series.data.indexOf( this )] ;
}
}
},
Now this shows the data in a line in tooltip. I want a next line in case there is more than one data in a tooltip. For example
IN0001
IN0002
instead of IN0001, IN0002.
How do i get the next line. I don't know how to parse this data in this case.
One more doubt i have is, Each name should be a hyperlink.
How do i make every word in the toolTip array to appear as a link in the tooltip?
Any help is appreciated.
Here is a working model of the following.
jsFiddle
You can change your pointFormatter function so you will meet your requirements. You can add breaking lines using 'br' and you can add links using 'a' like in normal HTML. You can use Highcharts.each() for iterating over your array and adding next elements to your string.
pointFormatter: function() {
var string = '';
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
string += '' + p + '<br>'
})
return "Incident<br>" + string + "<br />";
}
Here you can see an example how it can work: http://jsfiddle.net/o2zmLngr/5/
I have the following:
var panel = headerPanel.add({
id: 'recentcommands_button_id',
xtype: 'button',
text: "Recent Commands",
tooltip: "Sample Tooltip Text"
});
Followed later on by:
Ext.getCmp('recentcommands_button_id').tooltip = "TEST";
Which sets the tooltip value properly if I check the button's properties, but which does not actually change the value on the screen.
I tried using:
Ext.getCmp('recentcommands_button_id').tooltip.update("TEST");
This did not work either.
Any ideas?
You can use setTooltip method:
Ext.getCmp('recentcommands_button_id').setTooltip("TEST");