I have a graph created following this example. I want to highlight a particular region on the X-axis, say from May to Jul. Is this possible in Fusioncharts? I have already looked into reference zones (no such thing for X-axis) and vertical lines (not applicable to time series-type graphs).
You can check timemarker feature of FusionTime where you define the events that occurred for a certain time frame on the x-axis, here is a snippet how to define it
xaxis: {
plot: "Time",
timemarker: [
{
start: "Jul-1981",
end: "Nov-1982",
label:
"Economic downturn was triggered by {br} tight monetary policy in an effort to {br} fight mounting inflation.",
timeformat: "%b-%Y"
}]
}
To know more about it check this demo - https://www.fusioncharts.com/fusiontime/examples/date-range-event-overlay?framework=javascript
Related
For a bar or column chart in Highcharts, is there a setting(s) to make it automatically set the min of the y-axis based on the min of the data? For example, if my data values fall between 200 and 300, then the plot doesn't look so good if the chart y-axis starts at 0, but rather it looks much better if the y-axis min is 200.
My current approach is supply the yAxis.min setting the minimum vale from the data subtracted by some "smart offset" (smart offset so that the min of the data is not plotted at the very bottom). The problem is i'm not 100% yet how to calculate that "smart offset" so I'm wondering if Higcharts can do the min from the data for me (rather than supplying it), then it might be able also figure out that offset.
You need to enable softThreshold property:
softThreshold: boolean
When this is true, the series will not cause the Y axis to cross the
zero plane (or threshold option) unless the data actually crosses the
plane. (...)
series: [{
softThreshold: true,
...
}]
Live demo: http://jsfiddle.net/BlackLabel/05tgmz9c/
API Reference: https://api.highcharts.com/highstock/series.column.softThreshold
Currently, I'm having trouble to force the highstock chart to display a blank space up to the current date. It focuses the data I give it.
What I have is:
What I want is something like this
As you can see I want the data to stop at the date of the latest data point and then the graph should show a blank space and stop at the current date. Obv there is not data points for those times
You can control how empty points, and missing points are shown by looking at:
xAxis.ordinal
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods (e.g. nights or weekends for a stock chart) will not take up space in the chart. Having ordinal: false will show any gaps created by the gapSize setting proportionate to their duration.
xAxis.max
The maximum value of the axis. If null, the max value is automatically calculated.
plotOptions.series.connectNulls
Whether to connect a graph line across null points, or render a gap between the two points on either side of the null.
Which means that for your graph, you will want to set:
xAxis: {
ordinal: false,
max: (new Date()).getTime() //to set the current date and time as a maximum
}
We have a local webserver which collects data from hardware and another web based app that shows the data on a line chart using JqPlot. Data fetch is done through Ajax.
I wish to show multiple data series on line chart, all having same xaxis values (the time value). The xaxis should be able to show time in minutes.seconds.milliseconds.
I have tried regular lineAxesRenderer, which is good, but shows only upto 1 decimal point, i.e. 25.1 to 25.2. If we have data that changes mutliple times within 100ms, we get different Y values for the same x value. This makes the graph look jagged, when actually we are getting different values for different time stamps.
I have also tried DateAxisRenderer, however in that case...the call to replot() to change the axis before redraw() simply fails. The x-axis data I am sending to the client is "H:M:S.MS" format. My options for x-axis are as follows:
xaxis : {
label : "Time (s)",
show : true,
renderer:$.jqplot.DateAxisRenderer,
rendererOptions : {tickRenderer: $.jqplot.CanvasAxisTickRenderer},
tickOptions: {formatString: "%H:%M:%S.%N"},
tickInterval:'500', // javascript timestamps are in milliseconds
},
What am i doing wrong here?
How do i show 2 or 3 decimal places on the x-axis if I use simple lineAxisRenderer?
Thanks and best regards,
Vishal
How would I disable the axis labels for certain (not all) ticks?
For example, my x-axis corresponds to the start time of an event. The x-axis label shows the date of the start time. However, there may be multiple events in one day, and instead of multiple labels displaying the same date, I'd like for only the first occurrence of the date to be shown, and remaining labels with the same date hidden.
Thanks in advance.
Looked around and found this can be done with labelExclusionRanges.
From Core Plot documentation:
CPTAxis: [read, write, retain]
An array of CPTPlotRange objects. Any tick marks and labels falling inside any of the ranges in the array will not be drawn.
i'm using the Line Chart component to generate a chart based on the consumption of a building.
Imagine a possible chart based on the consumption of a building in a period of a month and a resolution of a day. It will have 30 points of consumption corresponding to 30 days.
The problem is with the category axis labels. With a considerable amount of points, the labels becomes unreadable. How can i just label some points?
My best regards
Don't use a "Line" chart. Instead use a "Time Series" chart.
It automatically handles the issues around charting all points but only labeling a readable number of them. It also handles problems created by data points that are not uniformly spaced.
EDIT: If your incoming data is a String instead of a Date, then you have extra work. Time Series charts expect Times (well, Dates). You'll need to cast your DateString into a real Date. But the work is small, and the benefits are large. Use a variable like this: new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").parse($F{MyDateString}).
Use this code to generate a label on the line chart in JASPER report
else if(jasperChart.getChartType() == JRChart.CHART_TYPE_LINE) {
LineAndShapeRenderer line = (LineAndShapeRenderer) chart.getCategoryPlot().getRenderer();
line.setBaseItemLabelsVisible(Boolean.TRUE);
line.setBaseItemLabelGenerator((CategoryItemLabelGenerator) new StandardCategoryItemLabelGenerator());
}