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
How do you specify the x-axis labels for a C3 bar chart with data loaded via JSON? I don't see anything in the docs and the closest I found was this but it only gives an example for data specified in column format, whereas I have data specified in JSON format like in this example
My attempt:
const chart = c3.generate({
data: {
// x: "title",
json: bookData,
type: "bar",
keys: {
value: ["count"]
}
},
axis: {
x: {
tick: {
values: labels,
rotate: 90,
},
type: "category",
}
},
bindto: "#book-title-histogram",
});
By uncommenting x: "title" it leads to the plot to no longer be visible. With that line commented out, the axis is simply blank.
EDIT: bookData is an array with each element having keys count and title
Looks like mapping your data works.
const bookData = [{
count: 3,
title: 'The Foutainhead'
},{
count: 4,
title: 'Fight Club'
},{
count: 2,
title: 'Ender\'s Game'
}]
const titles = bookData.map((obj) => {
return obj.title
})
const counts = bookData.map((obj) => {
return obj.count
})
console.log(titles)
const chart = c3.generate({
data: {
x: 'title',
y: 'count',
json: {
title: titles,
data: counts,
},
type: "bar",
},
axis: {
x: {
tick: {
count: bookData.length,
rotate: 45,
},
type: "category",
}
},
bindto: "#book-title-histogram",
});
I have data that is returned in an integer format that is based on time, but isn't a measurement of time that we normally use.
The integers are not evenly spaced, so I'm trying reflect that in the chart.
Is there any way to do this without the time in milliseconds?
Here's what I've got so far:
$('#container').highcharts({
chart: {
type: 'line',
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
categories: xCategories(),
title: {
text: 'Time'
},
ordinal: true
},
series: [{
data: getInterestRates()
}]
});
ordinal: true doesn't seem to work because this isn't a formal time format.
Thanks in advance for your help.
Example Data:
{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
},
{
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
},
{
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
},
This can be done using a x-axis of type linear (this is the default type), and passing an array of [x,y] pairs as data of your series. Given your example data format you'll have to convert it into this format.
A simple Highcharts example would be (JSFiddle):
$('#container').highcharts({
xAxis: {
type: 'linear'
},
series: [{
data: [[1024,0],[2048,5],[4096,5]]
}]
});
The format conversion could be done like this (JSFiddle):
var json = [{
"integerOfTime": 1024,
"thingMeasuredOverTime": 0,
}, {
"integerOfTime": 2048,
"thingMeasuredOverTime": 5,
}, {
"integerOfTime": 4096,
"thingMeasuredOverTime": 5,
}];
var data = [];
$.each(json, function(i, v) {
data.push([v.integerOfTime, v.thingMeasuredOverTime]);
});
My serialization method results a datetime string like this: "2014-07-09T12:30:41Z"
Why the following code does not work?
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
data: [
{x:"2014-07-09T12:30:41Z",y: 29.9},
{x:"2014-09-09T12:30:41Z", y:71.5}
],
name: "Teste"
}]
});
});
this code work perfectly:
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
data: [
{x:Date.UTC(2014, 0, 1),y: 50},
{x:Date.UTC(2014, 2, 1), y:20}
],
name: "Teste2"
}]
});
});
How to convert datetime format or configure highcharts to work with my data?
Apparently Highcharts must be expecting the date as the number of milliseconds since "January 1, 1970, 00:00:00" universal time, that's what Date.UTC() retrieves, so you can accomplish the same thing doing this:
series: [{
data: [
{x:(new Date("2014-07-09T12:30:41Z")).getTime(),y: 29.9},
{x:(new Date("2014-09-09T12:30:41Z")).getTime(), y:71.5}
],
name: "Teste"
}]
You can preprocess your data before using it in chart. Example - http://jsfiddle.net/Jx5n2/3851/
var data = [{
x: "2014-07-09T12:30:41Z",
y: 29.9
}, {
x: "2014-09-09T12:30:41Z",
y: 71.5
}],
len = data.length,
i = 0,
outData = [];
for (i = 0; i < len; i++) {
outData[i] = {
x: Date.parse(data[i].x),
y: data[i].y
}
}
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
data: outData
}]
});
});
I am trying to prepare a Tornado Chart using the column chart in Highcharts. Here is my fiddle.
My current code is:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Net Sales'
},
subtitle: {
text: 'MM $'
},
xAxis: {
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs']
},
yAxis: {
title: {
text: 'MM $'
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y;
}
}
},
scatter:{
marker:{
symbol:'line',
lineWidth:11,
radius:8,
lineColor:'#f00'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[12.15, 46.86],
[15.45, 42.28],
[27.77, 31.24]
]
},
{
name:'Base',type: 'scatter',data:[120],
}]
});
The problem is that the last series (Annual Costs) does not show, as it is in reversed order. Also, I'd like the Tornado Chart to look more like this:
Note that the labels in this chart are different from the actual values plotted. Also note that the bar in the center - in the example code, there would be a vertical line at 29.5. I would also like to support a combined uncertainty bar like the one at the bottom. Any suggestions would be greatly appreciated.
Your last bat is not showing, because first number is lower than second, see: http://jsfiddle.net/kErPt/1/
If you want to display another values at labels, then add that info first. Example:
data: [{
low: 12,
high: 15,
lowLabel: 35,
highLabel: 46
}, {
low: 2,
high: 35,
lowLabel: 15,
highLabel: 26
} ... ]
And then use dataLabels.formatter for series.
To add vertical line use plotLines.
I'm not sure what is the last bar called 'combined uncertainty'.
I've used Highcharts with separate series (thanks jlbriggs) to create a Tornado Chart: http://jsfiddle.net/uRjBp/
var baseValue = 29.5;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//type:'column'
//type:'area'
//type:'scatter'
//type:'bubble'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
tooltip: {
formatter: function() {
var msg = "";
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
var low = round(this.series.chart.series[0].data[index].y+baseValue);
var high = round(this.series.chart.series[1].data[index].y+baseValue);
if (this.x === "Combined Uncertainty") {
msg = "Combined Uncertainty in "+outputTitle+": "+low+" to "+high;
} else {
var lowLabel = this.series.chart.series[0].data[index].label;
var highLabel = this.series.chart.series[1].data[index].label;
msg = '<b>'+outputTitle+'</b> goes from '+ low +' to '+ high+'<br/> when '+this.x +
' goes from <br/> '+lowLabel+" to "+highLabel;
}
return msg;
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y+baseValue;
}
return this.key === "Combined Uncertainty" ? "":this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals:false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty']
},
yAxis: {
title: {
text: 'MM $'
},
labels: {
formatter:function() {
return this.value+baseValue;
}
}
},
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[{y:12.15-baseValue, label:10},{y:15.45-baseValue, label:1},{y:31.25-baseValue, label:2},{y:12.15-baseValue, color:'#99CCFF', label: ""}],
labels:[10,1,2,]
},{
name: 'High',
grouping:false,
type:'bar',
data:[{y:46.86-baseValue, label:30},{y:42.28-baseValue, label:3},{y:27.77-baseValue, label:4},{y:46.86-baseValue, color:'#99CCFF', label:""}],
labels:[30,3,4,]
},
{
name: 'Median',
type: 'scatter',
data: [null,null, null,27-baseValue],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
function round(num) {
return Math.round(num*100)/100;
}
usually, this kind of chart is done using a separate series for the left and right portions
One way to do this is by setting one set of data as negative numbers, and then using the formatters to make the axis labels, datalabels, and tooltips display the absolute values
example:
http://jsfiddle.net/jlbriggs/yPLVP/68/
UPDATE:
to show a line as in your original chart, you can extend the marker symbols to include a line type, and use a scatter series to draw that point:
http://jsfiddle.net/jlbriggs/yPLVP/69/
If you don't want to have the extra code for the line marker type, you could use any of the other existing marker symbols for the scatter series.