How could we plot graphical representation using High Charts where one x-axis value have multiple y-axis value
and for each x-axis value number of y-axis value differs.
I have date on x-axis and on y-axis the readings.
Now, i have data for each date, but the number of reading may differ for different dates. Like for today i have 5 readings and yesterday it was 10 readings.
So i have the data Date vise. and i want to plot it on graph with positive and negative values. I do some RnD for high charts for this, but highcharts dont show the reading receptive with this scenario, or may be i didnt get it. Can anybody help me in this.
Data I have:
1) Date: 1/8/2017
Values:[12,56,-14,35,8]
2) Date: 2/8/2017
Values:[3,9,-4]
3) Date: 3/8/2017
Values:[8,-6,45]
Thank you for the help
You can use the scatter series: https://www.highcharts.com/docs/chart-and-series-types/scatter-chart
Live demo adjusted to your problem: http://jsfiddle.net/kkulig/c6w79bd0/
If you have data composed similarly to this:
var data = [{
date: Date.UTC(2017, 0, 1),
values: [4, 5, 6, -2]
}, {
date: Date.UTC(2017, 0, 2),
values: [3, -7]
}, {
date: Date.UTC(2017, 0, 3),
values: [0, 11]
}];
You can prepare it this way:
var series = {
data: []
};
data.forEach(function(day) {
day.values.forEach(function (value){
series.data.push([day.date, value]);
});
});
Related
I have a chart like this, you can see that only about 22 points in the chart from left to right. I want to increase this, so that there are more points. Right now it seems very jumpy, but the range is only between 10-11.5, I want to "zoom out" so the line almost looks flat, and these huge peaks and valleys look like little bumps. I've combed over the highcharts documentation and cannot find this config setting.
In the initial creation of the spline chart, an array of point is created, in the default case it is 49 samples, here I changed it to 200, which did what I needed.
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -200; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
When the highstock chart data set has multiple points on the same axis ex:
data: [[0,0], [0, 100], [1, 100], [1,200], [4, 100], [4, 200]]
the point doesn't always choose the highest number by default. It looks like it randomly selects one of the numbers on the same axis.
Here's my fiddler example: http://jsfiddle.net/ceo1y97m/
As you can see when you hover over the different points, it's not always displaying the highest point's Y value. How do I get this to show only the highest point's value?
Edit: Here is the reason that I have multiple x values that are the same:
Let's say the line represents the amount of money you deposit into an account over time. In the line's legend I want to display the amount you've deposited over the period that you're viewing. This would be the furthest point right's Y value minus the furthest point left's Y value. If I don't include the duplicate Y values, this calculation is incorrect.
See updated fiddler to show this error on the legend value (zoom in and out to change the legend values): https://jsfiddle.net/LS384/822/
The two data sets look identical, but the legend values are different, because both points on the same axis aren't displayed.
I'm not sure that this is how the step chart was intended to be used, you should have just 1 value per axis point.
What you could do is filter your data to just keep the highest value for each point
data: [[0,0], [0, 100], [1, 100], [1,200], [4, 100], [4, 200]]
for (var i in data) {
if (filteredData[data[i][0]] == undefined) {
filteredData[data[i][0]] = data[i]
} else {
if (filteredData[data[i][0]][1] < data[i][1]) {
filteredData[data[i][0]] = data[i];
}
}
}
here is your edited filter with the chart looking the same and you desired behaviour http://jsfiddle.net/ceo1y97m/4/
Edit:
I made a workaround, i hid the unfiltered data, used the filtered data for display and gave it the same color as the unfiltered one, and in the function that calculates the difference i use the unfiltered data(ch.series[0].data])
Here is the fiddle with your expected behaviour https://jsfiddle.net/LS384/826/
I would process the data, so you have one point per x value with additional information - multiple values. I treat { x, y } as the information about how the point should be visualised plus add the array with all additional values which allow to make the proper calculations.
This:
[
[0, 0],
[0, 100],
[1, 100],
[1, 200],
[1, 300],
becomes this:
[{
x: 0,
y: 100,
values: [0, 100]
}, {
x: 1,
y: 300,
values: [100, 200, 300]
}]
With points defined as the above, you can access the values via point.options.values and calculate the difference.
example: http://jsfiddle.net/jqdh79vv/
Not able to display data in heat map coming from JSON. Only X and Y axis are shown.
var data1=[
["2016-01-01", 0, 20.0],
["2016-01-01", 1, 9.0],
["2016-01-01", 2, 10.0]
]
[Fidlele link][1]
http://jsfiddle.net/nxgzeo34/2/
Please advise
hello I want to create line chart similar to healthkit. For example i have on X axis (Jul 14, 15, 16, 17), Y axis (0, 50, 100) and data set in (x,y) format is ((jul 15, 30),(jul 17, 80))
I try following libraries
https://github.com/Boris-Em/BEMSimpleLineGraph/tree/master/Sample%20Project/SimpleLineChart
https://github.com/core-plot/core-plot
but all populate x axis based on data set. i.e all library only take parameter for data set based on that x axis and y axis labels are populated. Can you please suggest any other library through which I can achieve similar as explain above line chart. Thanks in advance.
Finally i solved my problem using
https://github.com/Boris-Em/BEMSimpleLineGraph/tree/master/Sample%20Project/SimpleLineChart
when there is no value i put (jul 15, BEMNullGraphValue).
Even this you could do it in your existing graph
Consider below example.
- {[0,5],[1,5],[3,5],[4,5]}
See there is no value for 2, so line chart will draw 0-5 to 1-5 then gap then 3-5 to 4-5.
I hope now you could figure out.
Still if you wish then get below graph library.
Do it with https://github.com/danielgindi/Charts
There are many properties like clip, scale, min, max etc for line chart.
Using though properties you could achieve.
https://github.com/danielgindi/Charts/issues/533
Edited answer
After doing some work around, i found the way.
Download sample code
let months = ["July 14", "15", "16", "17", "18", "19", "20"]
let unitsSold = [0.0, 0.0, 0.0, 100.0, 25.0, 50.0, 75.0]
for i in 0..<dataPoints.count {
if !values[i].isZero {
let dataEntry = ChartDataEntry(value: Double(values[i]), xIndex: i)
dataEntries.append(dataEntry)
}
}
Refer attached screen shot
In PNChart create one array of indexes which you want to skip the value. Put condition drawdot funtion on start of for loop of data array if array contain index value then continue.
Is there a way to get only three steps on the xAxis, one at start, one in the middle and one in the end. I've played around with xAxis.labels.steps but I couldn't get an reliable result.
Note the xAxis type is datetime.
There is at least three ways to achieve that (which are automatically):
Use tickPositioner (the best IMHO): you have full access to decide where tick should be set (for example: [min, average, max]).
Use tickPixelInterval: useful only when you have fixed width of the chart, and when interval will be multiple of ncie numbers (like 0 - 1 - 2, or 100 - 200 - 300)
Use tickInterval: useful only when you know range of xAxis, for example 0-10, so you can set tickInterval: 5
And jsfFiddle with compare: http://jsfiddle.net/FQ68Y/3/
You can do this with the tickPositions option or the tickPositioner function:
http://api.highcharts.com/highcharts#xAxis.tickPositioner
tickPositions: [0, 1, 2]
or something like:
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 2);
for (; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
return positions;
}
As the other answers mention there is the tickPositioner field. For some reason it dont work out of the box. I had to add an info property to the returning array to get the xAxis to display formatted dates instead of just the milliseconds, as found in this fiddle.
tickPositioner: function (min, max) {
var ticks = [min, min + (max - min) / 2, max];
ticks.info = {
unitName: 'hour',
higherRanks: {}
};
return ticks;
}