I am working with Dygraphs. I need to have a graph with a background of a grid that has major ticks in dark blue color and minor ticks in light blue color. There should be 1 major tick after every 4 minor ticks. I am looking for an effect similar to the picture shown below.
Picture courtsey :Stack overflow
I have spent a lot of time but have not been able to understand how to do it. Any lead in this direction is appreciated.
You could try using an underlayCallback. Something like:
var g = new Dygraph(div, data,
{
underlayCallback: function(canvas, area, g) {
for (const tick of majorTicks) {
const x = g.toDomCoordsX(tick);
canvas.fillRect(x, area.y, x, area.h);
}
}
}
);
Related
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
I'm working with x-range type of highcharts for a timeline, is there any way to get the axis value where the cross hair / mouse is hovered.
in this pic the cross hair is between a particular time duration but the tooltip is showing the points, is there any way to show the current hovered axis point on the tooltip ?
i have added code link is on the comment, thanks in advance
Highcharts tooltip is based on series points and changing the way it works would require a lot of customization. To workaround, you can add transparent dummy line series and dispable enableMouseTracking option in xrange series. Please look at the example below:
events: {
load: function() {
var newSeries = this.series[1],
min = this.xAxis[0].min,
max = this.xAxis[0].max,
data = [],
i,
time = 60 * 1000;
for (i = min; i < max; i += time) {
data.push({
x: i,
y: 0
})
}
newSeries.setData(data);
}
}
Live demo: http://jsfiddle.net/BlackLabel/aekvnf4d/
Finally found how to find the exact position , need to use highstock for that , thanks for #ppotaczek because of his answer which helped me to find some exact solution for this is in comment ,( sorry dunno how to link the jsfiddle link, shows error for indent spacing when submitting the answer)
Is it possible to show gradient area on Highchart over the line?
I need the chart to have the area over the line and not under it. I would be happy for help because i did not find a solution using the Highcharts API.
You can achieve this with the threshold (API) option. For example:
plotOptions: {
area: {
// ... for brevity
threshold: Infinity
}
}
Or see this JSFiddle example of it in action. This utilized the following:
If Infinity or -Infinity, the area between the graph and the corresponing Y axis extreme is filled (since v6.1.0).
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
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