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
}
}
}
}
},
Related
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 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
}
}]
}
}
I am trying to create a bubble chart using DC.js
The sample data I have is:
State_Name Area Cities Villages Population
A 200 60 1050 10000
B 300 80 1100 15678
C 500 20 2220 97767
D 600 90 3400 50000
So, I want to show total three Bubbles on a bubbleChart. The first bubble should represent total Area and rest two should represent total Cities and total Villages respectively. I have made a barChart for States_Names vs Population where xAxis represent States_name and yAxis represent Population. Now I want whenever I click on one or more bars or you can say States_name I should get the sum of Area, Cities and Villages for all those selected States_name. These sum values for Area, Cities and Villages will represent three bubbles on bubbleChart respectively.
For example: if I click on two bars from barChart which represent State_Name = A and B respectively, I
should get three bubbles on bubbleChart. On hovering these three
bubbles I should get values total Area = 200+300= 500, Total
Cities = 60+80 = 140, total Villages = 1050+1100 = 2150 respectively.
For Positioning of bubbles:
I can fix their yAxis position. And, their xAxis position and radius should depend on the value that bubble has. For above example radius of bubble representing total Villages should be larger than the radius of other two bubbles. Similarly, for xAxis position bubble representing total Cities will be on left side of other two bubbles.
I tried code from here: http://jsfiddle.net/gordonwoodhull/37uET/6/
but getting the error: "group.top is not a function". It seems
that code works only for rowChart.
var data = [
{type: 'foo', a: 10, b: 9, c: 11, d: 2},
{type: 'bar', a: 1, b: 4, c: 2, d: 3},
{type: 'foo', a: 0, b: 2, c: 1, d: 22},
{type: 'bar', a: 11, b: 5, c: 6, d: 5}];
var ndx1 = crossfilter(data);
function regroup(dim, cols) {
var _groupAll = dim.groupAll().reduce(
function(p, v) { // add
cols.forEach(function(c) {
p[c] += v[c];
});
return p;
},
function(p, v) { // remove
cols.forEach(function(c) {
p[c] -= v[c];
});
return p;
},
function() { // init
var p = {};
cols.forEach(function(c) {
p[c] = 0;
});
return p;
});
return {
all: function() {
// or _.pairs, anything to turn the object into an array
return d3.map(_groupAll.value()).entries();
}
};
}
var dim = ndx1.dimension(function(r) { return r.a; });
var sidewaysGroup = regroup(dim, ['a', 'b', 'c', 'd']);
var typeDim = ndx.dimension(function(r) { return r.type; });
var sidewaysRow = dc.bubbleChart('#state-donations')
.width(350).height(300)
.dimension(dim)
.group(sidewaysGroup)
.elasticX(true)
.maxBubbleRelativeSize(0.3)
.x(d3.scale.linear().domain([0, 10]))
.y(d3.scale.linear().domain([0, 10]))
.r(d3.scale.linear().domain([0, 400]))
.elasticY(true)
.yAxisPadding(100)
.elasticX(true)
.xAxisPadding(500);
please help!
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