I'm working on a drilldown treemap and the render is exactly what I want.
My problem is about the legend.
I used colorAxis for the drilldown level and I would like to hide the legend on the main level (one color by tile) but display the graduate color axis legend on the sub level, only for the sub-serie displayed.
I made an example here : http://jsfiddle.net/vegaelce/4dLopjwv
I used the property legend to display it :
legend: {
enabled: true
},
but it displays the legend of each colorAxis on the sublevel.
How can I hide all the legend except the one corresponding to the sub-serie displayed ?
Thanks in advance
You can use drilldown and drillup events and update the visible property of the right color axis.
chart: {
type: 'treemap',
events: {
drilldown: function(e) {
const colorAxis = this.colorAxis[e.seriesOptions.colorAxis];
if (colorAxis) {
colorAxis.update({
visible: true
}, false);
}
},
drillup: function() {
this.colorAxis.forEach(function(cAxis){
if (cAxis.visible) {
cAxis.update({
visible: false
}, false);
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/vtg7fdn6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update
I have a chart series data that ends with a not-rounded value (e.g 5.5).
The xAxis type is category and I want the last tick label to disappear.
I must use category type because I need the tickmarkPlacement attribute set to "between".
I tried to set endOnTick to false but it seems like it doesn't apply on category type.
$(function () {
var settings =
{
"chart": {
"type":"line"
},
"xAxis": {
"type": "category",
"endOnTick":false
},
"series":[
{"name":"series1","data":[[1,1200],[2,2200],[3,3200],[4,1800],[5,1500]]},
{"name":"series2","data":[[1,1050],[2,2050],[3,1650],[4,1450],[5,1350]]},
{"name":"series3","data":[[1,1250],[2,2250],[3,1850],[4,1650],[5.5,1550]]}]
}
var chart = $('#container').highcharts(settings);
});
That's how the chart looks like:
And I want the "6" category label to disappear.
Link to simplified example: http://plnkr.co/edit/EleA25vPiTQ3EwFa
EDIT - My chart has a scrollbar, so if I use showLastLabel: false,
it hides the currently displayed last label, even when the scrollbar is not at the end.
You can set the showLastLabel to false to hide it.
"xAxis": {
"type": "category",
"endOnTick":false,
showLastLabel: false
},
Demo: http://plnkr.co/edit/5WRJIeGFyiUzRiGF?preview
API: https://api.highcharts.com/highcharts/xAxis.showLastLabel
I have a highstock chart. Is it possible to render a slider inside the chart area? There's only simple elements eg text, box etc are given in documentation.
You can use annotations to add some scrollable HTML element:
annotations: [{
labelOptions: {
...,
useHTML: true,
shape: 'rect',
formatter: function() {
return '<div class="annotationContainer"><div>Some text</div></div>'
},
y: 15
}
}]
Live demo: http://jsfiddle.net/BlackLabel/sfLum9ep/
API Reference: https://api.highcharts.com/highstock/annotations.labelOptions.useHTML
I have a barchart with many years in the x-axis. I want to select the years. Here we have the opportunity to do this in 2 ways: either with a click-and-drag, either with sliders.
I have two problems.
The first concerns the click-and-drag: When I select the extreme years, then appear two years, and not only those selected. For example, if I select "1960" then appears 1960 and 1961. Same if I select 2016 shows 2015 and 2016.
The second problem concerns the sliders. If both sliders are to the same value, then there is a problem. For example, if my two sliders are on 1998, the graph shows the years 2015 and 2016. If they are both on 1966, the graph displays the years 1994 and 1995.
Here is my code HTML :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<div style="margin: 20px 0px 0px 60px">
<!--
The "oninput" attribute is automatically showing the value of the slider on load and whenever the user changes the value.
Since we are using a category x-axis, the values are between 0 and 12. For this example, I'm adding your base year (2004)
to the output value so it shows a label that's meaningful to the user. To expand this example to more years, set your max value
to the appropriate value and the base year to wherever you plan to start your chart's data.
-->
<form oninput="output1.value=parseInt(slider1.value)+1960;output2.value=parseInt(slider2.value)+1960">
<input type="range" name="slider1" class="mySlider" min="0" max="56" value="0" />
<output name="output1" id="output1" for="slider1" style="font-size:10px;padding-top:0px;text-align:left">1960</output>
<br />
<input type="range" name="slider2" class="mySlider" min="0" max="56" value="56" />
<output name="output2" id="output2" for="slider2" style="font-size:10px;padding-top:0px;text-align:right">2016</output>
</form>
</div>
Here is my code JavaScript :
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
colors:[
'#d8d826'
],
legend:{
enabled:false
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
// NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
// I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
tickmarkPlacement: 'on', tickInterval: 1,
minRange: 1 // set this to allow up to one year to be viewed
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,50]
}]
});
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes($('input[name="slider1"]').val(), $('input[name="slider2"]').val());
});
});
Look at in : https://jsfiddle.net/uvat8u05/13/
How to solve these two problems please?
Thank you
Highcharts are expecting int values for setExtremes() method. So you should get the value of sliders;
$('input[name="slider1"]').val();
Then parse this value to int;
parseInt($('input[name="slider1"]').val());
Here I fixed it for you: jsFiddle
I am using Kendo Grid to show my search results.
Below is the code for Kendo Grid.
jQuery
$("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
data: "Results"
},
pageSize: 20
},
height: 550,
sortable : true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: gridData.viewFields
});
$("#grid").kendoGrid('refresh');
I am adding data dynamically to gridData.viewFields.
Now i am trying to make rows clickable and navigate to display forms of items dynamically. I am struck here for a while. Any contribution is much appreciated.
Thank you.
First, you'll need to configure the grid to allow the row selection by setting the value for the selectable property:
$("#grid").kendoGrid({
selectable: "row"
//Other configuration value...
});
Then, you have to listen to the change event that will be triggered when the user will change the grid selection:
$("#grid").kendoGrid({
//Other configuration value...
change: function() {
var selectedRow = this.select();
//Insert your dynamic for logic here and user selectedRow to get the selected data
}
});