We Keep Coding

How to highlight cells and yaxis ticks on highcharts heatmap hover

I have a large heatmap, and because it's so large, I'm trying to highlight the cell when someone mouses over it, and I'd also like to highlight the y-axis tick as a time reference because of the large width of the chart. I've seen some examples of this, but my heatmap is not responding with hover effects.
I've used this example to highlight the cells red, but it's not working. http://jsfiddle.net/937twae7/ I've also researched this method for highlighting tick values, but it's probably not working for similar reasons. https://jsfiddle.net/sjapdya6/1/
In the "series" section of code, I've done this:
...
states: {
hover: {
color: 'red'
}
}
...
Here's my chart: https://jsfiddle.net/civilsurfer/Lhysx2vg/1/
Nothing happens as I hover on the cells.
Thanks for any assistance.

You used the boost module which increases performance, but causes some limitations - for example, the inability to change color in states.
To highlight an axis label you need to adjust the findTick function:
function findTick(point, ticks) {
for (var tickValue in ticks) {
if (tickValue == point.y) {
return ticks[tickValue]
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/agcper18/
Docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module

Custom gridLines and Axes Chartjs

I am trying to design a CDF Chart using chartjs to show probabilities in a graph. Basically, I will always have 100 points starting at 0 to some max number which I calculate beforehand and I want to generate the charts as I attached. Smooth and not many gridLines. I tried using chart type "line", yet it is far off.
Could you please help me out to configure the chart correctly.
Examples of what I am looking for:

This is a solution without autoSkip, using gridline colour options to hide unwanted x axis gridlines. (sorry about my British spelling of 'colour'!)
I can't use autoSkip since my time/x axis labels show new Year, Month, Date only once and I couldn't work out how to not skip the particular labels which indicate a new month, for instance. I finally found that you can define gridline colours in an array, so my solution is to create a gridline colour array, setting the chart background colour to the gridlines I want to hide. In my case, I already send a list of labels with empty values for when I don't want a label and gridline, just a datapoint.
var labels = data3json['labels'].split(',');
//set gridline colour to background when label is empty:
var xaxis_gridline_colours = [];
for (var i = 0; i < labels.length; i++) {
if (labels[i].length > 0) {
if (i == 0) {
xaxis_gridline_colours.push("#cccccc"); //x and y axis!
} else {
xaxis_gridline_colours.push("#dddddd"); //visible gridline
}
} else {
xaxis_gridline_colours.push("#ffffff"); //invisible gridline
//or call a chart background colour variable like:
//xaxis_gridline_colours.push(chart_bkg_colour);
}
}
Later in the code:
chart = new Chart(ctx24, {
options: {
scales: {
xAxes: [{
gridLines: {
display: true, //default true
color: xaxis_gridline_colours,
etc

First about the gridLines, you can in your chart options change the stepSize of your xAxes (put it to 10 for instance) so you will have 10 times less vertical grid Lines (since your xAxes stepSize seems to be 1 by default).
If the big points are bothering you, when you create your datasets you can change their pointRadius to 0; this way no points displayed just a smoothline.
Finally you can change the color of the line of each dataset by setting the property borderColor.
Take a look at this page for more customization : http://www.chartjs.org/docs/latest/charts/line.html
Hope this helps.

I have noticed that most of you add the line styles only via code. I just spend 1h looking for the settings, as I change it once, but then I couldn't change it again.
How to do it. Post on Stackoverflow pointed me in the right direction.
Charts grid lines style
Line: this.chart1.ChartAreas[0].AxisX.LineDashStyle.Dot
Go to Properties->Chart->Chart Areas and click on 3 dots (...) next collection.
Properties
In Collection, go to Axes and again click on 3 dots (...) next collection.
Axes Collection
You will have 2 Axis: X and Y. Select each Axis and go to the required section to change properties. Be careful. They are well hidden, but I tried to highlight all the options. Of course, to perform the custom modification, you will have to code it.
Axis Collection Editor

Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis

I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.

From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.

Using jqPlot to fill the bottom half of a graph with a color

I'm using jqPlot to make a simple graph:
Their documentation states that it's very out of date. Is there a way to shade the lower half of the graph (below the line) with a color such as this one?
http://www.epmag.com/resources/images/archives/OFFPROD-Petrolite-Graph1.jpg
If not, any clues on how I could shade it myself? jqPlot uses javascript to draw on an HTML canvas.

In your series options set:
series: [
{
fill: true
}
]
See this example.

Flot add marker to line on graph

Im trying to draw a graph which represents a persons weight(y axis) over time(x axis). I also need to show a marker for an event such as a change in medication on a specific day. Is it possible to add a point to the dataseries with only a time value that gets included in the line drawing but doesnt change the drawing of the line?

You can use markings to display a line or a interval in the chart
Here is an example:
http://people.iola.dk/olau/flot/examples/annotating.html
Basicly you just add this to add a vertical line:
var myPlot = $.plot(element, data, {
grid: {
markings: [
{ color: '#000', lineWidth: 1, xaxis: { from: 2, to: 2 } },
]
}
});
This will draw a black vertical line with width 1px at x=2

There is a Flot Symbols plugin that allows you to customize the shape of the point via a callback. You could then just plot that in a second series on the same axis, and set show lines = false.
Symbols plugin: http://code.google.com/p/flot/source/browse/trunk/jquery.flot.symbol.js?r=263
Please note this this link provides the source code for the flot symbol plugin.So please search under the source link until you find the jquery.flot.symbol.js file.
Here is the example from the current Flot website:
Using other symbols than circles for points (with symbol plugin). Investigating it's sourcecode might be a start point to the right direction.

Why don't you just add another series for markers and set the points to be x = the marker date, y = 0?

I needed the y value to be on the line not on the bottom of the graph. i ended up getting the two closest dates before and after the marker and working out the y intercept and then adding that as the y value and it shows up exactly where it should