I am working with Chart.js on Asp.Net and I have a bar chart. My dataset has not very close numbers so I can not determine any fixed stepSize for this dataset.
My dataset like that;
[105000,200000,310000,0.0002]
So, y-axis range seems like that [0 - 100000 - 200000 - 300000 ...] but I want to show it like that [ 0 - 0.005 - 100000 - 200000 - 300000 ...].
My chart options :
options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
responsive: true,
mainAspectRatio: false
}
}]
}
}
I tried to add to options "suggestedMin: 0.005" but y-axis values didn't change.
How can I define custom scale for y-axis?
Try to use the callback property:
options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
responsive: true,
mainAspectRatio: false,
callback: (v) => !!~[0, 0.005, 100000, 200000, 300000].indexOf(v) ? v : '',
min: 0,
max: 300000,
step: 0.005
}
}]
}
}
Related
By default, Sabre does not return the cheapest results. It returns some sort of different price categories. How can I get the cheapest N (20, 50, 100, ...) prices?
This is my code:
"TPA_Extensions": {
"IntelliSellTransaction": {
"RequestType": {
"Name": "20ITINS"
}
}
},
I'm trying to show a line and % changes in a single highchart plot, but the changes are very little and It can't be seen in the plot. I made a simplified code to show my problem:
a <- c(300,200, 400, 10, 40, 80)
b <- c(0.8, 2, -2, -1.5, -1.1, 2)
d<-cbind(a,b)
dt <- seq(as.Date("2018-01-01"), as.Date("2018-01-06"), by = "days")
ts <- xts(d, dt )
highchart(type="stock") %>%
hc_add_series(ts$a,
type = "line",
color="black") %>%
hc_add_series(ts$b,
type = "lollipop",
color="red")
I need to increase the size of "ts$b" in the plot, how can I do it? I also tried with two axis, but It seems doesn't solve the problem.
I see two solutions to achieve that.
The first you mentioned - using two yAxis and manipulating their height and top distance.
Example JS code:
yAxis: [{
height: '90%',
opposite: false
},
{
visible: false,
top: '83%',
height: '15%',
}
]
Demo:
https://jsfiddle.net/BlackLabel/0826r7sh/
Another way is using a modified logarithmic axis. Negative values can't be plotted on a log axis, because by nature, the axis will only show positive values. In that case you need to use a custom extension according to the following thread:
Highcharts negative logarithmic scale solution stopped working
(function(H) {
H.addEvent(H.Axis, 'afterInit', function() {
const logarithmic = this.logarithmic;
if (logarithmic && this.options.custom.allowNegativeLog) {
// Avoid errors on negative numbers on a log axis
this.positiveValuesOnly = false;
// Override the converter functions
logarithmic.log2lin = num => {
const isNegative = num < 0;
let adjustedNum = Math.abs(num);
if (adjustedNum < 10) {
adjustedNum += (10 - adjustedNum) / 10;
}
const result = Math.log(adjustedNum) / Math.LN10;
return isNegative ? -result : result;
};
logarithmic.lin2log = num => {
const isNegative = num < 0;
let result = Math.pow(10, Math.abs(num));
if (result < 10) {
result = (10 * (result - 1)) / (10 - 1);
}
return isNegative ? -result : result;
};
}
});
}(Highcharts));
.
yAxis: {
type: 'logarithmic',
custom: {
allowNegativeLog: true
}
},
Demo
https://jsfiddle.net/BlackLabel/nw6osucm/
I came Across heatmapGridSeries in lightning chart , I just want to know if this is possible.
Please Check above image , I have lineseries with one axis.. and i want this color bands above the line series with opacity.
For example
if I add value to the heatmapGridSeries from 0 to 100 , it should automatically show orange.. from 100 to 200 it should show green and so on.
Can be done, but shouldn't be a very practical usage case for heatmaps.
Paletted/gradient series background or bands should give nicer results.
Here's a snippet that looks like your picture (without the line series), and also adds a single Band so you can see how they behave a bit differently.
Transparency can be added after R,G,B.
const {
lightningChart,
LUT,
PalettedFill,
ColorRGBA,
emptyLine,
SolidFill,
AxisScrollStrategies,
} = lcjs
const chart = lightningChart().ChartXY()
const line = chart.addLineSeries()
const heatmap = chart.addHeatmapScrollingGridSeries({
scrollDimension: 'columns',
resolution: 1,
step: {
x: 1,
y: 1,
},
})
const transparency = 100
heatmap
.setFillStyle(new PalettedFill({
lut: new LUT({
steps: [
{value: 0, color: ColorRGBA(255,127,39, transparency)},
{value: 1, color: ColorRGBA(181,230,29, transparency)},
{value: 2, color: ColorRGBA(112,146,190, transparency)},
{value: 3, color: ColorRGBA(255,242,0, transparency)},
{value: 4, color: ColorRGBA(237,28,36, transparency)}
]
})
}))
.setPixelInterpolationMode('disabled')
.setWireframeStyle(emptyLine)
chart.getDefaultAxisX().setInterval(-10, 0).setScrollStrategy(AxisScrollStrategies.progressive)
line.add({x:0,y:0})
let x = 1
setInterval(() => {
const y = Math.random()
const p = {x, y}
line.add(p)
const iColor = x % 5
heatmap.addIntensityValues([[iColor]])
x += 1
}, 1000)
<script src="http://unpkg.com/#arction/lcjs#3.1.0/dist/lcjs.iife.js"></script>
I am using EON plot (which is just using c3.js) to plot real-time timeseries graphs. I am using the subplot because I want to be able to see 12 hours of data at once. However, I have a issue where there are way to many ticks on the subplot or way to few on the main plot. How can I specify a different tick style for each? I am trying to do this in the subplot, but it doesn't work. Below is my generate call and a screenshot (note how the ticks in the subplot make a giant smear). What I would like to do is just have 12 ticks/labels shown in each plot regardless of the data that is being shown.
generate: {
transition: {
duration: 3
},
bindto: '#TimeSeries',
point: {
show: false
},
data: {
x: 'x'
},
subchart: {
show: true,
tick: {
count: 12,
format: '%H:%M',
culling: {
max: 12 // the number of tick texts will be adjusted to less than this value
}
}
},
zoom: {
enabled: false
},
axis: {
x: {
type: 'timeseries',
tick: {
count: 24,
format: '%H:%M',
culling: {
max: 12 // the number of tick texts will be adjusted to less than this value
}
}
}
}
},
I am using rickshaw graph to visualize my time series.
In the tutorial, we need data pair (x, y), where y has to be type double or int to plot like:
var data = [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 } ];
is there anyway I can put string at y, like
var data = [ { x: -1893456000, y: "ID12" }, { x: -1577923200, y: "ID10" }, { x: -1262304000, y: "ID8" } ];
because I want to use the example http://code.shutterstock.com/rickshaw/examples/hover.html
to show the timeseries of IDs when mouse over.
Thanks
I dont think it works this way. But what you can do is, use a numeric Y value (eg 12 for ID12) and use a yFormatter in your hoverDetail:
var hoverDetail = new Rickshaw.Graph.HoverDetail({graph: graph,
xFormatter: function(x) {return x},
yFormatter: function(y) {return "ID"+y}
});
I think this should do the Trick