In highcharts, I have a bunch of simple, standartized categorial data. See fiddle here.
series: [{
name: 'sample element 1',
data: [3, 3, 2]
}, {
name: 'sample element 2',
data: [1, 4, 3]
}, {
name: 'sample element 3',
data: [2, 4, 4]
}, {
name: 'sample element 4',
data: [4, 2, 2]
}]
Is it possible with highcharts to display a categorial scatter diagram, only without the dot overlap in the categories, in the manner shown below? Each value would have its own dot representative, showing distributions for each variable in that way.
Advanced feature: When hovering over a single value dot, the lines between all dots of the corresponding sample element should reappear so that the connections between the values become obvious.
Would that take a lot of deep code customization, or am I better off doing that with a different framework like d3.js? Thanks for ideas!
I have typically done this by adding a decimal to the x value of the points that need to 'stack', as it were.
There isn't a great (easy) way to do it dynamically that I have found, but if your values are going to fall within a fairly controlled range, it works well.
Example:
http://jsfiddle.net/zew9dt8e/2/
In case when values are the same, there are printed in the same place. But you can use http://api.highcharts.com/highcharts#plotOptions.series.pointPlacement to move serie.
Related
When I want to create chart, I found that there is something weird.
The value sequence is correct, but xAxis categories aren't as my expectation.
I want to know how to fix this problem.
If need another information, please let me know.
In the category type axis, the first column is placed on the x=0 at the xAxis, which corresponds to the first value of the categories array. If you set the first series.data x to 1, it takes the second value from the categories array. You can easily fix that, by setting null as the first value:
xAxis: {
categories: [null, 1, 2, 3, 4, 5, 6]
},
Demo:
https://jsfiddle.net/BlackLabel/aemvthz6/
API Reference:
https://api.highcharts.com/highcharts/xAxis.categories
Ive seen this thread:
Chartjs - Stacked bar chart blocking other values
But still its not what im looking for. As author of previous thread pointed
My problem is that chart js is rendering the bar chart based on the order defined on the dataset. As you can see below, the values at index 0 of the arrays are 2500 and 1000. Since the 2500 was passed first, this will block the bar chart of the 1000 value.
https://jsfiddle.net/6bjy9nxh/352/
labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
datasets: [
{
label: '2010 customers #',
fillColor: '#382765',
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: '2014 customers #',
fillColor: '#7BC225',
data: [1000, 1689, 1318, 589, 1199, 1436]
}
]
As my data is dynamic i dont know what value is higher thus i cant make order static.
Current behaviour if bigger data is passed as first:
Current behaviour
Expected behaviour:
Expected behaviour
Why im not accepting answer from previous thread? Because it sums values on Y axis:
answer from other thread
Perhap you could give each of your dynamic datapoints an index, and then use css z-index to change the order of each individual index?
It seems like you can add custom properties to data in ChartJS. (I've not used it before but I've done something similar using Chartist)
My Y-Axis array :
["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"]
The chart doesn't show all number, it only shows 1, 3, 5, and so on. 2, 4, 6 is getting skipped. How do I force Highcharts to show all labels?
JFiddle
What you want is to set the label.step to `:
labels: {
step: 1
}
This forces highcharts to render a label for every category/tick.
The default behavior is to remove ticks if they are too close to one another. You can force all ticks by using a tickPositioner, rather than specifying categories:
yAxis: {
title: null,
tickPositioner: function () {
return [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
}
},
Note the quotes were removed, i.e. the returned array contains numbers (rather than string literals as was the case in the original question). Not sure why it doesn't work with string literals.
See also http://api.highcharts.com/highcharts#yAxis.tickPositioner
By default visjs display every day on the timeline, is it possible to display only events dates? my goal is to make a simple timeline like this one.
Is it possible to do that? Are there other alternative libraries?
To achieve what you are asking for is pretty straight forward, how you would want to tailor it to look as close as possible to the reference will depend on you and what is supported. I have used visjs extensively for a web analytics project that we are currently building.
With the timeline API, after initialising the basic layout. You could simply add a few items in that timeline dataset of the events that you may be interested in.
The code should like something below
var container = document.getElementById('element');
Before anything you will first need to create an element, either directly in HTML or with JS. The choice is yours.
You will then need to grab the element so that the everything can be displayed directly in Element. After these first few steps you will need to initialise a dataset for the timeline. The dataset will be used to hold your data values (items), you can carry out a variety of operations on the dataset post rendering the chart.
var items = new vis.DataSet([])
any options if you wish to add for the timeline.
var options = {}
lastly you have the actual timeline to create
var timeline = new vis.Timeline(container, items, options);
now you need to the few items to the dataset that you had created earlier, this will be where your items you want to tag that will come in. There are a range of options right from what you want it to display to the styling of the item that will come in play.
items.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
That would be one way of doing it. You can find more customisation options with how you want this items to look and behave here
Hope this helps.
I want to use the Highcharts' Master detail chart as visualized here: http://www.highcharts.com/demo/dynamic-master-detail
However, I don't want to use intervals in order for the script to automatically assign Date values to each point of data, because my data are not necessarily continuous. E.g. I might have data for one minute and nothing for the next minute.
Ideally, I want to visualize three days in this chart. Each point will be a value of a specific minute of a specific date.
Any suggestions how I can do that? I don't mind using other libraries, if that's necessary.
Let me know if I didn't make myself clear or if you need more information.
Thank you.
The data properties in the series object can except either an array of values, in which case it will assume data to be equally spaced. Alternatively you can pass an array of arrays, where the outer array has size same as number of points, and each element of this array is another array of size 2, with first element as epochTime and the 2nd being the value. There is also a third option as explained below
Documentation # http://www.highcharts.com/stock/ref/#series--data
Excerpt of the documentation
data : Array<Mixed>
An array of data points for the series. The series object is expecting the points to be ordered from low to high. The reason for this is to increase performance. While in many cases the data is fetched from a server, it's also more convenient to sort on the server and thereby save on client resources. The points can be given in three ways:
A list of numerical values. In this case, the numerical values will be interpreted as y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. Example:
data: [0, 5, 3, 5]
A list of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Example:
data: [[5, 2], [6, 3], [8, 2]]
A list of object with named values. In this case the objects are point configuration objects as seen under options.point. Example:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
View JSFiddle Example