Lucky Lucky - 4 months ago 11
PHP Question

How to change the graph

enter image description here

The chart was generated using highcharts following code



$(function () {


$('#container_graph').highcharts({

chart: {
type: 'column'
},
title: {
text: 'Mun-mate'// - Last 30 Days'
},
xAxis: {
categories: ['JO3','JO3','JO3','JO3',' JO3',' JO3',' JE7',' JO 3',' JO3',' JO3',' WA2',' MA3'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total lls'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {formatter: function() {var str=this.key;return '<b> Target: WE9</b><br/>'+this.series.name +': '+ str.replace('INMATE','')+'<br/>';}},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
}
}
}
}
}
},
series: [
{
type: 'column',
name: 'Inmate1',
color:'yellow',
data: [
{name:"INMATE JO3", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE JE7", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE JO3", y: 1},
{name:"INMATE WA2", y: 1},
{name:"INMATE MA3", y: 1}]
},
{
type: 'column',
name: 'Inmate2',
color:'orange',
data: [
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"INMATE JO3", y: 1},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0}]
},
{
type: 'column',
name: 'Inmate3',
color:'pink',
data: [
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0}]
},
{
type: 'column',
name: 'Inmate4',
color:'violet',
data: [
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0},
{name:"", y: 0}]
}]
});
});





I need to change the 2 written on top og multicolor block to 1 as logically.It should contain 1 as JE7 and the other color took same 1 block but it count the number of color and shows 2 .

Answer

The text label of highchart can be changed using tooltip formatter

example: fiddle link fiddle

formatter: function() {
                        return this.total;  
                }

The tooltip's content is rendered from a subset of HTML that can be altered in a number of ways, all in all giving the implementer full control over the content. In addition to options on the tooltip configuration object, you can set the options for how each series should be represented in the tooltip by series.tooltip.

  • The header part of the tooltip can be altered using the tooltip.headerFormat. In a shared tooltip, the first series' headerFormat is used.
  • The listing of each series is given in the tooltip.pointFormat option, or an individual pointFormat for each series.
  • The footer part can be set in the tooltip.footerFormat option.
  • All the options above can be overridden by the tooltip.formatter callback for programmatic control.
Comments