Develop Reference

How can I fit series with different lengths inside same axis with Apache ECharts?

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

using MapBubble in country Chart in Highcharts

So I have is a dummy data of Indian Country Map. For example, I am using the Highchart's Indian Map Dummy Data.
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/in/in-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: India'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
type: 'mapbubble', // This I added
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
This is the example I am using : https://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/in/in-all
But When I am trying to Channge the Chart to MapBubble Type . The Chart is getting Vanished :
Like in the link below
https://jsfiddle.net/abnitchauhan/tdk7a8ex/
I Want the Chart to have mapBubble. but its throwing an error.
Any Help is really appreciated.

You need another series for map data and a data in the bubble series with z values:
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
keys: ['hc-key', 'z'],
joinBy: ['hc-key'],
data: data,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/wj7rzq2p/
API Reference: https://api.highcharts.com/highmaps/series.mapbubble.data

HighMaps Not displaying Country Data

I am using Highcharts Js to display the Highmaps map bubble data. but the problem is that the Chart not plotting the bubble on Kosovo Country . For Example
if I have a JSON Data as Follows .
[
{"Country":"kosovo","persons":"2","CountryCode":"XK"},
{"Country":"india","persons":"2","CountryCode":"IN"}
]
The Map is being displayed with only India Country Data. and shows nothing of Kosovo Country.
This is The Javascript i used :
var data_country = [{"Country":"kosovo","persons":"2","CountryCode":"XK"},
{"Country":"india","persons":"2","CountryCode":"IN"}
] ;
data_country = data_country.map(function(el){
return {name: el.Country, z: parseInt(el.persons), 'iso-a2': el.CountryCode}
})
Highcharts.mapChart('world-map', {
chart: {
plotBorderWidth: 1,
plotBorderColor: '#ffffff',
borderColor: "#ffffff",
plotBackgroundColor: '#FFFFff',
map: 'custom/world'
},
title: {
text: "" ,
enabled: false
},
credits: {
enabled: false
},
exporting:{
enabled: false
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
states: {
inactive: {
opacity: 1
}
},
enableMouseTracking: false
}, {
type: 'mapbubble',
name: '',
joinBy: 'iso-a2',//'iso-a3', 'code3'],
data: data_country,
minSize: '4%',
color: '#577ba8',
marker: {
fillOpacity: 0.9
},
maxSize: '4%',
tooltip: {
pointFormat: '{point.properties.name}'
}
}]
});
Please Tell me If I am missing something or is this an Highmaps error.

I see you are using the unofficial country code, as it has no official ISO country code:
The unofficial 2 and 3-digit codes are used by the European Commission and others until Kosovo is assigned an ISO code.
I also see that using KV in Highmaps seems to work. I'm not sure why they are using this partical country code. For example, from you code (JSFiddle):
var data_country = [{"Country":"kosovo","persons":"2","CountryCode":"KV"},
{"Country":"india","persons":"2","CountryCode":"IN"}
];
data_country = data_country.map(function(el){
return {name: el.Country, z: parseInt(el.persons), 'iso-a2': el.CountryCode}
});

Using JSON file in Highcharts

I have a series of high and low temperatures that I would like to display in a column range chart with Highcharts.
I would specifically like a chart like the one shown in the demo example at: http://www.highcharts.com/stock/demo/columnrange
I have placed my data in a file called datatest.json, and it contains this text:
[
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]
When I load the data from the file, it doesn't give me a chart. For example, with this:
$(function () {
$.getJSON('data/datatest.json', function (data) {
$('#container').highcharts('StockChart', {
chart: {
type: 'columnrange'
},
rangeSelector: {
selected: 2
},
title: {
text: 'Temperature variation by day'
},
tooltip: {
valueSuffix: '°C'
},
series: [{
name: 'Temperatures',
data: data
}]
});
});
});
But if I put the data directly into my code (as follows), it does display the chart as I expect:
$(function () {
$('#container').highcharts('StockChart', {
chart: {
type: 'columnrange'
},
rangeSelector: {
selected: 2
},
title: {
text: 'Temperature variation by day'
},
tooltip: {
valueSuffix: '°C'
},
series: [{
name: 'Temperatures',
data: [
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]
}]
});
});
I think that I am either formatting the data incorrectly in my data file, or that I'm not reading from the file in the proper way.
Any suggestions or guidance to help me get on the right track would be much appreciated.

Credit to #SebastianBochan for directing my attention to the fact that my JSON was not valid.
Here is an abbreviated clip of what the correctly formatted JSON looks like:
{
"data":
[
[1420640460000,36.7,37.25],
[1420640520000,37.19,37.74],
[1420640580000,37.74,38.6],
[1420640640000,38.72,39.33],
[1420640700000,39.33,39.51]
]
}
I used a JSON validator: http://jsonformatter.curiousconcept.com/
It didn't matter whether I called it "data" or "temperature" It just had to be a string, and then when I referenced it, I needed to be sure to reference it as data.data. If I had called it "temperature" then it would have been data.temperature. In any case, here is the bit of code:
series: [{
data: data.data
}]

Working with JSONP Object in Highcharts

I have working JSONP being passed from my server. The JSONP (with the $.getJSON padding) looks like this:
jQuery21009647691948339343_1398527630522([
{
"name": 'World Federation of Democratic Youth',
"data": [16]
},
{
"name": 'Poqilet',
"data": [13]
},
{
"name": 'United Society',
"data": [8]
},
{
"name": 'Japvia',
"data": [589]
},
{
"name": 'the Mars',
"data": [1]
},
{
"name": 'The Americas',
"data": [913]
},
{
"name": 'High Orion Alliance',
"data": [1]
}
])
The PHP script I am using to pass this to my client is this:
header("content-type: application/json");
$array = (file_get_contents('data.json'));
echo $_GET['callback']. '('. ($array) . ')';
Now, when I get this object I want to put it into a Highcharts series
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Update Order'
},
xAxis: {
categories: ['Regions']
},
yAxis: {
min: 0,
title: {
text: 'Number of Nations'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{}]
};
var url = "http://myserver.org/requestjsonp.php?callback=?";
$.getJSON(url, function (data) {
console.log(data);
options.series.data = data;
var chart = new Highcharts.Chart(options);
});
});
This is not working and I do not understand why, as I have worked through the errors I was getting before. Now I get no errors in the console, I just get nothing.
If I paste the contents of the JSON into the series, I get what I want, although I have to take out the first "{" and the last "}" character. Is this the problem? How can I remove them from an object if they are required to be in the JSON so that it can get passed to the client?
.remove() and other jquery methods I tried to trim the data once I received it didn't work.
console.log(data) now provides an array of 7 objects, which I believe is in line with data.json (seven name/data pairs).
Thank you for your consideration! :)

Your JSONP is incorrect. Without the padding it would look like:
{
name: 'World Federation of Democratic Youth',
data: [16]
},
{
name: 'Poqilet',
data: [13]
},
This is not valid JSON. It should probably look like:
[{
"name": "World Federation of Democratic Youth",
"data": [16]
},
{
"name": "Poqilet",
"data": [13]
}]
You probably also just want to do options.series = data since data will be an array.

In your JSON you have structre of series, not points. Because you use data[] paramter inside. In other words it should be:
options.series = data;

It turns out the JSONP data was not formatted correctly for Highcharts, so what I did was made it look like this (with padding):
jQuery21009184384981635958_1398737380163([{"name": "Regions","data": ["World Federation of Democratic Youth", "Poqilet", "United Society", "Japvia", "the Mars", "The Americas", "High Orion Alliance"]},{"name": "Number of Nations","data": [16, 13, 5, 566, 1, 926, 1]}])
And the Javascript to utilize it:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Update Order',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Number of Nations'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON('http://myserver.org/requestjsonp.php?callback=?', function(data) {
options.xAxis.categories = data[0]['data'];
options.series[0] = data[1];
chart = new Highcharts.Chart(options);
});
});
This works for the small JSONP excerpt that I posted, but not for my full set of data, which contains over 10,000 values and was throwing up a Highcharts Error 19 (http://www.highcharts.com/errors/19) message, so I will be trying to do a master-detail chart to deal with the large amount of data, but this should work for you if you have a small dataset.
For more on how highcharts data should be formatted, you can go here: http://www.highcharts.com/docs/chart-concepts/series/#1