I am using Highcharts for generating a two column bar graph. Means for each day I am showing the number of downloads and number of signups. Now I need to have a drilldown, which shows up the hourly data. The Highcharts docs is showing an example for Signle column by specifying the y value. But as I am showing stached bar, I have two y values for the same date. The code I am using is as follows :
series: [{
name : 'Signups,
color : '#0066FF',
data : <?=$series_1?>, //data in JSON format from PHP
drilldown: true
}, {
name : 'Downloads',
color : '#E81531',
data : <?=$series_2?>, //data in JSON format from PHP
drilldown: true
}],
Example for you for drilldown with two series, with stacking: 'normal': http://jsfiddle.net/6zYmJ/10/
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things2',
colorByPoint: true,
data: [{
name: 'Animals2',
y: 5,
drilldown: 'animals2'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'fruits2'
}, {
name: 'Cars2',
y: 4,
drilldown: 'cars2'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals2',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars2',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
Adding to Pawel Response-
Just replace in plotOptions with this value
column: {
pointPadding: 0.2,
borderWidth: 0
}
,
Related
I'd like to show bar chart with categories on x-axis (say months), multiple series and each bar element containing multiple data points (value shown on y-axis, the rest in tooltip).
It's relatively easy to do it using series.data:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
data: [
['Jul', 320, 2],
['June', 119, 4]],
encode: {
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
data: [
['Jul', 420, 3],
['June', 123, 5]],
encode: {
tooltip: [0,1,2]
}
}
]
};
I'm wondering how it can be refactored best to use dataset? I have two ideas, I wonder what are pros & cons.. Maybe there is other, cleaner way to express it.
Ideally instead of one big array I'd prefer to have array of objects so dimensions are named.
Solution: One dataset, shifting indices
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category'
//, data: ['Jul', 'June']
},
yAxis: {
type: 'value'
},
dataset: {
source: [
['Jul', 320, 2, 420, 3],
['June', 119, 4, 123, 5]]
},
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
encode: {
y: 1,
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
encode: {
y: 3,
tooltip: [0,3,4]
}
}
]
};
With named dimensions it would look like:
dataset: {
source: [
[month:'Jul', SeriesA_dim1: 320, SeriesA_dim2: 2, SeriesB_dim1: 420, SeriesB_dim2: 3],
[month:'Jun', SeriesA_dim1: 119, SeriesA_dim2: 4, SeriesB_dim1: 123 SeriesB_dim2: 5],
},
....
encode: {
y: 'SeriesB_dim1',
tooltip: ['month','SeriesB_dim1','SeriesB_dim2']
}
Solution 2: Multiple datasets
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
dataset: [{
source: [
['Jul', 320, 2],
['June', 119, 4]]
},
{
source: [
['Jul', 420, 3],
['June', 123, 5]]
}],
series: [
{
name: 'Series A',
type: 'bar',
label: {
show: true
},
// data: [
// ['Jul', 320, 2],
// ['June', 119, 4]],
encode: {
tooltip: [0,1,2]
}
}
,
{
name: 'Series B',
type: 'bar',
label: {
show: true
},
// data: [
// ['Jul', 420, 3],
// ['June', 123, 5]],
datasetIndex: 1,
encode: {
tooltip: [0,1,2]
}
}
]
};
With named dimensions it would look like:
dataset: [{
source: [
[month:'Jul', dim1: 320, dim2: 2],
[month:'June', dim1: 119, dim2: 4]]
},
{
source: [
[month:'Jul', dim1: 420, dim2: 3],
[month:'June', dim1: 123, dim2: 5]]
}],
....
encode: {
y: 'dim1', // the default would be likely working as well
tooltip: ['month','dim1','dim2']
}
I'm trying to make an horizontal histogram with y labels on top of each bar with the really nice libray echarts. Here is an example:
Here is where I am with this jsfiddle https://jsfiddle.net/795f84o0/6/ :
Echarts documentation is really good but I did not found a way to put these labels (sankey, funnel, gauge....) on top on each bar :/
Do you have any idea how I can do it? Thank you for your help!
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 10887,
"charts": {
"map": 3237,
"lines": 2164,
"bar": 7561,
"line": 7778,
"pie": 7355,
"scatter": 2405,
"candlestick": 1842,
"radar": 2090,
"heatmap": 1762,
"treemap": 1593,
"graph": 2060,
"boxplot": 1537,
"parallel": 1908,
"gauge": 2107,
"funnel": 1692,
"sankey": 1568
},
"components": {
"geo": 2788,
"title": 9575,
"legend": 9400,
"tooltip": 9466,
"grid": 9266,
"markPoint": 3419,
"markLine": 2984,
"timeline": 2739,
"dataZoom": 2744,
"visualMap": 2466,
"toolbox": 3034,
"polar": 1945
},
"ie": 9743
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
}],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
},
{
data: Object.keys(builderJson.charts),
axisLabel: {
show: true,
},
},
],
series: [{
type: 'bar',
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}]
};
option && myChart.setOption(option);
All right, I got it after two hours...
Just posting a screenshot to show the result:
The fiddle and the code :
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 100,
"charts": {
"pie": 1,
"scatter": 1,
"candlestick": 1,
"radar": 2,
"heatmap": 3,
"treemap": 6,
"graph": 7,
"boxplot": 7,
"parallel": 8,
"gauge": 9,
"funnel": 15,
"sankey": 30
},
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
axisLabel: {
show: false,
},
splitLine: {
show: false
}
},
],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false,
}
},
],
series: [{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
label: {
position: [0, -14],
formatter: '{b}',
show: true
},
itemStyle: {
borderRadius: [0, 2, 2, 0],
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
itemStyle: {
color: 'whitesmoke'
},
label: {
position: 'insideRight',
formatter: function(params) { return 100 - params.value + '%'},
show: true
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}
]
};
option && myChart.setOption(option);
I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur
var options = {
chart: {
height: 150,
type: 'rangeBar',
},
plotOptions: {
bar: {
horizontal: true,
endingShape: 'flat',
columnWidth: '70%',
barHeight: '70%',
distributed: false,
colors: {
ranges: [{
from: 0,
to: 0,
color: undefined
}],
backgroundBarColors: [],
backgroundBarOpacity: 1,
},
dataLabels: {
position: 'top',
maxItems: 100,
hideOverflowingLabels: true,
}
}
},
dataLabels: {
enabled: true
},
tooltip: {
y: {
formatter: function(value) {
return moment(new Date(value)).format("HH : mm : ss :")
}
}
},
series: [{
data: [{
x: 'TEAM A',
y: [1358447400000, 1358620200000]
}]
}],
xaxis: {
labels: {
formatter: function (value, timestamp) {
return timestamp//moment(new Date(value)).format("HH : mm : ss :")
},
}
}
// [{
// data: [{
// x: 'Team A',
// y: [1, 5]
// }, {
// x: 'Team B',
// y: [4, 6]
// }, {
// x: 'Team C',
// y: [5, 8]
// }, {
// x: 'Team D',
// y: [3, 11]
// }]
// }, {
// data: [{
// x: 'Team A',
// y: [2, 6]
// }, {
// x: 'Team B',
// y: [1, 3]
// }, {
// x: 'Team C',
// y: [7, 8]
// }, {
// x: 'Team D',
// y: [5, 9]
// }]
// }],
}
var chart = new ApexCharts(
document.querySelector(el),
options
);
Using Apex Chart I want to plot time stamp. Above code is from documentation. But when I run it its not working when i change to number only it works. What is missing in my code
I have a bar chart with a title on top. How can I go about changing the legend’s position to right of the chart. I searched on other forums but couldn’t find anything. Here is my code:
let ctx = document.getElementById('canvas');
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Votes',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)'
}, {
label: 'Score',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(0, 255, 0, 0.2)'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
You could set legend's position property to right in your chart options, to place the legend at the right side of the chart ...
options: {
legend: {
position: 'right'
},
...
}
ᴅᴇᴍᴏ
let ctx = document.getElementById('canvas').getContext('2d');
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: 'Votes',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(255, 0, 0, 0.2)'
}, {
label: 'Score',
data: [1, 2, 3, 4, 5],
backgroundColor: 'rgba(0, 255, 0, 0.2)'
}]
},
options: {
legend: {
position: 'right'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>