Consider the following series:
[
{
"x": 1447840800000,
"y": 199214,
"num_messages": 6
},
{
"x": 1447842600000,
"y": 27152,
"num_messages": 3
},
{
"x": 1447844400000,
"y": 349919,
"num_messages": 7
}
...
]
Each of the timestamps are a half-hour apart. I'm currently showing 2-weeks worth of data like this on a datetime-formatted Highcharts column chart. I would like to give users the ability to view it in different increments of time, not just the default half-hour. When larger increments are chosen, the y and num_messages values should be summed for whichever data points fall within a given increment.
Currently, I am manipulating the series array manually to create a new series with the desired time increments. But can Highcharts essentially do this for me? Tried googling and looking through the API but didn't come up with anything.
Related
While testing Highcharts v6.0.7 I found that Waterfall chart yAxis point does not accept "low" value anymore (series.data.low). The same option in the Column chart works and the point does not start at the bottom but at the "low" value.
I tried it with an older version (4.2.3) and it works. The reason for using "low" value is that I want to have first point in Waterfall chart start at specified "low" value instead of the bottom of the chart.
I searched through the documentation and could not find any info about this, is this a bug or has this "low" option been removed. And if there is a workaround for this that would give me the same results.
If something "worked" on specific version and wasn't documented at all (I checked the documentation of v4.2.3), then we can assume that was some type of undesirable behaviour. I see that 'waterfall' series inherits from column series, on which the low parameter still works as you described, but it also doesn't occurs in documentation.
If you would like to get similar effect, please try to use series.threshold parameter, but in my opinion both of ways breaks the logic of the chart a bit.
series: [{
threshold: 100000,
data: [{
y: 120000,
}, {
y: 569000,
}, {
y: 231000
}, {
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
}, {
y: -342000
}, {
y: -233000
}, {
isSum: true,
}]
Live example: https://jsfiddle.net/nxwy48uj/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.threshold
I am attempting to create a stacked column chart with an unequal number of "sub-groups".
For example, given the following data:
Category#1 : [SubCategory1: 2, SubCategory2: 4, SubCategory3: 3],
Category#2 : [SubCategory4: 5, SubCategory5: 3],
Category#3 : [SubCategory6: 4, SubCategory7: 3, SubCategory8: 3, SubCategory9: 5]
...
I want to create a column chart where the first column is comprised of three stacked segments and has a total height of 9,
the second column has a stack of two segments with total height of 8,
and the third column has four segments with a total height of 15.
After having worked for a little while with the HighCharts API and generally getting good results, I believe what I want to accomplish is probably doable and I am likely just missing some combination of options or structuring my data incorrectly. Does anyone know what I need to do in order to create such a chart?
Two of the ways you can solve this are:
Giving each point in your series a specific x index that relates to the category index.
Example of a series (JSFiddle):
series: [{
name: 'John',
data: [{x:0,y:5},{x:3,y:7},{x:4,y:2}]
}
Here we skip the 2nd and 3rd category (index 1 and 2), so they will not have a value.
Using null values in your series to skip having it appear in a category.
Example of a series (JSFiddle):
series: [{
name: 'John',
data: [5, null, null, 7, 2]
}
This series also skips the 2nd and 3rd category, like the one above.
Your solution choice may rely on how many null values you would end up with. If it is only a few, then that might be the most lightweight solution. If it is a lot, then using Point objects with x values may be more suitable and cleaner.
I have a Kendo Chart bound to a data model which is receiving a list of different points. The category axis is a date axis in which the maximum and minimum value are bound to the model. Always the span for the category axis is one whole year (12 months, not necessarily beginning from January).
The code for the axis is as follows:
.CategoryAxis(axis => axis
.Labels(labels => labels.Rotation(0).Format("MMM ‘yy"))
.Date().Min(Model.StartDate).Max(Model.EndDate).Justify(false)
)
The category axis renders correctly when I have more than 1 data point present in the chart, however when I have just one datapoint the category axis becomes a mess (all the labels become stacked and repeated).
i was wondering if there is a way to specify a mandatory number of ticks to the axis as to always have just 12 ticks corresponding to each month.
Thanks
Luis.
The only to have all the ticks is to append your data of chart with null values of missing months. So when you have got one data point you need to append other data point with null values but remaining other months. Please see below sample code:
<div id="kk"></div>
<script>
var _data=[{"weight":200,"createddate":"1/1/2014"},
{"weight":200,"createddate":"2/1/2014"},
{"weight":200,"createddate":"3/1/2014"},
{"weight":149.91,"createddate":"4/1/2014"},
{"weight":null,"createddate":"5/1/2014"},
{"weight":null,"createddate":"6/1/2014"},
{"weight":null,"createddate":"7/1/2014"},
{"weight":null,"createddate":"8/1/2014"},
{"weight":null,"createddate":"9/1/2014"},
{"weight":null,"createddate":"10/1/2014"},
{"weight":null,"createddate":"11/1/2014"},
{"weight":null,"createddate":"12/1/2014"}]
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Red"],
seriesDefaults: {
type: "column",
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
}],
categoryAxis: {
type: "date",
baseUnit: "months"
}
});
</script>
Please find a JSFiddle for the same.
This way when you get your JSON Data from Controller, either you can update the JSON Data at Controller Side and Append Missing Data Points with null value or else you can do it in javascript as well once you get the data in the View and before binding it with chart.
i got a pool of data with exact same value in a scatter plot with HighCharts as in :
http://jsfiddle.net/DvbHa/1/
i want to be able to display them in tooltip when i go over it to be able to click them individualy
is something like that possible?
Thx all
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x}, {point.y}'
},
series: [{
data: [[10, 5],
[15, 6],
[10, 5],
[15, 7],
[13, 6],
[13, 6]]
}],
});
});
One option that is implemented in most major data visualization software packages is jittering - a function that adds small amounts of random noise to the data points so that each data point is slightly offset from it's actual data values.
This is a trade off with precision, of course, but those are the kinds of choices that are to be made when displaying data.
There is not a jittering option in Highcharts, but with a little digging you should be able to find or create a solution.
I have had some moderate success doing this on the server side before sending the data to the chart.
First check for any duplicates. If there aren't any, go no further.
If there are, create an array of any duplicate points for any point that has duplicates.
Loop through each array and add random decimal values to the x and y values of each point.
To add click events, use plotOptions.scatter.events.click.
However, I don't know what is the purpose of displaying the same points in the same place with the same value.
Increase size of the plot by using marker radius and you can differentiate the plots at same location.
marker: {
radius: 13
}
http://api.highcharts.com/highcharts/plotOptions.spline.marker.radius
See this one helps or not
Since 7.0.2, HighCharts now does officially support jittering for scatter plots.
See here: https://api.highcharts.com/highcharts/plotOptions.scatter.jitter
I am using highchart, trying to make a chart that shows high and low values for the number of people occupying various rooms. So I have a data like this:
[[roomName, low, high], [roomName, low, high] ...]
For example:
["XRay", 12, 45], ["Waiting Room", 8, 22], ["Admitting", 22, 56]]
What I want to have happen is for the x Axis to use the room names as the values on the category axis. But I can't see to get this to happen. It uses them as the names of the points instead.
If I am just doing a column chart, I can set x and y properties for the points:
[x:"XRay", y:12], [x:"Waiting Room", y:8], [x:"Admitting", y:56]]
But I don't know how I can do this with column ranges.
I can of course manually parse the data and set the categories of the xAxis myself, but I am wondering if there is a better way.
Thanks!
It could be done in two ways, as suggested categories, or using label formatter, both are here: http://jsbin.com/oyudan/17/edit
Formats:
[ {x: 'string' } ... ]
are not proper.