I have a page where I can put in two timeintervals and after posting these two timeintervals I get the amount of sold tickets between these two dates.
i get back multiple data depending on how far back I go.
My problem:
If I go as far back as to the first insert of the database.
I will get a high value of for example 200 tickets and after that I calculate the difference between each row in the database which gives me a chart like this:
As you see in the image I would like to reduce the space between the y-axis points in order to see the smaller values better.
In the example above I have a bar that is 160 and other bars that are for example 1 or 2 and I can hardly see them on the chart
Code for this:
buildCharts: function (target, chartData, chartEnum) {
$(target).highcharts({
chart: {
type: 'column',
height: 300,
},
title: {
text: chartEnum.name
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: chartEnum.text
}
},
series: [{
name: 'SystemInfo',
showInLegend: false,
colorByPoint: false,
data: chartData,
turboThreshold: chartData.length + 500
}],
});
}
How can I reduce space between y-axis points?
Using the "tickInterval" attribute is the easiest way to go about this (see http://api.highcharts.com/highcharts#xAxis.tickInterval).
If you wanted to set this based upon the total number of tickets you're viewing (assuming from your question that you can choose the point in time you want to start), what you could do is set that tickInterval based on the length of your series data (for example, if the data more than 100 items, set a tickInterval of 4; otherwise, set a tickInterval of 2 or 1). Do this by creating the chart's options, and then changing the value in the options after you grab your data, but before drawing/redrawing the chart.
Related
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
So I have 6 series I'm using in a single highcharts treemap chart where each series is it's own, smaller tree map. I can't get each of the names of the series to appear in the legend because the showInLegend property is a level above the data property.
I've tried two different configurations. First: series is set to my chartData variable, which looks like:
[{
name: key,
stack: key,
id: key,
showInLegend: true,
color: colors[key],
data: sliced
},
{...}]
And so forth. This gives me a single treemap chart with each series underneath the previous, aka they are stacked on top of each other.
If I combine them all into a single data array, I can get the proper chart format I'm looking for, where each individual series is grouped by color/parent and so forth. This was done using data-less data points, like so:
{
name,
id,
showInLegend,
color
}
and each of the other points then would be:
{
name
parent
value
}
This large data array is then given to a series array that looks like:
[{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: dataArray from above,
}]
Again, I want the chart to be multiple tree maps, not one jammed on top of the other. But i also need the legend to show all of those series' names
You can use unofficial legendType: 'point' property and remove unnecessary elements in afterGetAllItems legend event:
var H = Highcharts;
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
e.allItems.splice(2, 6);
});
H.chart('container', {
series: [{
legendType: 'point',
showInLegend: true,
...
}]
});
Live demo: https://jsfiddle.net/BlackLabel/gp2qmvac/
API Reference: https://api.highcharts.com/highcharts/series.treemap.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts
I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).
There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?
Thanks in advance.
[Edit] Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]
The option markLine is designed for that, see documentation here:
https://echarts.apache.org/en/option.html#series-line.markLine
Note that there are different uses for it, and different options to provide, depending on what you want to draw:
arbitrary line on the canvas (any size, any direction, any style)
lines matching data caracteristics (min, max, average)
horizontal/vertical lines
You have to use the attribute markLine.data in all cases, and description of specifics is described here:
https://echarts.apache.org/en/option.html#series-line.markLine.data
Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
[1509762600, 7.11376],
[1509832800, 7.54459],
[1509849000, 7.64559]
],
markLine: {
data: [
// 1st line we want to draw
[
// start point of the line
// we have to defined line attributes only here (not in the end point)
{
xAxis: 1509762600,
yAxis: 3,
symbol: 'none',
lineStyle: {
normal: {
color: "#00F"
}
},
label: {
normal: {
show: true,
position: 'end',
formatter: 'my label'
}
}
},
// end point of the line
{
xAxis: 1509849000,
yAxis: 3,
symbol: 'none'
}
]
]
}
}]
Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/
Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.
There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});