I've already drawn a flot graph using some data:
var plot = $.plot($("#placeholder"),
[{
data: data,
}], {
series: {
points: {
show: true
}
},
grid: {
hoverable: true,
}
});
Now I'd like to highlight a single point on the graph, when a user hovers over an item elsewhere on the page.
I found this question, which explains how to totally redraw the series from scratch, but is there a way to highlight a single point?
Or add a new point in a different colour, which would have the effect of a highlight?
NB: when the user hovers over the relevant item elsewhere on the page, I will have the x and y coordinates of the related point, but not the pixel coordinates on the graph.
The API provides the following methods:
The Plot object returned from the plot function has some methods you
can call:
highlight(series, datapoint)
Highlight a specific datapoint in the data series. You can either
specify the actual objects, e.g. if you got them from a
"plotclick" event, or you can specify the indices, e.g.
highlight(1, 3) to highlight the fourth point in the second series
(remember, zero-based indexing).
unhighlight(series, datapoint) or unhighlight()
Remove the highlighting of the point, same parameters as
highlight.
If you call unhighlight with no parameters, e.g. as
plot.unhighlight(), all current highlights are removed.
Related
I am new to Chart.js and JavaScript. Currently working with a line chart, and now I want to add custom data points to a mouse click event (when I press somewhere on the data set, it takes the current value of the Y axis and using that value it creates a data point in that place). I took the code from http://www.chartjs.org/samples/latest/charts/line/basic.html and trying to modify it. Here is a link to my current chart:
https://i.stack.imgur.com/M9MF1.jpg
I am using the basic chart.bundle.js library, and used D3.js libraries for making data points draggable.
Trying to implement the creation of points per mouse click using the following code, but it seems that it's not good so far.
document.getElementById('canvas').onclick = function(e){
//getting value by pressing on dataset
value = chartInstance.scales[scale].getValueForPixel(e.clientY)
//trying to create dataPoint
myLineChart.points.push(new this.PointClass({
y: value;
strokeColor: this.datasets[datasetIndex].pointStrokeColor,
fillColor: this.datasets[datasetIndex].pointColor
}));
//after all updating my chart
chartInstance.Update(0)
};
Maybe anyone could explain more about this library and how it creates data points?
Every new point in the chart is data, so you need to add that point in the data (chartData.data.dataset[]) array. Instead of adding to the, myLineChart.points which i'm not sure why you have used you should add the data-point in the data array and the UI decorations such as colors are supposed to be specified in the chartOptions.scales.yAxes[] array. Therefore in order to add the point in the chart use:
// here i is the corresponding parameter for which you want to add the new point
chartInstance.data.datasets[i].push(value);
chartInstance.update();
I have a Highcharts plot which looks something like this
representing time series data for several different series. The thing is, sometimes the data for a particular series is "unavailable" (as you can see with the purple series above), and so the data values are NaN.
I want to have some way of "capping" each series wherever there are NaN values - my ideas was to use plotBands for the corresponding color of each series between all NaN values. However, I cannot seem to figure out if this is even possible. I have done plenty of research and found demos which treat "area with missing points" by simply not displaying anything (as my current chart does), such as this demo with this image:
but I'm imagining a treatment of NaN values that looks something like this instead (I apologize for my lack of artistry)
Is this possible with Highcharts?
You have to use load events in chat to add plot band
Fiddle
chart: {
type: 'area',
spacingBottom: 30,
events: {
load: function () {
var series_data=this.series[1].data;//this is second series data
for(var i=0;i<series_data.length;i++){
if(series_data[i].y==null){
//adds plot band
this.xAxis[0].addPlotBand({
from: i-1, //point back
to: i+1, //point after
color: '#0066ff',
});
}
}
}
}
},
I have array of series, where i have multiple series as one point and average line:
Each point has format(e.g. selected GI00021):
{
name: "GI00021",
url: "/generalInspection/21",
data: [null, null, null, null, null, 50]
}
I need to group this points in one title on legend, so legend will says: "General Inspections" and all points will have same marker and color. Also if i will click this label - all that poins will be hide.
I tried to done this by write:
series: [{
name: 'General Inspections',
data: gi_points,
marker : {
enabled : true
}
},
..
where gi_points array of objects:
{
name: "GI00021",
url: "/generalInspection/21",
x: 5,
y: 50
}
but i have problems with lines bettween points - they should not be exist:
I think 1 desicion to show data is more correct, but i don't undestand, how to group this points into one group.
Rather than bringing all these inspection points in as different series, have you considered aggregating (pushing) them into one single series? That way, the chart will automatically color and label them as one entity, which will also make it far easier to turn the points on and off as needed.
Now, if you wanted to show only the inspection points and not the lines between them (as I assume you want your average line to show the overall trend vs. the noise between each point), you could set the line color of your inspection point series to "transparent" and give the series markers their own color (see my answer here, with the original poster's suggestion for transparent lines: Highcharts box plot chart customization).
Please let me know if this is helpful for you.
I am uisng tickPositioner to plot certain dates on X Axis.
xAxis: {
......
tickPositioner: function(min, max) {
// custom function which returns dates array.
return getDatesBetweenRange(min, max);
},
.....
}
using Highstock v1.2.5.
I also have Show/Hide series option in the Legend. It works fine no issues till here.
Now, When I hide any series from the chart.
I do not want to show those dates on x Axis who have no data as the series is hidden.
I was looking into source code at "getOffset:" method where Label is being created for each
Tick.
Is there any relation in API which returns all series points for this Tick ?
Or
Is there any relation in API that says that this tick pos (e.g. date) has no data visible ?
As I know, you can use a little different solution:
In tickPositioner you have access to all series for specific axis via this.series. Now, each of these series have xData which contains all x-values. All you need to do now is check if series is visible, and then compare your tick values (generated by getDatesBetweenrange()) with values in xData arrays - and return only these values which could be find there.
Is it possible to specify a separate offset value for each of the slices of a pie chart? I am using ShieldUI JavaScript chart, but as per the documentation I only see this possibility of setting it up:
seriesSettings: {
pie: {
activeSettings: {
pointSelectedState: {
enabled: true
}
},
enablePointSelection: true,
slicedOffset: 20,
addToLegend: true,
dataPointText: {
enabled: true,
borderRadius: 4,
borderWidth: 2,
borderColor: "red"
}
}
},
There isn’t :
slicedOffset[0]: 10,
slicedOffset[1]: 20,
slicedOffset[2]: 30,
and so on. How can I achieve the desired behavior?
It is not possible to specify different offsets for each slice of a Shield UI JavaScript pie chart. The slicedOffset applies for all of the slices of a given chart. However there are some workarounds depending on what exactly you need to be accomplished.
If the chart is related to another one you may specify a predefined parameter and assign its value to the slicedOffset property. However it will again apply for all the slices.
It is also possible, using the events of the chart to recreate it, after a slice has been clicked on. In this case an additional parameter will be specified, which to take account of which slice has been clicked on so that this slice’s property can be set to true :
sliced: true
If the different sliced offsets values are quite important you may also wish to use related controls: for instance a drop down. In this case, avoiding the shortcomings of the previous two solutions selecting an item from the dropdown you will recreate the chart and set different offset for the selected slice.