Expected:
I want to divide single line into 2 parts based on x axis value.
Example, when x-value is greater than "2016-8" show dashed line as following
Tried with ECharts visualMap, but it only works depending on y-axis value
https://echarts.apache.org/examples/en/editor.html?c=line-aqi
It seems VisualMap can only be used to change the color and/or symbol of the line.
Different colors on the same line using VisualMap on xAxis
If you don't specifically need to get a dashed line and you just want to use VisualMap on xAxis, you should set visualMap-piecewise.dimension to 0 (0 being x and 1 being y in simple [x,y] series).
visualMap: {
dimension: 0,
},
Then you'll need to set your list of pieces depending on the type of xAxis ('time' or 'category'):
'time' : full example
'category' : full example
Dashed line on half the series
If you specifically need to get this :
when x-value is greater than "2016-8" show dashed line as following
You can split your series in 2 different series and affect a different line style to each of them:
Series 1: date <= "2016-8" (solid line)
Series 2: date >= "2016-8" (dashed line)
Here is a working example.
Related
I have a am4charts (v5) chart with a bars and a line (made with axis range), but i cannot put the axis range label above series line.
I tried with above param, with zIndex, but i cannot make it work.
I put the above param here in the axis range creation
let seriesRangeDataItem = yAxis.makeDataItem({ value: value, endValue: value, above: true});
This code reproduce the problem
https://codepen.io/javierflti/pen/wvxKRWo
As you can see, label "120" is not above bars
Any idea?
Thanks
I'm making a weather display graph using GNUplot with a weather API. I'm currently plotting the next 48 hours of temperature and rainfall.
As you can see in the above image, the temperature is the line with the axis defined on the left; while the rainfall is depicted by the bar graph (bottom left) and its axis is defined on the right. (0, 0.5, 1).
I would however like to include other data in the graph as well. The first thing I want to include is cloud cover at the top of the graph. Again as a bar graph.
I'm including a mockup that I made is a graphic editor:
Is there a way to do this with gnuplot, or will I have to use another program to accomplish it?
You have y1-axis on the left and y2-axis on the right. If you want to have a 3rd y-axis you have to shift it somehow. One way to achieve this is with multiplot, basically several plots on top of each other.
You have to make sure that all plots are using the same (fixed) margins on the canvas (automargin probably won't work) and the same xrange (the second plot takes it from the first plot). Check the following example with some random data. Certainly, some fine tuning could be done. Adapt it to your needs.
Code:
### Three y-axes
reset session
# create some test data
myTimeFmt = "%d.%m.%Y %H:%M:%S"
set print $Data
do for [i=1:48] {
myTime(i) = strftime(myTimeFmt, time(0)+i*3600)
myTemp(i) = sin(i/5.)*5 + 20 + rand(0)
myRain(i) = int(rand(0)+0.3) * rand(0)*20
myCloud(i) = rand(0)*50
print sprintf("%s %g %g %g",myTime(i),myTemp(i),myRain(i),myCloud(i))
}
set print
set key off
set margins screen 0.1, screen 0.8, screen 0.1, screen 0.94
set multiplot
set format x "%H:%M" timedate
set xtics 3600*6
set grid xtics, mxtics, ytics, mytics
##### first plot
set ylabel "Temperature °C" tc "red"
set yrange[10:30]
set ytics nomirror tc "red"
set y2label "Rain / mm" offset -1,0 textcolor rgb "blue"
set y2range[0:40]
set y2tics nomirror tc "blue"
set style fill solid 1.0
plot $Data u (timecolumn(1,myTimeFmt)):3 axes x1y1 w l lc "red", \
'' using (timecolumn(1,myTimeFmt)):4 axes x1y2 w boxes lc "blue"
unset xlabel
unset ylabel
unset y2label
unset tics
##### Second plot
set bmargin screen 0.73
set border 4
set xrange[GPVAL_X_MIN:GPVAL_X_MAX] # identical xrange like 1st plot
set y2range[100:0] reverse
plot $Data u (timecolumn(1,myTimeFmt)):5 axes x1y2 w boxes lc rgbcolor "grey"
##### Third plot (just for 3rd y-axis)
set rmargin at screen 0.9
set border 8 # only right border visible
set y2label "Cloud coverage" offset -1,0 textcolor rgb "black"
set y2tics nomirror offset 0,0
plot NaN # plot some dummy
unset multiplot
### end of code
Result:
I generate a transparent chart that lets the background of a web page be seen through it.
So far I've done this (omited the populating of dataset for brevity):
lineChartObject=ChartFactory.createLineChart("Title","Legend","Amount",line_chart_dataset,PlotOrientation.VERTICAL,true,true,false);
CategoryPlot p = lineChartObject.getCategoryPlot();
Color trans = new Color(0xFF, 0xFF, 0xFF, 0);
lineChartObject.setBackgroundPaint(trans);
p.setBackgroundPaint(trans);
for (int i=0;i<=3;i++){
lineChartObject.getCategoryPlot().getRenderer().setSeriesStroke(i, new BasicStroke(3.0f));
lineChartObject.getCategoryPlot().getRenderer().setBaseItemLabelsVisible(false);
}
Which renders this:
I cannot find a way of:
Removing border of plot (1)
Removing border of leyend as well as making it transparent (3)
Making the labels on the X axis (2) to behave intelligently as the labels of Y axis do (A). Labels of Y axis space themselves so as to not clutter the graph, for example if I rendered the graph smaller, it would show fewer labels, like this:
Edit: X label domain is dates.
For (1) try:
plot.setOutlineVisible(false);
For (2), a common reason for having too many categories along the x-axis is that the data is actually numerical, in which case you should be using XYPlot rather than CategoryPlot. With XYPlot, the x-axis scale adjusts in the same way that the y-axis does.
Edit from OP: Using a TimeSeriesChart with a TimeSeriesCollection as XYDataSet did the work! (fotgot to say X domain is dates)
For (3) try:
LegendTitle legend = chart.getLegend();
legend.setFrame(BlockBorder.NONE);
legend.setBackgroundPaint(new Color(0, 0, 0, 0));
If I have a data like this:
data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
this serie starts on the middle but I want what starts really close than the bottom line and not in the middle.Please take a look in this jsfidle http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/tickwidth/ but change data by my example data (data: [0,0,0,0,0,0,0,0,0,0,0,0,0]), I test with min but in this scenario with all values in 0 did not work.
Thanks
I solve with min: 0,minRange: 1 in xAxis
I would do this simply by setting the yAxis min and max.
Example:
http://jsfiddle.net/jlbriggs/bKr74/1/
You can move xAxis down using offset property (offset: Number; The distance in pixels from the plot area to the axis line.):
xAxis: {
tickWidth: 10,
offset: -155
},
See example at jsfiddle
I'm trying to add a second Y axis to a StockChart with the Moxieapps Highcharts wrapper, but without success. I need to add a new axis on the right side of the chart, and would expect the following code to work:
StockChart chart = new StockChart();
YAxis firstYAxis = chart.getYAxis(0);
firstYAxis.setAxisTitleText("First Y axis");
Series firstSeries = chart.createSeries();
firstSeries.setPoints(/* Imagine lots of points. */);
firstSeries.setYAxis(0); // Not required since 0 is the default Y axis.
chart.addSeries(firstSeries);
YAxis secondYAxis = chart.getYAxis(1);
secondAxis.setOpposite(true); // *Should* put the axis on the right side.
secondYAxis.setAxisTitleText("Second Y axis");
Series secondSeries = chart.createSeries();
secondSeries.setPoints(/* Imagine lots of points. */);
secondSeries.setYAxis(1); // *Should* add the series to the second Y axis.
chart.addSeries(secondSeries);
// Somehow the second series ends up being in the navigator...
chart.setOption("navigator/enabled", true);
chart.setOption("scrollbar/enabled", true);
add(chart);
The second Y axis does not even render. If I don't add the second series to the second Y axis, it shows up (as expected) as values on the first Y axis.
Has anyone successfully added multiple Y axes on a StockChart, that can tell me what I'm doing wrong here? Thanks a lot in advance!
I had the same problem and it seems that GWT-HighCharts is the problem. You must create YAxises manually via native calls. Here is the solution;
HighCharts Stock Chart error code 18