I am making simple line chart in kendo. Something like this demo http://demos.telerik.com/kendo-ui/dataviz/line-charts/index.html.
I also have mulitple series as on example(India,World etc...).
My question is, is there way to allow that only one serie is active on chart.
Series behave like checkbox button(I can have one or more active) and I want them to behave as radio button so only one serie can be active.
The short answer is No. You cannot modify the legend in anyway to achieve such behavior. However you can use radio buttons separately and update the options of the chart - such as the series.
Here is a small JsBin example:
$("input[type=radio]").click(function(){
var clickedOn = $(this).val();
var data = $.grep(series, function(val){
return val.name == clickedOn;
})[0];
chart.setOptions({series:[
{
name: clickedOn,
data: data.data
}
]})
})
You can do this with a button. Haven't tried it with a radio button.
$("#ButtonName").kendoButton({
click: function (e) {
var varname = $("#chartName").data("kendoChart")
kendodatasourcename.filter(
{ field: "fieldName", operator: "eq", value: "filteredvaluefromyourdataset" })
Related
How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]
I am rendering a Gantt chart with different series color. The colors are somehow not reflected on the navigator at the bottom. How can I display the same colors in both series and navigator?
Fiddle link : Fiddle
Note: These colors are going to be dynamic which will be based on different cases. So I want them to reflect in the navigator too, dynamically.
I am changing color of the series like so :
chart: {
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
p.color = 'grey'
});
}
}
},
As you can see series color is grey but in the navigator below, I see different colors.
As per highcharts-gantt documentation:
Update the series with a new set of options. For a clean and precise handling of new options, all methods and elements from the series are removed, and it is initialized from scratch.
On event, you should then go through given serie points and change its options (in your case 'color').
The changes will be applied in the timeline below - example code changes the color after 1,5sec.
//Updating the color
setTimeout(function() {
for (var i = 0; i < chart.series[0].points.length; i++) {
chart.series[0].points[i].update({
color: "grey"
});
}
}, 1500);
Working example
In your code it would be:
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
p.update({color: "grey"});
});
}
}
To avoid shrink of timeline - launch setExtremes() after chart update.
Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by selecting an area in the chart.
//Fully selected timeline
this.xAxis[0].setExtremes();
Working example - timeline selection
You can also set options for series of navigator, like below:
navigator: {
series: {
...,
colorByPoint: false,
color: 'grey'
},
...
}
Live demo: https://jsfiddle.net/BlackLabel/c4j9dvqx/
API Reference: https://api.highcharts.com/gantt/navigator.series.color
Using vue-chartjs is it possible to change to color of the bar?
This is similar to this question which is based on chart.js
chart.js bar chart color change based on value, and the jsfiddle provided in the answer is exactly what I'm looking for, except within vue-chartjs.
Any help appreciated
So this should be your chart calling (in my case, I named it bar-chart)
<bar-chart
:chart-data="barData"
:options="barChartOptions">
</bar-chart>
:chart-data and :options are 2 props defined when I create my bar component:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
props: ['chartData', 'options'],
So your barData, should be an object like this:
{datasets: [...], labels: [...]}
Your dataset is an array with the charts you want to show. So if you want to show only 1 data, than your array only has one position. So let's assume that by now. We'll use dataset = dataset[0]
Your dataset accepts some properties, 2 of them are a must:
Data (an array with the data you want to show)
Label (the name of the label when you hover on the bardata. It should display "Label: value"
It also accepts some other properties like:
fill
hoverBackgroundColor
backgroundColor
check more here: https://www.chartjs.org/docs/latest/charts/bar.html
so now, your backgroundColor property is either a color value (e.g. red, #FF0000), or an array.
If it is an array, then this should be true dataset.bgColors.length === dataset.data.length
and each dataset.bgColors array position is the color of the respective value in the dataset.data array.
dataset: {
data: [1,2,-3,-4,2,1]
backgroundColor: ['green', 'green', 'red', 'red', 'green', 'green']
...
}
So now, you can just build a bgColors array with the color you want, based on your data.
------------- UPDATING THE DATA -----------------
To anybody else who is looking for a way to UPDATE your chart data after it was rendered. It's a different question, but to help the community:
When you set your chart component, you can define a watch for the chartData prop, so when the chartData changes, the method is called and you re-render the chart:
Vue.component('bar-chart', {
extends: VueChartJs.Bar,
props: ['chartData', 'options'],
methods: {
renderLineChart () {
this.renderChart(this.chartData, this.options)
}
},
mounted () {
this.renderLineChart()
},
watch: {
chartData: function () {
this.$data._chart.destroy()
this.renderLineChart()
}
}
})
IMPORTANT: Make sure you make a new copy of the new chartData object info because the watch will only check if the object itself changed, not its inner properties.
However, if you really want to change ONLY the dataset.data or dataset.backgroundColor or any other, than the watcher will not know it changed. You can use the property deep: true in the watcher for this, as it will check changes deep inside the chartData object:
watch:
chartData: {
handler: function () {
this.$data._chart.destroy()
this.renderLineChart()
},
deep: true
}
}
I hope the answer was clear for everyone.
Best regards
I am trying to make a bar chart with VizFrame. Right now this is what my chart looks like:
**edit Chart wont embed? Here is the link: https://imgur.com/5vDzgCs
How would I go about putting the data label inside the bar if it can fit? I tried looking it up, but I am having trouble solving this issue.
Thanks!
to display the data labels inside the bars use the plotArea.dataLabel.position property. As stated in the documentation the property has the following features:
Supported Value Type: String
Supported Values: inside, outside, outsideFirst
Readonly: false
Serializable: true
Default value: "outsideFirst"
Description: Set data label display
position. 'outsideFirst' means if the plot has no space to display data
label outside of the bar, the data label will be displayed inside.
one option to set the property would be for example in the onInit method of the controller of the view:
...
onInit: function() {
oVizFrameBar = this.byId("idVizFrameBar");
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
position: 'inside'
}
}
}
}
...
How do I bind to or recognize a right-click event?
I have a scatter plot where left-click adds a point at the clicked location; I would like right-click to remove the point (if present).
This is my current code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
click: function(event) {
var cs = [Math.floor(event.xAxis[0].value),
Math.floor(event.yAxis[0].value)];
this.series[0].addPoint(cs);
}
},
type: 'scatter',
},
... etc. ...
});
This should help:Making Highcharts support right click context menu
This is not a full solution: I did not figure out how to capture right-click events.
But here's a workaround for clicking on the chart background:
have the user do a shift-click
supply a callback as before
in the callback, inspect the event. If shift was pressed, do something different
Here's what the callback might look like:
function clickChart(event) {
var isShiftPressed = event.shiftKey;
if(isShiftPressed) {
// do something
} else {
// do something different
}
The event object has boolean attributes shiftKey (and altKey).
Here's a workaround for removing points: (actually, it's not a workaround -- I just didn't realize there was an easier way!)
points have their own events
just set up a callback that removes points when they're clicked
Example:
function clickPoint(event) {
this.remove();
}
var chart = new Highcharts.Chart({
chart: {
type: 'scatter',
renderTo: 'chart',
},
series: [{
point: {
events: {
click: clickPoint
}
}
}]
});
Note: the documentation is misleading, at the least, but the jsfiddle examples seem to be correct. It seems to show that the point options are not in series.
Currently, there are only a few events supported by Highcharts.
for ref : https://www.highcharts.com/blog/tutorials/introduction-to-highcharts-events/
To add custom events, such as
double click (including mobile devices)
right click (context menu)
mouse over
mouse out
mouse down
mouse move
we can add a plugin
highcharts-custom-events
https://www.npmjs.com/package/highcharts-custom-events
hope you find this helpful and solves your problem.