i use bar chart in highchart if my array became more than 15 then it merge them and not show the category in x of
legend: {
enabled: false
},
plotOptions: {
series: {
startFromThreshold: false,
threshold: null,
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}
},
bar: {
cropThreshold:1,
turboThreshold:10000
}
},
jsfid
how can i change the threshold of merging my array items ?
The category labels are hidden ("grouped") because the x-axis is too crowded with labels. You can use xAxis.tickPositioner to override the default tickInterval, as tickInterval may remove ticks if it is too crowded to properly display the labels. You then need to implement the tickPositioner to return all the tick positions you want. In your case, all of them.
For example (JSFiddle), in ES6:
tickPositioner: function() {
return [...Array(this.max - this.min).keys()];
}
Or if you don't want to do ES6:
tickPositioner: function() {
return Array.apply(null, Array(this.max - this.min)).map(function (_, i) {return i;});
}
Where this is the x-axis, and min and max are are the are used to find the range of the axis.
Related
I have multiple charts on the same page, and the goal was to have same max values for each of the metrics on all charts to make comparison of charts easier ( https://www.screencast.com/t/vtF6h5ZRWS )
I've tried with max values and min values, but it doesn't works, probably because of multiple y-axises.
Now I'm trying to use tickpositions (which I'm calculating in backend) and passing it to chart. But here is the problem with tick alignment on opposite axes and it appears as shown https://www.screencast.com/t/iwnGOhJFb
Below is the small part of code how I set the tick positions and the fiddle of simpler version of chart that I have (I had more y axis's)
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Impressions',
style: {
color: Highcharts.getOptions().colors[2]
}
},
tickPositions: [0, 5500000, 11000000, 15000000]
}
http://jsfiddle.net/j82oen9c/8/
How can I achieve tick alignments on all y-axis's ?
In order to align the ticks on both axes, you can use two different approaches.
FIrst one is by define your own Axis.tickPositioner function which returns calculated array of tickcs adjusted to your needs.
Moving on, you need to get the same amount of ticks on both axes, and they should lay on the same positions on axes, so the positioner function should receive two arguments - maxValueOfCurrentAxis and tickAmount. I wrote the function like that:
var positioner = function(tAmount, axisMax) {
var positions = []
for (var i = 0; i < tAmount; i++) {
positions.push(Math.round(((axisMax / tAmount) * i) * 100) / 100)
}
positions.push(axisMax)
return function() {
return positions
}
}
and now, we need to assign this function with specific parameters as the Axis.tickPositioner, and define the amount of ticks and max values of both axes:
var tickAmount = 3
var firstAxisMax = 15000000
var secondAxisMax = 2
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Impressions',
style: {
color: Highcharts.getOptions().colors[2]
}
},
tickPositioner: positioner.apply(this, [tickAmount, firstAxisMax]),
}, { // Secondary yAxis
gridLineWidth: 0,
tickPositioner: positioner.apply(this, [tickAmount, secondAxisMax]),
title: {
text: 'eCPM',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} $',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
Live example: http://jsfiddle.net/vL324nqx/
The second way out of that issue, but not so much adjusted to your needs, is by using Axis.tickPixelInterval property on both axes. There is no need to explain it more precisely, because there are clear informations about that in API.
Live example: http://jsfiddle.net/mqget4hb/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositioner
https://api.highcharts.com/highcharts/yAxis.tickPixelInterval
Why is it that when there are only a few values in an NVD3 scatterplot, the tick spacing spreads out immensely? I would think the ticks should be independent of the number of values, but that doesn't seem to be the case.
Compare this plunker with their example. The only difference is the number of values being plotted, and yet their example shows many ticks, whereas my plunker shows only a few.
How can I cause the ticks to space nicely at all zoom levels when the plot is meagerly populated?
I thought about defining specific tickValues like this:
chart: {
type: 'scatterChart',
// ...
xAxis: {
// ...
tickValues: d3.scale.linear().domain([-100,100]).ticks(500)
},
yAxis: {
// ...
tickValues: d3.scale.linear().domain([-100,100]).ticks(500)
},
zoom: {
enabled: true
}
}
but that only looks decent at certain zoom scales.
There's an option for ticks that I missed, as mentioned by krispo:
chart: {
type: 'scatterChart',
// ...
xAxis: {
// ...
ticks: 10
},
yAxis: {
// ...
ticks: 10
},
zoom: {
enabled: true
}
}
plunker
I am using a line chart. I feed the data the following:
var scheduled = [[51,1700],[52, 1750],[1,1600],[2,1675]];
var actual = [[51,1320],[52, 1550],[1,1575],[2,1600]];
In the above the first number of each set is the week of the year and I am trying to show the last 4 months of data.
However, when the chart is drawn Flot charts re-sorts the data by the first value (lowest to highest) which creates all kinds of issues. Instead of 4 columns in the series there are now 52, and the lines are quite out of whack.
I don't see anything in the documentation that says this is supposed to happen, nor do I see anything that says I can prevent it. However, for the data to be meaningful, the data must not be re-ordered.
Is there a setting I'm unaware of that can stop this behavior?
Edit : Adding plot code
var plot = $.plot('#scheduled-actual-flot-line', [
{
label: 'Scheduled Hours',
data: scheduled,
lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
points: { show: true, radius: 4 }
},
{
label: 'Actual Hours',
data: actual,
lines: { show: true, lineWidth: 2, fill: true, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.5 }] } },
points: { show: true, radius: 4 }
}],
{
series: {
lines: { show: true },
points: { show: true },
shadowSize: 0 // Drawing is faster without shadows
},
colors: ['#afd2f0', '#177bbb'],
legend: {
show: true,
position: 'nw',
margin: [15, 0]
},
grid: {
borderWidth: 0,
hoverable: true,
clickable: true
},
yaxis: { ticks: 4, tickColor: '#eeeeee' },
xaxis: { ticks: 12, tickColor: '#ffffff' }
}
);
Flot takes the x values as numbers and displays / sorts them accordingly. If you don't want that, you can use the category mode (see this example and this fiddle with your data).
xaxis: {
//ticks: 12,
tickColor: '#ffffff',
mode: 'categories'
}
PS: 12 ticks are not possibly with your data, as there are only 4 datapoints defined.
That flot reads all data as numbers by default is described here in the documentation.
Flotr examples use a for loop to create random data, so the first index will always be sequential.
[[51,1700],[52, 1750],[1,1600],[2,1675]];
Your arrays show that flotr must be doing a sort on the array before painting the data sets as lines, bar-graphs or whatever.
I can only suggest you create a timestamp from the months and there's a time setting you can in flotr settings to format the dates as you want.
The other way is replace your anomalous data (months) with sequential indices:
var arr = [[51,1700],[52, 1750],[1,1600],[2,1675]];
for(var i=0; i<arr.length; i++) arr[1][0] = i;
Flot is doing exactly what it should do for a line chart (or any type of x-y graph). It's showing the last two points of your dataset on the left because 1 and 2 are indeed less than 51 and 52. I'm guessing that you're trying to show data that crosses a year boundary. You need to make the first two weeks of the second year later than the last two of the first. You could use actual dates instead of week numbers, in which case Flot would handle it fine. That would also give you more flexibility in labeling the x-axis. But as a quick fix, just add 52 to the second year's data, e.g.:
var scheduled = [[51,1700],[52, 1750],[53,1600],[54,1675]];
var actual = [[51,1320],[52, 1550],[53,1575],[54,1600]];
I used pointInterval property to set interval as 30 days but my data set contains daily data.
That method is not working. chart is displaying all the points.
please check below image for the chart i got
https://docs.google.com/file/d/0B1wfs7NUcZnGQkk2QWdEbE9ndmM/edit
What is needed is to draw only three points for three months in the above chart.
Following is the code i used to do this.
Note that 'options.data.points' has data set in format of [[date,value],[]....]
var stockChartData = {
chart: {
renderTo: 'container'
},
title: {
text: "Stock Chart"
},
credits: {
enabled: false
},
yAxis: [
{
labels: {
align: 'left',
x: 2
},
title: {
enabled: false
},
lineWidth: 2
}
],
navigation: {
buttonOptions: {
enabled: false
}
},
scrollbar: {
enabled: false
},
series: [{data: options.data.points, type: 'line', pointInterval: 24 * 3600 * 1000 *30}]
};
stockChart = new Highcharts.StockChart(stockChartData, function (chart) {
});
please help me to solve this issue
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/pointinterval-pointstart/
The data set this example uses is in the format of [value,value,...] (see http://www.highcharts.com/samples/data/large-dataset.js).
So when pointInterval for a month is used, for example the last two values will be used for the values of last two months. For the same data when pointInterval for a year is used, the same last two values is used for the last two years. So the chart doesn't ignore the between values, therefore you will not have for example an average value of the month for day values.
EDIT:
You can use plotOptions.series.dataGrouping for grouping the day values in a month:
http://jsfiddle.net/worhscy0/
I used to draw this kind of chart (one vertical axis, one horizantal axis):
Now i have been asked to do this kind of chart:
as you see, the problem with the ordered chart that it contains (two vertical axis, one horizantal axis).
My question
does flot or any other jquery library able to do that please?
See the flot example here on multiple axis. Minimal example:
$.plot("#placeholder", [
{ data: d1 },
{ data: d2, yaxis: 2 } // set second series to use second axis
], {
yaxes: [ {
min: 0 // options for first axis
}, {
alignTicksWithAxis: 1 // options for second axis, put it on right
position: "right"
} ],
});
Two mix a bar and line chart set that in each's series object:
$.plot("#placeholder", [{
data: d1,
lines: { show: true }
}, {
data: d2,
bars: { show: true }
}]);
Putting these together, here's an example: