I have multiple series rendered in my chart but I am not able to figure out how to change the name or other attributes for each series. The legend just has them as series 1, series 2, and series 3.
Here is my code:
<script type="text/javascript">
$(function() {
$.getJSON('decodeseries.php', function(data) {
// Create the chart
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {title: {text: 'Wave Height ( In Ft )'}},
xAxis: {type: 'datetime'},
title : {
text : '5 Day Forecast'
},
series: data [{
name: 'Location 1',
data: data
}, {
name: 'Location 2',
data: data
}, {
name: 'Location 3',
data: data
}]
});
});
});
</script>
JSon:
[{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}]
This actually doesn't show the chart, but its what I have been trying so far. The chart works with the above JSON when I simply use the following:
series: data
Any help would be appreciated!
Thanks
To set the color/name of a data series in your data element you need to give it those properties. As near as I can tell your data JSON is actually composed of 3 series of data:
[
{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}
]
I would change it (however it was made) to this:
[
{"name":"Location 1", "color": "acolor", "data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"name":"Location 2", "color": "anothercolor", "data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"name":"Location 3", "color": "yetanothercolor", "data":[[1385510600000,1.88],[1385521500000,0.792]]}
]
You chart code above does not render because you are doing:
series: data [{
name: 'Location 1',
data: data
}, {
name: 'Location 2',
data: data
}, {
name: 'Location 3',
data: data
}]
And it is trying to assign the data property in data to series.data which is not valid. Essentially your are saying make each of the 3 series.data = series.data.data.
Using my example above do something like :
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {title: {text: 'Wave Height ( In Ft )'}},
xAxis: {type: 'datetime'},
title : {
text : '5 Day Forecast'
},
series: data
});
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 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]
}]
};
I am trying to create a gantt chart with Chart.js. I use horizontalBar chart type and this works fine if I populate numbers instead of dates, but it does not render when I pass dates as data.
Data structure: Task, Start Date, End Date
this.chartData = {
labels: ['Task 1', 'Task 2'],
datasets: [{
data: ['2019-01-20', '2019-01-30'],
}],
};
this.options = {
title: {
display: true,
text: 'Title of Chart',
},
legend: {display: false},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
},
}],
},
};
Template:
<chart class="chart" type="horizontalBar" [data]="chartData" [options]="options"></chart>
Tried another example
You are passing the values as strings. Try to pass as dates:
datasets: [{
label: 'Demo',
data: [{
t: new Date("2015-3-15 13:3"),
y: 12
},
I'm using Highcharts, and I used to be able to get labels on the side. But it's not working now, am I missing something? The red arrow is where I would want the labels like in the following example.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/
This is the code I'm using, I add the series in a dynamic way.
credits: {
enabled: false
},
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb'],
labels: {
enabled: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Score',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
});
// Add Series
var detailchart = $('#chart-detail').highcharts();
var categories = new Array;
// Set Chart Title
detailchart.setTitle({text: results[0].category});
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score]
});
});
detailchart.xAxis[0].setCategories(["1", "2"]);
$('#chart-detail').highcharts().reflow();
Results is an array that looks like this (I get it through ajax):
As I understand from your code here, you wish to specify two categories with names 1 and 2 but you are not specifying any data for second category, So the only category that is showing on your chart is 1. Your data array for each series must have elements per each category. For example if you have two category you should consider having two data elements in each series. In this line data: [data.score] you are just specifying one element in data array. Your code should be something like this: (make it dynamic per your need)
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score, 40], //40 is some data for your second category.
});
});
Demo: http://jsfiddle.net/u6crkatv/
Only what you need is use 4 series, each of them with single data point.
series: [{
name: 'Year 1800',
data: [107]
}, {
name: 'Year 1900',
data: [138]
}, {
name: 'Year 2008',
data: [973]
},{
name: 'Year 20098',
data: [973]
}]
Example: http://jsfiddle.net/y9wzggc4/
This is something about the ExtJs5 charts.I have trouble changing the bar chart's labels.
Codes is as below:
Ext.create('Ext.chart.CartesianChart', {
store: {
fields: ['pet', 'households', 'total'],
data: [{
pet: {name:'Cats'},
households: 38,
total: 93
}]
},
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'pet',
yField: 'households',
label:{
field:'pet',
renderer:function(pet){
return 'Dear '+pet.name;
}
}
}]
});
You must have noticed that the field 'pet' is an object instead of a string.
The renderer in the series label returns the value I want it to be,but the label is still [object Object]!
Labels under the category(x axis in your code) are rendered by 'category' not the series.Try code below:
{
type: 'category',
position: 'bottom',
renderer:function(label){
return label.name;//the var 'label' represents the pet object.
}
}
By the way,I found another problem. No matter how many models are there in the chart store,only the first bar is displayed!