Chart background highlight in HighChart - javascript

In this question it's explained how to set the background to have two colours (zebra like). My need is to highlight in the chart temporal changes via setting accordingly the background colour, like this:
the two blue area may identify periods where something was happening and the white one when it wasn't. On top of this I'll then add lines and other charts.
Can this be done via passing Highchart with start and end date of periods to be highlighted? (an area chart workaround maybe?)

What you most likely need is plotBands
xAxis.plotBands
A colored band stretching across the plot area marking an interval on
the axis.
In a gauge, a plot band on the Y axis (value axis) will stretch along
the perimiter of the gauge.
plotBands can be added on either of the axes, in your case you seem to want it on the xAxis, following is how one could do it
xAxis: {
plotBands: [{
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}]
}
Plotbands # jsFiddle

Related

How can I eliminate the extra space added to the bottom when the value dips below 0 on the Y axis in Chart.js?

I styled my chart with a legend below it like this, and you'll see a grey chart faintly rendered on another chart behind it for comparison (their data scales are different, couldnt put them both on the same actual chart):
As you can see, because the data on the front chart dipped below zero on the Y axis, 0 on the Y axis was moved upward way further than it needed to (the bottom of the chart normally lines up with the bottom of the gray chart behind it). I can of course resize and move the gray chart so that it's Y0 and the front chart's Y0 align, but that still leaves a big gap between the lowest data on the chart and the legend.
How can I eliminate this extra space below the lowest data rendered on the chart? I want the lowest value rendered to touch the bottom on the chart.
Putting my code, I think, wouldn't be useful here, since this behavior seems to be universal across Chart.js, and what I'm looking for is probably a setting in the options object that I don't know of yet, or know of, but don't know it can produce the desired result.
Found the setting for it:
yAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 0,
stepSize: 0.1
}
}]

Amcharts 3 - cannot hide category axis of serial chart

I have several line (serial) charts where I do not want any axes visible, just the graph line itself. I can easily hide the ValueAxes by setting axisThickness to 0, but I cannot get the categoryAxis to hide. I have tried the following:
"categoryAxis": {
"axisThickness": 0,
"axisAlpha": 0
}
I can fake hide it by setting "axisColour" to the same colour as the background-color of the containing div. However, it seems to blend with my white graph line when the graph line is running along the hidden axis (consecutive zero values).
How can I hide the category axis properly? Why would "axisThickness" and "axisAlpha" have no effect even though they are in the documentation for CategoryAxis (and they work perfectly for ValueAxis)?
Have you tried to switch off categoryAxis labels: labelsEnabled: false?
Here's the reference in official AmCharts docs: https://www.amcharts.com/docs/v3/reference/categoryaxessettings/#labelsEnabled_property

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

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

Categories