Is it possible to have the "name" key of each object in the series be the x-axis label?
series: [{
"data": [3570.5],
"name": "R",
"id": 0
}, {
"data": [3000],
"name": "S",
"id": 1
}, {
"data": [2500],
"name": "T",
"id": 2
}]
For example, I would like column 1 to have an x-axis label of "R", column 2 to have an x-axis label of "S", etc. I have tried assigning the x-axis categories
xAxis: {categories: ['R', 'S', 'T']}
But only the "R" label shows up on the x-axis. I have also tried to format the series differently:
series: [{
"data": [3570.5, null, null],
"name": "R",
"id": 0
}, {
"data": [null, 3000, null],
"name": "S",
"id": 1
}, {
"data": [null, null, 2500],
"name": "T",
"id": 2
}]
But that complicates the ease with which I can change the series visibility, i.e. auto-resizing both axes, hiding the full column and then putting the hidden column back in its original spot when trying to show again.
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var id = this.series.options.id;
var chart = $('#container').highcharts();
var isVisible = chart.get(id).visible;
chart.get(id).setVisible(!isVisible);
}
}
}
}
}
http://jsfiddle.net/calanoue/suw6xweh/
You were properly setting your xAxis categories. However, you were only ever setting one point. Highcharts is defaulting to that point going to index 0 (the "R"). Try setting the xAxis category index and use the {x, y} point format:
series: [{
data: [{x:0, y:3570.5}],
name: "R",
id: 0
}, {
data: [{x:1, y:3000}],
name: "S",
id: 1
}, {
data: [{x:2, y:2500}],
name: "T",
id: 2
}]
The x: values are the category index you want populated.
You can try by adding name to each data point as in this
DEMO.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
},
xAxis: {
categories: ['R', 'S', 'T'],
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
changeSeriesVisibility(this.series.options.id);
}
}
}
}
},
series: [{
data : [{ x : 0,
y : 3750,
name : "R"},
{
x : 1,
y: 3000,
name: "S"
},
{
x : 2,
y : 2500,
name : "T"
}
]
},
]
});
function changeSeriesVisibility(id) {
// Hide/Show the series on click
var chart = $('#container').highcharts();
var isVisible = chart.get(id).visible;
chart.get(id).setVisible(!isVisible);
}
});
Related
I am using the bar chart. I want to add the new bar in the existing bar chart which is already drawn.
How to do that?
I have used the following
chartObject.series[i].addPoint(99, true);
But didn't get the result. It's automatically add the value with the default label name.
I want to insert the E bar with the value under A. How can I do that?
chartObject = Highcharts.chart('chartContainer', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ["A", "B", "C", "D"],
title: {
text: null
}
},
yAxis: {
min: 0,
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
debugger
for (var i = 0; i < chartObject.series.length; i++) {
chartObject.series[i].addPoint(99, true);
}
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
},
showInLegend: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
showInLegend: false,
data: [
50,
35,
25,
80
]
}]
});
Please refer to this jsfiddle: http://jsfiddle.net/kkulig/rhneon2q/
I think that one of the convenient ways to do this is to move categories definitions to name properties of points:
data: [
{y: 50, name: 'A'},
{y: 35, name: 'B'}
]
and change xAxis type to category:
type: 'category'
It's explained here: http://api.highcharts.com/highcharts/xAxis.categories
Then you can update chart with new point just like that:
UPDATE:
Code:
chartObject.series[i].addPoint({y: this.y, name: 'E'}, true);
Adds new point with category on the end of a serie.
If you wan't new point with category to appear after the clicked one, you can use this code:
var data = chartObject.userOptions.series[i].data.slice(); // clone original userOptions
data.splice(this.index + 1, 0, {
y: 10,
name: "New cat. " + (chartObject.series[i].data.length - 2) // 2 - initial categories number
});
chartObject.series[i].update({
data: data
});
END OF UPDATE
Unfortunately if you set categories like you did before:
categories: ["A", "B", "C", "D"]
name property of added point won't be used as category.
I have built this electoral map but I have not succeeded drawing a pie chart of the two parties on the pop-up dialog when a map region is clicked. The dialog title is being passed but not the actual values that should build the chat.
The returned json data is here and I just want to push a pie-chart to the dialog when someone clicks on a county on the map. Here's my code and "pointClick" function that should render the pie to a div.
$(function() {
$.getJSON("<?= base_url('index.php/presidential/getByCounty'); ?>", function(json) {
function pointClick(json) {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: ([this.name]),
width: 400,
height: 300
});
//THIS IS ACTUALLY WHAT'S NOT WORKING
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: this.nasa //returned json data for candidate 1 and I problem must be somewhere here
}, {
name: 'jubilee',
color: '#C40401',
y: this.jubilee //returned json data for candidate 2
}],
dataLabels: {
// format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
});
}
//AM BUILDING THE ELECTORAL MAP FROM THIS POINT WHICH WORKS OUT NICELY
$('#presidential').highcharts('Map', {
title: {
text: 'Presidential Electoral Map <em>(Kenya - Test)</em>'
},
legend: {
title: {
text: 'Plotical Parties'
}
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: ' Incumbent Margin'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
colorAxis: {
dataClasses: [{
from: 0.0000001,
to: 100,
color: '#C40401',
name: 'Jubilee'
}, {
from: -100,
to: -0.00000001,
color: '#0200D0',
name: 'Nasa'
}, {
from: 0,
to: 0,
color: '#C0C0C0',
name: 'Battle Ground(s)'
}]
},
series: [{
name: 'By County Difference',
point: {
events: {
click: pointClick
}
},
"type": "map",
"joinBy": ['name', 'name'],
"data": $.each(json, function() {}),
"mapData": [{
"name": "Mandera",
"path": "M572,-818,574,-789,578,-783,598,-775,619,-750,646,-738,645,-727,652,-703,662,-689,678,-679,689,-666,693,-672,696,-734,733,-774,783,-848,774,-845,765,-850,761,-846,711,-843,677,-873,663,-874,583,-838z"
}, //and a couple more mapdata
]
}, {
"type": "mapline",
"data": [{
"name": "path5072",
"path": "M443,-449Z"
}]
}]
});
});
});
Your JSON data contains number in string format so convert it into Number
like this
Fiddle link
series: [{
name: 'Votes',
data: [{
name: 'nasa',
color: '#0200D0',
y: Number(this.nasa) //transform to number
}, {
name: 'jubilee',
color: '#C40401',
y: Number(this.jubilee) //transform to number
}],
dataLabels: {
format: '<b>{point.name}</b> {point.value:.1f}%'
}
}]
I'm trying to display details of projects.
I want show completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart
2 - axis-2 supposed to show start dates with a line chart
Bar chart works fine. Even the line chart works fine without the dual axis. But, when I add them together the line-chart disappears. I tried changing the dates on the line chart for random numbers - that works as well.
Anyone knows how to make dates work on a dual-axis chart.
jsfiddle
var projectDetails =
[{
"name": "+PS8039",
"startDate": "2016-02-01",
"finishDate": "2016-04-01"
}, {
"name": "+PS8039",
"startDate": "2016-01-02",
"finishDate": "2016-08-02"
}, {
"name": "+PS8039",
"startDate": "2016-03-08",
"finishDate": "2016-08-08"
}, {
"name": "+PS8039",
"startDate": "2016-04-11",
"finishDate": "2016-09-11"
}, {
"name": "+PS8039",
"startDate": "2016-05-13",
"finishDate": "2016-12-13"
}, {
"name": "+PS8039",
"startDate": "2016-01-15",
"finishDate": "2016-04-15"
}, {
"name": "+PS8039",
"startDate": "2016-02-25",
"finishDate": "2016-08-25"
}, {
"name": "+PS8039",
"startDate": "2016-03-03",
"finishDate": "2016-07-03"
}, {
"name": "+PC2E",
"startDate": "2016-04-07",
"finishDate": "2016-05-31"
}, {
"name": "+PC2E",
"startDate": "2016-05-16",
"finishDate": "2016-09-01"
}];
$(function () {
var xCategories = new Array();
var completionpercent = new Array();
var startdates = new Array();
var finishdates = new Array();
for(var i = 0; i< projectDetails.length; i++){
xCategories[i] = projectDetails[i].name;
startdates[i] = moment(projectDetails[i].startDate).format('x');
finishdates[i] = projectDetails[i].finishDate;
completionpercent[i] = ((Date.now() - Date.parse(projectDetails[i].startDate))
/(Date.parse(projectDetails[i].finishDate) - Date.parse(projectDetails[i].startDate)))
*100 ;
}
$('#Chart').highcharts({
colors: ['#2C5898'],
title: {
text: 'Project Completion'
},
legend: {
enabled: false
},
xAxis: [{
categories: xCategories,
crosshair: true
}],
yAxis:[{
title: {
text: '% Completion'
},
max: 110
},
{
"title": {
"text": "Start Dates"
},
opposite: true
}
],
plotOptions: {
bar: {
groupPadding: 0,
zones: [{
value: 100
},{
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#cc0000'],
[1, '#ff8080']
]
}
}]
}
},
credits: {
enabled: false
},
series: [{
name: 'Start Dates',
type: 'line',
data: startdates
},{
name: 'Completion %',
type: 'bar',
data: completionpercent
}]
});
});
You need to specify that the line series relates to the second axis:
yAxis: 1,
Updated fiddle:
https://jsfiddle.net/jlbriggs/4e6edy7t/2/
I have created a fiddle derived from a fork supplied by the vendor. I would want only the label of the smaller chart segments to be displayed on the outside as shown on the left. This works as expected for a column chart. Is there an easier way to do this before I start fiddling with the canvas.js source code.
To the right is what my chart looks like, using this code
var chart = new CanvasJS.Chart("chartContainer",
{
data: [
{
type: "doughnut",
dataPoints: [
{ y: 1,indexLabel:"A",indexLabelPlacement:"outside"},
{ y: 50,indexLabel:"B",indexLabelPlacement:"inside"},
{ y: 28 ,indexLabel:"C",indexLabelPlacement:"inside"},
{ y: 31 ,indexLabel:"D",indexLabelPlacement:"inside"},
]
}
]
});
chart.render();
The fiddle I created is found here
Before burying myself deep into canvas.js code , I visited google one more time and stumbled upon a rich library, ZingChart which does exactly what I was looking for(mixing the label positions) without tampering with the library's source code
Snippet for usage
$scope.myJson = {
globals: {
fontFamily: "MuseoSans-700"
},
type: 'pie',
backgroundColor: "transparent",
plot: {
detach: false,
"slice": 55,
"shadow": 0,
refAngle: -90,
valueBox: {
fontColor: "black",
fontSize: 16,
connector: {
lineWidth: 1,
height: "50px"
},
rules: [
{
rule: "%v > 30",
placement: "in",
offsetR: 1
},
{
rule: "%v <= 30",
placement: "out"
}
]
}
},
series: [
{ "values": [32], "text": "A", backgroundColor: "#c4f0ac" },
{ "values": [32], "text": "B", backgroundColor: "#FF9097" },
{ "values": [1], "text": "C", backgroundColor: "#FF9097" },
{ "values": [1], "text": "D", backgroundColor: "#FF9097" },
{ "values": [1], "text": "NS", backgroundColor: "#bcbcbc" }
]
And the resulting chart was like this
My question is similar to this one or this one, except that I don't have a simple series but groups of data.
Basically, I just want to have a chart with the behaviour of a "stacked percentage columns" chart, but without stacking the column.
Here is an example with absolute values (fiddle) :
var data = [
{
name : 'A',
data : [72, 50, 52]
},
{
name : 'B',
data : [23, 41, 12]
},
{
name : 'C',
data : [18, 9, 11]
},
{
name : 'D',
data : [89, 46, 54]
}];
// CHART
$('#container').highcharts(
{
chart :
{
type : 'column'
},
xAxis :
{
categories : ['Group 1', 'Group 2', 'Group 3']
},
yAxis :
{
title :
{
text : null
}
},
tooltip :
{
shared: true
},
plotOptions :
{
column :
{
dataLabels :
{
enabled : true
}
}
},
title :
{
text : 'Example'
},
series : data
});
In this example, I have three groups ("Group 1", "Group 2" and "Group 3") and four data ("A", "B", "C" and "D").
I would like to display the percentage of "A", "B", "C" and "D" for each group, and also I would like that percentage to be updated when I click on an item of the legend to hide/show a data (just like it works with stacked columns). Actually it's all like a "stacked percentage columns" chart, except that I don't want to stack the columns...
Hi Checkout example here to resolve you issue.
http://jsfiddle.net/Evsw4/63/.
you can use formatter function to format the data label. Note that if a format is defined, the format takes precedence and the formatter is ignored.
API Ref : http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
Code for formatter function to display percentage along with considering Group.
dataLabels: {
enabled: true,
formatter: function () {
var mychart = $('#container').highcharts();
var mytotal = 0;
for (i = 0; i < mychart.series.length; i++) {
if (mychart.series[i].visible) {
mytotal += parseInt(mychart.series[i].yData[0]);
}
}
var pcnt = (this.y / mytotal) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
Full code:
var data = [{
name: 'A',
data: [72, 50, 52]
}, {
name: 'B',
data: [23, 41, 12]
}, {
name: 'C',
data: [18, 9, 11]
}, {
name: 'D',
data: [89, 46, 54]
}];
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Group 1', 'Group 2', 'Group 3']
},
yAxis: {
title: {
text: null
}
},
tooltip: {
shared: true
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
dataLabels: {
enabled: true,
formatter: function () {
var mychart = $('#container').highcharts();
var mytotal = 0;
for (i = 0; i < mychart.series.length; i++) {
if (mychart.series[i].visible) {
mytotal += parseInt(mychart.series[i].yData[0]);
}
}
var pcnt = (this.y / mytotal) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
title: {
text: 'Example'
},
series: data
});