We Keep Coding

Highcharts area direction

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).

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

Declaring location of highchart bars on a chart?

I have highchart and which looks like this ;[if i commented out max value of xAxis i see this image below ]
Here is the similar jsfiddle ;
Jsfiddle Link for similar case
I want to push the bars to all the way left side of the chart.
I actually can do it using hard coded json value on max: of xAxis . but my json value depends on year+month+day+hours+min+sec. so when some of the values here are changed , then i have to change the hard coded value to something else so it is not logical .
If there is anyway using a max value dynamically Please help me.
Thanks

Solution is to increase maxPadding, demo.
More info about maxPadding in the API:
Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. This is useful when you don't want the highest data value to appear on the edge of the plot area. When the axis' max option is set or a max extreme is set using axis.setExtremes(), the maxPadding will be ignored. Defaults to 0.01.

from group to stacked graph with Rgraph, y-axis doesn't change

I've been looking around and couldn't find an answer for it, and I don't think it's a difficult solution, but I can't figure out how to do it.
I draw a grouped bar chart with RGraph. This is done with the following code:
var tooltip = createToolTip();
bar4 = new RGraph.Bar('graph_tab1', objectSoap1.getValue());
bar4.Set('chart.colors', ['Gradient(#c01:red)', 'Gradient(#05D:blue)', 'Gradient(#0f0:green)', 'Gradient(#f0f:pink)']);
bar4.Set('chart.labels', objectSoap1.getLabel());
bar4.Set('chart.numyticks', 8);
bar4.Set('chart.ylabels.count', 6);
bar4.Set('chart.variant', '2d');
bar4.Set('chart.strokestyle', 'rgba(0,0,0,0)');
bar4.Set('chart.hmargin.grouped', 0);
bar4.Set('chart.background.grid.autofit.numhlines', 6);
RGraph.Effects.Bar.Grow(bar4);
now if I hit a button it had to change from grouped to stacked. I do this with the following code:
bar4.Set('chart.grouping', 'stacked')
RGraph.Effects.Bar.Grow(bar4);
it draws a stacked graph.. but the problem is the y-axis doesn't change.
as an example, if I have a grouped bar chart, with values 5, 10 and 15. the max y-value will be 15.
But if I stack these values, the value will be 30, and with this piece of code the barchart will grow to far, because it's going to a value 30, and the y-axis only goes to 15.
I hope it's clear what I mean and somebody can help me out.

There's an example of switching from grouped to stacked here:
http://dev.rgraph.net/fiddle/view/cfa8b72f8a9988527269abdfc7d34384

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