From the official documentation I can't get if it is possible for me to build a chart in the way I want.
Simple example of the initial data:
{
'Player1': {'item1': '50'},
'Player2': {'item1': '60', 'item2': '20'},
'Player3': {'item3': '40'}
}
It is like the 3 dimensions: Players/Items/Values.
I would like to build a chart with the column type.
X-Axis for the PlayerNames and Y-Axis for the Values.
The Items might be like the series-names so I can select them one by one and switch their visible option.
The issues - is that I don't get how to properly build the series and is that possible to bind their values between X-Y:
series: [{
name: 'item1',
data: [{x: 'Player1', y: 50}, {x: 'Player2', y: 60}],
visible: false
},
{
name: 'item2',
data: [{x: 'Player2', y: 20}],
visible: false
},
{
name: 'item3',
data: [{x: 'Player3', y: 40}],
visible: false
}
]
This would let me to show on the X-Axis only the colums that actually have the data. Without the empty space.
Can I achieve this somehow?
Thanks!
I was lucky to find the way how to do it:
First of all I should mention that x works only for the numbers:
x: number
Here is the way how to do it for string values:
xAxis: {
type: 'category',
},
And then just as:
series: [
{
name: 'item1',
data: [['Player1', 50], ['Player2', 75]],
visible: true
},
{
name: 'item2',
data: [['Player1', 25], ['Player3', 60], ['Player4', 40]],
visible: false
}
],
Related
I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.
Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];
You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result
I have use highcharts series type 'flag' and have some data points.
I have a situation when my data points list from e.g. [-100;100]
But some flags value are out of this range. I cannot find any solution do show these flags which out of range.
The flag is not located on the line series because the x value is outside the range:
series: [{
id: "data",
data: [
[1569269259533, 100],
[1569269319534, 100]
]
}, {
type: 'flags',
useHTML: true,
y: -18,
id: 'flags',
onSeries: 'data'
}],
chart: {
events: {
load: function(e) {
var flagSerie = this.get('flags');
flagSerie.setData([{
x: 1569269299533,
count: 3
}]);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/rmonx6Lz/
API Reference: https://api.highcharts.com/highstock/series.flags.onSeries
I have created an eCharts barchart and I just want to swap the x and y axes
I have tried just swapping the data objects for the axes but that doesn't work and googling hasn't turned up much at all.
This is the initialisation script for the bar chart
var chart = echarts.init(document.getElementById('chart'));
var option = {
yAxis: {
name: '',
data: ''
},
xAxis: {
name: '',
data: ["CARH" , "CDFR" , "HGA" , "O2RG" , "SHLA" , "SHWS"]
},
series: {
name: '',
type: 'bar',
data: [100.29, 101.05, 100.78, 96.3, 101.8, 99.9]
}
};
chart.setOption(option);
It seems all the properties of option must be wrapped in arrays, and xAxis should be left empty:
option = {
yAxis: [{
name: '',
data: ["CARH" , "CDFR" , "HGA" , "O2RG" , "SHLA" , "SHWS"]
}],
xAxis: [{}],
series: [{
name: '',
type: 'bar',
data: [100.29, 101.05, 100.78, 96.3, 101.8, 50]
}]
}
I found the solution by finding an example of an echart horizontal barchart, and removing options that did not alter the "horizontalness" of the chart. Then I compared this minimal set of options to the one given in the question.
Try this:
var option = {
yAxis: [{
name: '',
data: ["CARH" , "CDFR" , "HGA" , "O2RG" , "SHLA" , "SHWS"]
}],
xAxis: [{
name: '',
data: ['100.29', '101.05', '100.78', '96.3', '101.8', '50']
}],
series: [{
name: '',
type: 'bar',
data: [1 , 2 , 3 , 4 , 5 , 6]
}]
};
in my nvd3 config json :
x: function(d){ return d.date; },
y: function(d){ return d.failed; },
and my JSON is,
vm.data7 = [{
values: [
{
'date' : '2016-04-01',
'fail': 2,
'success':5
},
{
'date' : '2016-04-02',
'fail': 2,
'success':5
}
]
}]
this code will show failed value by date, but i want to show 2 values in single graph (failed and success).
I move from nvd3-charts to n3-charts, and my problem is solve because my JSON structure supported nativelly in n3-charts documentation without pain to re-mapping my JSON. May, i can't solve in nvd3-charts but it can solve in n3-charts as i need, thanks :)
n3-charts data variable like :
{
dataset: "dataset",
key: 'fail',
type: ['line', 'dot', 'area'],
label: 'Two',
color: "rgb(200, 96, 69)",
interpolation: {mode: 'cardinal', tension: 0.7}
},
{
dataset: "dataset",
key: 'success',
type: ['line', 'dot', 'area'],
label: 'Three',
color: "rgb(119, 48, 131)",
interpolation: {mode: 'cardinal', tension: 0.7}
}
I have created a chart with drilldown using sample given on fiddle
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/async/
When I click on first level it is sucessfully adding chart for next level by using
chart.addSeriesAsDrilldown(e.point, series);
My problem is, now i want newly added chart also have drilldown. I dont know how to achieve this. Any help will thankful.
Regards
I found the solution to this. Actually when data is fetched from web service as json for the next level of drilldown I had to make sure the property drilldown needed to be set to true which I was not doing earlier after some research I found it. I have given some data in json format below with reference to the example on fiddle.
When first level was clicked I was going to web service and fetching data as
"{\"name\":\"Animals\",\"data\": [[\"Cows\", 2],[\"Sheep\", 3]],\"drilldown\": true}"
which was not enabling drilldown for the next level. In order to allow drill down further I had to modify the above data as below where in I have added property drilldown to be as true
(name == "Animals") resp = "{\"name\":\"Animals\",\"data\": [{\"name\":\"Cows\", \"y\": 2, \"drilldown\": \"true\"},{\"name\":\"Sheep\",\"y\": 3,\"drilldown\":\"true\"}]}";
That is all, seems simple :)
Will try to create sample on Fiddle if I get time and will update link if done so.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
{
name: 'Toyota',
y: 4,
drilldown: true
},
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
})
});