I have the following which displays the chart, however when I adjust the handles on the navigator the chart doesn't adjust to display the points for the selected period.
This is my Razor code:
#(Html.Kendo().StockChart<Portal.Models.Company.StockDataPoint>(Model.StockPricePerformance)
.Name("stockChart")
.DateField("Date")
.Series(series =>
{
series.Line(s => s.ClosingPrice)
.Markers(false);
})
.CategoryAxis(axis =>
{
axis.Categories(model => model.Date).Type(ChartCategoryAxisType.Category)
.MajorGridLines(lines => lines.Visible(false))
.Axis.BaseUnit = ChartAxisBaseUnit.Months;
axis.Labels(label => label.Step(24).Rotation(-60).Format("dd MMM yy"));
axis.Axis.BaseUnitStep = 10;
})
.Navigator(nav =>
{
nav.Series(series => series.Area(data => data.ClosingPrice));
nav.DateField("Date");
nav.AutoBind(true);
})
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.ClosingPrice # [#=dataItem.Date#]")
)
)
This is what the chart looks like:
As you can see the chart hasn't been redrawn or adjusted to only show the points for the chosen period. I had a look at the Telerik examples and API reference but I couldn't work out what options would make the navigator work.
So I figured it out.
Instead of using axis.Categories(model => model.Date).Type(ChartCategoryAxisType.Category) I used axis.Axis.BaseUnit = ChartAxisBaseUnit.Days; in the CategoryAxis part of the chart definition.
For my chart this was enough for the chart to show all points (no aggregation) and allow the navigator to work without any extra work.
Related
I'm using some different charts renderer in Highcharts drilldown. In some cases, my first level is a column chart and the second (or third...) level is a pie.
Everything is working well except some specified settings for the axes (title, color/width) that appear in the pie chart. The expected behavior is entire axis are hidden in case of pie chart.
As example, in the following : https://jsfiddle.net/vegaelce/w3crqofu/ I would like the axis lines and titles to be hidden in the pie drilled charts.
When using a pie in the first level by setting the type as for the second level :
type: 'pie',
the axes are correctly hidden.
You can use the drilldown and drillup callbacks to customize your chart options, like:
events: {
drilldown() {
const chart = this;
chart.title.hide()
chart.axes.forEach(axis => axis.update({visible: false}, false, false))
chart.reflow()
},
drillup() {
const chart = this;
chart.title.show()
chart.axes.forEach(axis => axis.update({visible: true}, false, false))
chart.reflow()
}
}
Demo: https://jsfiddle.net/BlackLabel/3ac9hrfj/
API: https://api.highcharts.com/highcharts/yAxis.visible
Hey so I have little drag and drop game written in React konva. My draggable piece looks like this (simplified for convenience
return this.props.areas.map((area) =>
<Image draggable=true
{...area.imageProps}
onDragStart={() => {...}}
onDragEnd={() => {...}}
onDragMove={() => {...}}/> )
I would like the piece that is currently being dragged to be the one on the highest layer (highest zIndex).
Problem is React-Konva does not support zIndexing, and seems to want you to enforce the zIndexing based on order in the render method.
My solution was to updated the reactState with a currentDragIndex
...<Image
onDragStart = {this.setState({currentDragIndex: area.index})}
/>
Then I try to reorder in the render method. However this causes the drag event to be interrupted.
Anyone have a good solution to this?
You chould just use moveToTop() method
onDragStart={(el) => {el.target.moveToTop();}}
If you have an array of some items, the simplest solution is to change that array, by moving the dragging node to the end of the array. In your render function you just need to draw items from the array.
handleDragStart = e => {
const id = e.target.name();
const items = this.state.items.slice();
const item = items.find(i => i.id === id);
const index = items.indexOf(item);
// remove from the list:
items.splice(index, 1);
// add to the top
items.push(item);
this.setState({
items
});
};
Demo: https://codesandbox.io/s/11j51wwm3
I have a chart like this, where I have 29 series in a legend field. And I want to make it look better, so my question is: how can I add custom multiple select instead of selection which is provided by highcharts?
Yes, it is possible. You have to set enabled legend property to false, add html select list and write your own function to switch between series.
function chose() {
let selected = mySelect.options[mySelect.selectedIndex].text;
chart.series.forEach((series) => {
if (selected === series.name) {
if (series.visible) {
series.hide();
} else {
series.show()
}
}
})
}
btn.addEventListener('click', () => {
chose()
})
Check this example: https://jsfiddle.net/Bastss/daL7nzjr/ . Also, check this Highcharts solution to customize legend when the chart has a lot of series: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/legend/navigation/
Best regards!
I am working on a columnrange graph in Highcharts where I plot different measurements and confidence intervals in the same plot:
The first few columns inside a group (e.g. Januar) represent measurements for different cities, while the last column represent confidence intervals. I would like to add horizontal lines to the confidence intervals representing the data means. That is, each orange column would get its own line at a specific heigh going from the left to the right side of the orange rectangle. How do I plot such lines?
I know how to add lines as a separate series of type line. However, doing so, I'm not sure how to guess the exact location of orange column and also I do not know how to handle cases when some columns are hidden through the legend.
This question is related to this question though I am not able to get any of that solutions to work in my case.
Here is the fiddle: https://jsfiddle.net/nikicc/rqxqm4hm/
You can use renderer.path to draw proper lines.
function drawDataMeans() {
const intervalSeries = this.get('conf-interval'),
series = this.series.filter(series => intervalSeries !== series)
let lines = this.dataMeansLines
if (!lines) {
lines = this.dataMeansLines = series[0].data.map(series => this.renderer.path().attr({
'stroke-width': 2,
stroke: 'black'
}).add(intervalSeries.group))
}
const visibleSeries = series.filter(series => series.visible)
if (intervalSeries.visible && visibleSeries.length) {
intervalSeries.data.forEach((point, i) => {
const mean = visibleSeries.reduce((sum, series) => sum + series.data[i].high, 0) / visibleSeries.length
const {x, width} = point.shapeArgs
const y = this.yAxis[0].toPixels(mean, true)
lines[i].attr({
d: `M ${x} ${y} L ${x + width} ${y}`,
visibility: 'visible'
})
})
} else {
lines.forEach(line => line.attr({visibility: 'hidden'}))
}
}
Hook on load/redraw events
chart: {
type: 'columnrange',
inverted: false,
events: {
load: drawDataMeans,
redraw: drawDataMeans
}
},
example: https://jsfiddle.net/dq48sq3w/
Using Gmaps4Rails, I've got some markers that I can show/hide based on an attribute. That works fine. However, I'm trying to get the map to auto-adjust to the current set of markers with Gmaps.map.adjustMapToBounds() called after I set the currently visible markers.
Whenever I filter items, the entire map shows, as if it were displaying all of the markers, even though it actually displays just the filtered ones. I think it is because it considers hidden markers when setting the bounds, but I could be wrong!
Here is my filtering code:
$("select").change(->
currentFilters = $('select').val()
hideAllMarkers()
visibleMarkers()
Gmaps.map.adjustMapToBounds()
)
visibleMarkers = ->
filtered = Gmaps.map.markers
filtered = _.filter(filtered, (marker) ->
_.include(currentFilters, marker.market)
)
_.each filtered, (marker) ->
Gmaps.map.showMarker marker
hideAllMarkers = ->
_.each Gmaps.map.markers, (marker) ->
Gmaps.map.hideMarker marker
And here are the options I'm initializing the map with:
#gmap_options = {"map_options" => {
"auto_zoom" => true,
"auto_adjust" => true,
"mapTypeControl" => true,
"detect_location" => true,
"center_on_user" => true},
"markers" => {"data" => #map}
}