I created an example fiddle. It is using some techniques coming from Nicks answer on this Question.
When I tried to do it with my data model nothing happened. A debug session showed me that if I do:
var maxItems = 1000;
var chartData = new Array(maxItems);
for (var i = 0; i <= maxItems; i++) {
chartData[i] = { y: 3, x: 1380385867013, myData:'hello' };
}
Highcharts will not display anything. If I then change the value of maxItems to 999 it will work.
Another strange thing is, that when I use:
chartData[i] = [ 1380385867013, 3 ];
I can as much items as I want but I need the "myData" option to add tooltips there. What now?
Running your jsfiddle example with opened console log shows:
Highcharts error #12: www.highcharts.com/errors/12
Content of that link:
Highcharts Error #12
Highcharts expects point configuration to be numbers or arrays in turbo mode
This error occurs if the series.data option contains object configurations and the number of points exceeds the turboThreshold. It can be fixed by either setting the turboThreshold option to a higher value, or changing your point configurations to numbers or arrays. See turboThreshold.
Highcharts docs about turboThreshold:
turboThreshold: Number
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
So, users Mark and strikers are right.
Set the turboThreshold: 0 in plotOptions > series option. Like this :-
plotOptions: {
series: {
turboThreshold: 0} }
Related
Im new to Apexcharts, and Im working on implementing a line chart. I have encountered a question about the x-axis of the chart while I am trying to apply an array with a long length(as big as an array of length greater than 500). The x-axis's unit is based on time in the format of "mm:ss", the timestamp in the array converts to "mm:ss" has identical value due to accuracy. For example, in the timestamp array, there are two values "2021-02-16T22:47:30.369704+00:00" and "2021-02-16T22:47:30.119704+00:00", these two values are both "47:30" while convert into a format of "mm:ss". In this case my x-axis values looks like "47:29", "47:30", "47:30", "47:30", "47, 31" with duplicates.
I directly passed the array that holds the converted timestamp to the xaxis config for apexcharts like so:
// This array is not hardcoded like below, this is for elaborate purpose
// In order to get the values in the array, I made a network request which returned to big
// amount of data requires me to plot in to the line chart
cosnt arrayOfMinutesSec = ["00:00", "00:01", "00:01", "00:01", "00:02", "00:02", "00:02",
...., "04:00"];
const options = {
...
xaxis: {
categories: arrayOfMinutesSec,
crosshairs: {
show: true
}
}
...
}
Is there anyway to tell the graph to show by step within a range instead of showing every single element in the array? So something like stepping every 5 seconds "00:00", "00:05", "00:10", ..., "03:55", "4:00"
Much appreciated for any kind of help.
I just figured it out. There is a tickAmount property inside the xaxis property of the options configuration, which allows you to divide the xaxis by the value you pass in.
I am having problems controlling the Y-Axis range of a highcharts graph. It seems like highcharts likes nice round numbers. When my data passes or is close to certain thresholds, the Y-Axis range can expand a lot which effectively compresses all the plot points downward.
Here is a jsfiddle that illustrates the problem I am having:
https://jsfiddle.net/shannonwrege/z8h5eork
The relevant code for this post is this:
chart.yAxis[0].setExtremes(0, max, true, false);
Keep in mind that I don't know what the data will look like in advance, so I must dynamically modify the Y-Axis range. Right now I am using the setExtremes because of other suggestions I've read on stackoverflow.
The maximum y-value of the data in the first two charts is 99. You'll notice that the y-axis is set at 150 in the first chart where the range is automatically calculated and 100 in the second chart where I specifically set the extreme values. The look of the 2nd chart is what I want. So it seems like setExtremes(0,99,true,false) should do the trick, but it actually doesn't.
In the 3rd chart I changed the data so that the maximum y-value of the data is 101, and I called setExtremes(0,101,true,false). You'll note that the y-axis is now back to 150.
Ideally I want the scale of the graph to be capped on the maximum value to limit the about of extra white space. I want to see all of the data, but I don't necessarily care about the y-axis displaying a maximum band that is greater than the max data value. In this case, I would be happy with the y-axis displaying 100 on the axis and some points over but still visible.
Does anyone know how to make this work?
I ended up using the endOnTick parameter to solve this problem. Adding the following line to the yAxis configuration parameters did exactly what I wanted:
endOnTick: false,
Here's the updated Fiddle showing the results.
https://jsfiddle.net/shannonwrege/z8h5eork/3/
All of the charts look pretty good in my opinion (even the one where the yAxis range was auto calculated).
You will need to read the data and then round up to set the idealMax
var chart,
idealMax = 0; // init the max value
// Read the data to find the highest value
for (i=0;i < (options.series[0].data).length; i++ ){
if (options.series[0].data[i][1] > idealMax) {
idealMax = options.series[0].data[i][1];
}
}
// Round the max to the nearest 10
idealMax = Math.round(idealMax / 10) * 10;
options.yAxis.tickPixelInterval = idealMax/10;
Highcharts.chart('container1', options);
chart = $('#container1').highcharts();
chart.yAxis[0].setExtremes(0, idealMax, true, false);
Updated Fiddle
Take this scenario from a graph I'm working on at the moment:
The problem I'm having is in the bottom left. My dataset's first coordinate is defined at approximately (60,5), yet the domain I'm looking to cover extends right down to 0. Is there any way I can get d3 to extrapolate this data to my origin? I've browsed the API but nothing clearly stands out.
I'm well aware I could just .push a new object with coordinates (0,0) onto my dataset array, but I would prefer not to as I may need to do manipulation with my data later, making this an undesirable option.
Since you have not provided a fiddle i chose to put up a small fiddle to explain this:
My Data set is like this:
data = [{
xval: 10,
yval: 100
}, {
xval: 40,
yval: 90
}, {
xval: 50,
yval: 12
}, {
xval: 90,
yval: 70
}]
You can see the values of x and y value varies from 0 to 100.
So you will define the range like:
x.domain([0, 100]);//this will show x axis start from 0
y.domain([0,100]);//this will show y axis start from 0
example here:
as per your requirement you want the y axis to start from 10 so you do
x.domain([0, 100]);//this will show x axis start from 0
y.domain([10,100]);//this will show y axis start from 10
example here
Hope this solves your problem. ..:)
You can also adjust your data domain to the maximum and the minimum using the extent function that d3 provides.
var x_domain = d3.extent(data,function(d){return d.xval});
var y_domain = d3.extent(data,function(d){return d.yval});
x.domain(x_domain);
y.domain(y_domain);
That way the graph will always be adjusted to the data domain in both coordinates whatever data comes.
Watch this working.
Well, I found an answer to my own question here.
d3 will never extend a line beyond the final data point.
The solution is the following:
If your really must have the line start and end at the very end of your range, then you have two options:
Create a custom interpolation function; or,
Add an "end-value" data point when you pass your data array to d3.svg.line.
For me, it looks like I'm going to have to include a "start value" datapoint. Disappointing.
I'm using a line chart to display two series of data. Each series could have skipped values(they initialized with null values). In the result I got a line with breaks. The problem is how to display a continious line in case of skipped values (lower chart on image).
I've searched through all questions tagged with "zingchart", read documentation and examples on zingchart.com" but I couldn't found anything that solves my problem.
Here is the image of two charts (upper - what I get, lower - what I need): http://imgur.com/u7zLq32
EDIT - Updated based off comment
In that case, you'd switch from a one dimensional array to a two dimensional array like this:
values = [
[X, Y]
]
where X corresponds so the X scale value and Y corresponds to the Y scale value.
Here's a demo: http://demos.zingchart.com/view/R93HI801
You can read more about our data values here: http://www.zingchart.com/docs/reference/data-format-by-chart-type/
I'm on the ZingChart team. Let me know if you have any other questions.
Maybe I am not understanding the area chart properly but here is an image to properly display what the problem is and what I am looking for:
Can someone explain why stacking: normal display values like it does? And how to possibly fix it? I have tried stacking: null, and stacking: percent, but both do not give the desired results.
EDIT: I see my error, however, I'm not sure how to fix it. I need to graph the two series in a group so that they are rendered together and not normalized. Any ideas?
When stacking is used, the values of each series for a certain x-value is added together (stacked), and the y-value corresponds to the total of the accumulated series. So the upper graphs looks ok I think.
For 2010-08 its adding 2 + 4 = 6 which is the value of the y-axis and,
for 2010-09 its adding 4 + 4 = 8.
To make your data work with stacking, you want to subtract the 'in-service' from 'total'. Or maybe have two series named 'in-service' and 'out-of-service'. When stacking those two series you will get the total.