How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.
Currently i am using this code it show legend for true but I not able to change the text I have tried this.
var chart = c3.generate({
bindto: '#container',
padding: {
top: 10,
right: 0,
bottom: 10,
left: 0,
},
data: {
columns: [<?php echo $pieChartDataString; ?>],
type : 'pie',
labels: true
},
legend: {
show: true,
position: 'upper-center'
format: {
title: function () { return "Legend title"; },
name : function () { return "Legend name"; },
value: function () { return "Legend value";}
}
}
//But these legend values or not showing
});
It's not showing my legend values its always shows only columns as legend.
Is there any way that I can change the legend values.
You haven't provided the data that gets outputted from your php, so it's hard to say.
But the first item in each of the columns array determines the name that goes in the legend. So:
columns: [
['this is legend 1', 30],
['put your value here', 120],
]
would result in the legend labels being "this is legend 1" and "put your value here".
Here's a fiddle:
http://jsfiddle.net/jrdsxvys/9/
Edit...
Another option is to use the names property, as done here:
http://jsfiddle.net/jrdsxvys/40/
data: {
columns: [
['d1', 30],
['d2', 120]
],
type: 'pie',
labels: true,
names: {
d1: 'some name here',
d2: 'another name'
}
}
#agpt Yes. The names property is a good way to go generally because the first property of the columns data array eg 'd1' above is used when doing things like having multiple types on charts. eg for a bar and line combination using types instead of type: 'pie':
columns: [
['bar_1', 3, 8, 6],
['bar_2', 4, 0, 7],
['bar_3', 2, 3, 0]
],
types: {
bar_1: 'bar',
bar_2: 'line',
bar_3: 'bar'
},
names : {
bar_1: 'Initial',
bar_2: '3 month',
bar_3: '6 month'
}
So, using the names property allows you to use more 'dynamic' property names and be consistent throughout the config.
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
Given the scatter series with markline in echarts as below :
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter',
markLine: {
data: [
{name: 'average',
type: 'average',
valueIndex: 0}
]
}
}]
};
I wanted to toggle between data and markline. Lets say when markline off , only scattered data should be shown. And when markline on only markline should be shown in the graph.
I think it should work when you simply set the e-chart option accordingly:
when you only want to show the markline, set the symbol for each data-item to none
when you only want to show the data, markLine can be undefined (or set symbol for each markline to none)
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
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!
I have implemented that example: http://www.highcharts.com/demo/combo without pie chart. I want to add it dynamically after a time later. How can I add a chart into a combo chart dynamically at HighCharts?
If you look the demo you will see that the pie chart isn't a chart, it's just a serie.
So, to add a serie you have to use addSeries passing thrue parameter all the pie serie, like the following.
chart.addSeries({
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
},
{
name: 'John',
y: 23,
color: '#AA4643' // John's color
},
{
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
});
DEMO
You can use charts.push as shown in this url http://calibrate.be/labs/exporting-highcharts-js-pdf-docx-tcpdf-and-phpword
Let me know if you can't have this to work.
EDIT: You will need to define charts as var charts = []; as global variable. And this has not been tested by me.