Telerik Forums
Kendo UI for jQuery Forum
0 answers
118 views
I tried to insert a Treemap for static data.. but while calling the function using the native element of html tag it says (...).kendoTreeMap is not a function. This error occurs even when I tried using jquery.

This is my code ...

Treemap.component.ts

 async initializaer(){
    this.treemap.nativeElement.kendoTreeMap({
      dataSource: {
        data: [{
          name: "Root",
          items: [{
            name: "Group A",
            value: 1,
            items: [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]
          }, {
            name: "Group B",
            value: 1,
            items: [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]
          }]
        }]
      },
      autoBind: false,
      valueField: "value",
      textField: "name",
      colors: [["#ff6666", "#ff0000"], ["#7fb17f", "#006400"]]
    });
Sriram
Top achievements
Rank 1
 updated question on 03 Apr 2023
1 answer
131 views

I want to be able to display the treemap value on the TreeMap chart.

My TreeMap Definition :


$("#treeMap").kendoTreeMap({
    dataSource: {
        data: [{
            items: [{
                name: "Seg1",
                value: 54
            },
            {
                 name: "Seg2",
                 value: 37
            },
            {
                 name: "Seg3",
                 value: 9
             }]
         }]
     },
     valueField: "value",
     textField: "name",
     colors: [["#FF7700","#FF77FF"]]
});

 

I want to be able to see the values also in the chart like Seg1 : 54 , Seg2 : 37 , Seg3 : 9 . How do I do that?

 

Georgi Denchev
Telerik team
 answered on 14 Oct 2022
1 answer
266 views

For the cell content in a treemap, in addition to the title text I would like to have a secondary piece of data that is centered in the cell. 

It would also be nice if the font size of the centered item changes with the size of the cell  (i.e. big cell == big font, small cell == small font)

Are either of those things possible?

 

Stamo Gochev
Telerik team
 answered on 25 Jun 2018
2 answers
122 views

Hi,

Would you please let me know if I can avoid the treemap animation on mouse hover. Normally the treemap tile shrinks a bit when user does a mouse enter. I just want to avoid that behaviour. I've attached the screenshot for reference.

 

Regards

Prasanth

prasanth
Top achievements
Rank 1
 answered on 24 Aug 2017
1 answer
126 views

Hello,

is it possible to set a C# list as data for the Kendo Treemap?

 

Thanks in advance.

 

 

Stefan
Telerik team
 answered on 14 Jul 2017
2 answers
75 views

I was using the MVC Sample app to build our usage of the TreeMap, and we couldn't get the Color Range to work on the map like is shown in this demo

MVC TreeMap Demo

Then we dug through the JS samples and realized the color range was set as an option in the sample. I believe the MVC sample could use this to improve the user experience of starting with code that looks like what is shown. 

.Colors(color =>
{
    color.AddRange("#0072c6", "#cbe2f3");
    color.AddRange("#5db2ff", "#deeffe");
    color.AddRange("#ff8f32", "#cbe7d0");
    color.AddRange("#82ba00", "#e5f0cb");
    color.AddRange("#ff8f32", "#fee8d5");
    color.AddRange("#9e0a61", "#eccedf");
    color.AddRange("#ac193d", "#eed0d7");
})

Thank you

NerdBrick
Top achievements
Rank 1
 answered on 05 Jun 2017
1 answer
214 views

The loading.gif only animates for a second or so. After that it just doesn't animate until the ouput is rendered back to the UI screen.

Using Vs2015 , Web application 

1. Using Typescript to set the chart options (Aspx -- calling html - calling Typescript with chart options set -- calling data access ).

 

Stefan
Telerik team
 answered on 21 Sep 2016
1 answer
94 views

Is there a way to open a POPUP or some kind of dialog - When user CLICKS on any cell on the chart ?

Example : If user clicks on the 'Country - State' ce;; - I want to show 'State name , Population , Capital city'.

 

 

Dimiter Topalov
Telerik team
 answered on 21 Sep 2016
1 answer
147 views

When I try to set the Chart options and datasource using TYPESCRIPT - it binds data , sets the customized colors but tooltip never works.

FYI, the calling happens as follows

Aspx - Html - Typescript - Dataacess

 

Is there any issue using Typescript and tool tip ? .

I am using latest kendo version .

Example with typescript - for treemap with tooltip will be helpful in my case.

 

Stefan
Telerik team
 answered on 21 Sep 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawer (Mobile)
Drawing API
Globalization
Gauges
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Collapsible
Localization
MultiViewCalendar
Touch
Breadcrumb
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?