Im looking for a way to draw a chart where data is represent by one block per date. So if there is a data for this date a colored block appears, otherwise the place is left blank. The goal is to have a visualization of events over time. Where every colored block indicates the occurrence of a specific event.
Is there way to create such a chart using Highcharts and the Highstocks time slider.
Lets say I have event types a, b and c, the result should look like this.
|a| |a| |a|
- - - - - - - -
|b|b|b|b|b|b|b|b|
- - - - - - - -
|c| |c|
- -
I think you are looking for a scatter chart, with custom shapes as markers.
Example how could this be done:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
width: 200,
height: 200
},
xAxis: {
tickInterval: 1
},
series: [{
data: [[0,1], [1,1], [2,1], [3,1], [4,1], [5,1]]
},{
data: [[0,2],[2,2]]
},{
data: [[1,3],[3,3]]
}]
});
And jsFiddle
Related
I was wondering if it would be possible to ignore the sizes of segments in highcharts pyramid. I would like all segments to be of the same size despite the value. The reason is that sometimes differences between values may be quite significant and value of 1 - even being extremely important, becomes invisible when the next value is 500. Also, would like to be able to add a legend if possible. It would be nice to set a minimum size of a segment if not possible to get dynamic sizing disabled.
Thanks for your help!
Pawel
Yes, you can add additional data according to which the height of the segment will be calculated. Next, use keys option to map the values and show the right one in a tooltip and data label:
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.realY}</b><br/>'
},
series: [{
...
keys: ['name', 'realY', 'y'],
dataLabels: {
format: '<b>{point.name}</b> ({point.realY:,.0f})',
...
},
data: [
['Website visits', 15654, 1],
['Downloads', 4064, 1],
['Requested price list', 1987, 1],
['Invoice sent', 976, 1],
['Finalized', 846, 1]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/e83fatk2/
API Reference: https://api.highcharts.com/highcharts/series.column.keys
I'm using Baidu's echarts library
How can I split colors of the area under a line chart after a certain threshold (beyond x-axis) using the areastyle?
Thank you!
You can't.
The areastyle is applied to the series itself, and cannot be tied to individual datapoints. Because the area color actually marks the area between two datapoints.
But.., you can, however, create a workaround and create two linecharts, like so:
legend: {
data: ['myLine']
},
series : [
{
name: 'myLine',
type: 'line',
areaStyle: {
normal: {
color: 'red'
}
},
data: [400, 300, 101, 134, null, null, null]
},
{
name: 'myLine',
type: 'line',
areaStyle: {
normal: {
color: 'green'
}
},
data: [null, null, null, 134, 90, 230, 210]
},
]
By adding it manually to the legend, and by giving both series the same name. ECharts combines the two series to some degree, so both the legend and the animation are acting like it's a single series.
Also, make sure to connect the two lines, by adding a datapoint twice (see 134). And you can customize the lines a little more with lineStyle, etc, to make them look better.
You can create a little demo by checking the ECharts demo gallery and replace the series and legend data with the snippet above (you may have to click the blue run button).
I have 2 Highchart charts: column chart and point chart.
They share same xAxis config:
{
type: 'datetime',
min: Date.UTC(2010, 01, 02),
max: Date.UTC(2010, 01, 14),
startOnTick: true,
}
I want to align their x axises so values on corresponding dates are located on same vertical line.
How can I modify charts so that their x axises are properly aligned?
jsFiddle:
http://jsfiddle.net/vmdLommk/1/
The difference is caused by automatically applied padding to the axis for a column series, to account for the width of the column itself.
There are probably multiple things that can be done, but I find it easiest to manage this way:
Add a dummy column series to your line chart. This will force the same kind of padding that is applied to the column chart.
Example:
{
name: 'dummy',
showInLegend: false,
type: 'column'
}
Fiddle:
http://jsfiddle.net/jlbriggs/vmdLommk/2/
I have a strange behavior with my drill down to a waterfall chart. My middle column which is a negative value is not positioned on the top, instead it is going from zero down.
I have taken the exact same configuration and applied it to a first level waterfall chart and there it works fine.
Expected result: Column 'Discount' should go from 50 to 40
Actual result: Column 'Discount' goes from 0 to -10
JSfiddle for drilldown chart where waterfall is not as I want it:
[Drilldown][1]
JSfiddle for chart where waterfall is correct:
[Waterfall][2]
I can not figure out what is missing.
[1]: https://jsfiddle.net/a5x2g0q8/
[2]: https://jsfiddle.net/jfgycycp/
Based on the Highcharts example of Drilldown from column to pie, you need to set the chart type to be the drilled down type, i.e. to 'waterfall', and set the type of the top level series explicitly, i.e. to 'column'.
Updated chart options with type:
chart: {
type: 'waterfall',
height: 350,
zoomType: 'xy'
},
Updated top level series options with type:
series: [{
type: 'column',
data: [
{
name: 'Sweden',
y: 55,
drilldown: 'Sweden'
}]
}],
Updated Fiddle
Kendo team released their pannable/zoomable chart recently.
I would like to use it but I have the following problem: I need to display only the last X records of the available ones, and display the rest on zoom/ mouse move.
The example they presented on their site: http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom displays the data starting from c0 to c10.
I would like to see the last 10 records from c89 to c99 instead of the first 10.
How to achieve that - can you please advice.
In their example, set the min and max of the category axis:
categoryAxis: {
min: 90,
max: 99,
labels: {
rotation: "auto"
}
},
Updated DEMO