I want to disable tooltip in am5hierarchy.partition.
enter image description here
I show original code:`
// Create wrapper container
var container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
var series = container.children.push(am5hierarchy.Partition.new(root, {
singleBranchOnly: false,
orientation: "horizontal",
downDepth: 1,
initialDepth: 10,
valueField: "value",
categoryField: "name",
childDataField: "children"
}));
`
Thanks in advance for any help or suggestion.
series.set(
"tooltip",
am5.Tooltip.new(root, {
forceHidden: true,
})
);
Hope it helps. I spent days to tune related config.
Related
I am trying to find a way to control width of the x-axis labels container in bar charts in styled mode. I want to have preset values and depending on the preset have labels to take 20, 30, 40, 50% of the graphic. Is there a property for that?
Thank you!
If you want to set labels' width depending on their length and relative to chart width, you can use chart.event.render to achieve that. It will allow you to find the number of characters and set dynamically the percentage width.
var allowChartUpdate = true;
Highcharts.chart('container', {
chart: {
type: 'bar',
styledMode: true,
events: {
render: function() {
if (allowChartUpdate) {
this.xAxis[0].categories.forEach(category => {
if (category.length > 10) {
var dynamicMargin = this.chartWidth * 50 / 100;
allowChartUpdate = false;
this.update({
chart: {
marginLeft: dynamicMargin
}
}, true, true, false);
allowChartUpdate = true;
}
})
}
}
}
},
...
Demo:
https://jsfiddle.net/BlackLabel/59xjq4du/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
I went through devExtreme documentation and examples but I can't find a solution for this...
In a Razor view I am loading a dxScheduler as follows (it's bound to a db object where "orders" and "resources" are defined):
<div id="scheduler"></div>
and
<script>
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%"
})
});
</script>
It works fine. However, while keeping cellDuration = 15 mins:
I would like the scheduler to be centered around the current time indicator (i.e. the vertical line that represents datetime.now...)
At the same time "startDayHour" has to be "0" and "endDayHour" has to be "24", as they are now.
Any suggestion would be appreciated. Thanks.
It turned out that I was looking at the "Configuration" section only. But there are "Methods" too...
The answer is to use the "scrollToTime" method.
Reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/Methods/#scrollToTimehours_minutes_date.
Updated working example (it's straightforward then to set the argument of "scrollToTime" dynamic).
$(function () {
$("#scheduler").dxScheduler({
dataSource: orders,
views: ["timelineDay"],
currentView: "timelineDay",
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: true,
firstDayOfWeek: 0,
startDayHour: 0,
endDayHour: 24,
cellDuration: 15,
groups: ["areaId"],
resources: [{
fieldExpr: "areaId",
allowMultiple: false,
dataSource: resources,
label: ""
}],
height: "100%",
onContentReady: function (e) {
e.component.scrollToTime(5, 30, new Date());
}
})
});
I am very new in ASP.NET MVC and Kendo and need your help.
I need to show the data in both grid and list mode in same page. Please suggest what is the best way/approach to achieve this. Shall i use list and grid view both and make them hide and show when user change this or this can be done via CSS on single, please suggest.
It cannot be done in css because Gridview and Listview are two different js components. I suggest you to use a shared datasource and create two different components Demo
$("#grid").kendoGrid({
dataSource: productsDataSource,
autoBind: false,
pageable: true,
height: 300,
selectable: true,
columns: [
{field: "ProductName", title: "ProductName"},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" }
]
});
$("#listView").kendoListView({
dataSource: productsDataSource,
template: kendo.template($("#template").html())
});
click: function() {
if (!hasPlotLine) {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
} else {
chart.xAxis[0].removePlotLine('plot-line-1');
}
hasPlotLine = !hasPlotLine;
}
Am trying to add and remove the plot lines on click event and I ended up with this eeror "Cannot read property xAxis of undefined"
DEMO
I assume what you would like to remove "old" plotLine and add new in clicked x value. So first of all I recommend to remove conditions, and only use remove/add plotline.
http://jsfiddle.net/FzNqA/8/
click: function () {
var chart = this.series.chart.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: this.x,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}
I am building a Dashboard and it has around 4 graphs on a row and on click of any graph i want to update another graph which is bigger in size to display the graph so that its visible to the user to analyze.
any idea how to Redraw the map on click on a button.
I did the similar thing on my project.
You can add one button zoom/popup, clicking on which would open a new big chart and disable the exporting buttons in this new chart.
Here's the full code.
function callback($this) {
var img = $this.renderer.image('images/zoom_icon.png', $this.chartWidth - 40, 5, 40, 12);
img.add();
img.css({
'cursor': 'pointer'
});
img.attr({
'title': 'Pop out chart'
});
img.on('click', function () {
var params = {
chart: {
spacingLeft: 100,
spacingRight: 100,
renderTo: 'myChart'
},
title: {
text: 'title'
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
}
}
}
new Highcharts.Chart(params, function (chart) {});
})
}
new Highcharts.Chart(charts.params, callback);
// where charts.params is object which contains options for chart