How to change series on highchart properties series?
this is jsfiddle
its similiar like this but different structure
i want to change many type of series like this
series: [{
name: 'Nominal',
data: [
{ name: 'Remunerasi', y: 200000, color: 'red'},
{ name: 'Penyesuaian Gaji', y: 1200000, color: 'yellow' }
]
}]
//or this
series: [{
name: 'Brands',
data: [
{ name: 'Promosi', y: 33.38 },
{ name: 'Upgrading', y: 14.77 },
{ name: 'GP Dibawah Min', y: 22.91 },
{ name: 'Kontrak Kedua', y: 20}
]
}]
//or this
series: [{
name: 'Sebelum',
data: [200000, 300000, 400000, 400000],
color : 'red'
},{
name: 'Setelah',
data: [400000,600000,800000,800000],
color : 'yellow'
},{
name: 'Kenaikan',
data: [200000, 300000, 400000, 400000],
color : 'blue'
}]
Im trying to change the value inside those series using a button
i hope this tuto help you
setdata:Apply a new set of data to the series and optionally redraw it. The new data array is passed by reference (except in case of updatePoints), and may later be mutated when updating the chart data.
Related
I have data Json :
0: {nama: "Democrats", drilldown: "Democrats-2010", y: 17}
drilldown: "Democrats-2010"
nama: "Democrats"
y: 17
1: {nama: "Other", drilldown: "Other-2010", y: 14}
drilldown: "Other-2010"
nama: "Other"
y: 14
2: {nama: "Republican", drilldown: "Republican-2010", y: 11}
drilldown: "Republican-2010"
nama: "Republican"
y: 11
how get value "nama" to be applied to the highchart data series
You need to adapt your JSON data to the format required by Highcharts. Example:
series: [{
data: data.map(el => ({
name: el.nama,
drilldown: el.drilldown,
y: el.y
}))
}],
xAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/ncxe1h36/
API Refernece: https://api.highcharts.com/highcharts/series.column.data
I assumed you would want the bar chart and I have made one. And I assumed the following data is what you want to build with the bar chart. I used jQuery to store your jsonData in the array so you would see step-by-step to get on.
Edited: here is the jsFiddle,
https://jsfiddle.net/kopigod/vn4abw92/1/
var namaArray = [],
yArray = [];
var jsonData = [
{nama: "Democrats", drilldown: "Democrats-2010", y: 17},
{nama: "Other", drilldown: "Other-2010", y: 14},
{nama: "Republican", drilldown: "Republican-2010", y: 11}
];
$.each(jsonData, function(index, value){
namaArray.push(value.nama);
yArray.push(value.y);
});
Highcharts.chart('YourChartIdInHTML', {
chart: {
type: 'column'
},
title: {
text: 'Your main title'
},
xAxis: {
categories: namaArray
},
yAxis: {
min: 0,
title: {
text: 'Y-axis Title'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: "Test",
data: yArray
}]
});
Of course HighChart allows you to customize the text when you mouse over the bar.
I saw Highchart's timeline chart that customize each point dataLabel.
I want to add dataLabel option to set different distance for each points(data). So I added option like below code.
But when I use this code, it looks like distance option is not working. all of the dataLabel's distance is same.
How can I solve it? Did I use something wrong?
Highcharts.chart('container', {
chart: {
type: 'timeline'
},
series: [{
data: [{
date: 'Some date',
label: 'Event label',
description: 'Description of this event.',
dataLabels: {
color: '#78f',
borderColor: 'blue',
backgroundColor: '#444',
connectorWidth: 2,
connectorColor: 'blue',
distance : 80, // I add this option for different distance
style: {
textOutline: 0
}
}
},{
date: 'Another date',
label: 'Last event label',
description: 'Description of third event.',
dataLabels :{
distance : 20
}
}]
}]
});
Instead of distance that is set for all data labels you can use y property:
series: [{
data: [{
...,
dataLabels: {
y: -50,
...
}
}, {
...,
dataLabels: {
y: 120
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/femo49gn/
API Reference: https://api.highcharts.com/highcharts/series.timeline.dataLabels.y
Hi there is it possible to show only one value per category in the column chart in highcharts? without nulling the other values? because my categories will be dynamic so in the series it is impossible to know which values will be null. For example.
var chart = {
type : 'column'
};
... code here
xAxis: {
categories: [
'Jan',
'Feb',
],
},
Now in my setup of the series I am nulling the other data so that it will only show one value like this
var series = [
{
name: 'January',
data: [71, null]
},
{
name: 'February',
data: [null, 83]
},
];
Now the problem arises if my categories are dynamic as I have said. Is it possible to use only one value without setting some data to null? Or am I using the wrong chart for this task (I need a vertical bar chart)? If so, what should I use?
There's a js fiddle that specifically does this.
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-objects/
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
},
{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
I'm trying to have different chart on each level using HighCharts.
For example-
Level-1 contains Bar graph.
Level-2 contains Pie graph.
Level-3 contains Table representation.
Below is my code snippet :
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie' // Mentioned only pie.Need different graph on individual level.
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 1,
dataLabels: {
enabled: true,
}
}
},
series: [{
id: 'toplevel',
name: 'Animals',
data: [
{name: 'Cats', y: 4, drilldown: 'level1'}, //Level-1
{name: 'Dogs', y: 2},
{name: 'Cows', y: 1},
{name: 'Sheep',y: 2},
{name: 'Pigs', y: 1}
]
}],
drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
data: [
{name: 'Trees', y: 1},
{name: 'Plants', y: 2},
{name: 'Grass', y: 3},
{name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
]
},{
id:'level2',
name: 'Level 2',
data: [
{name: 'Green', y:1},
{name: 'Red', y:2},
{name: 'Blue', y:3},
{name: 'Deeper Level-3', y: 4, drilldown: 'level3'} //Level-3
]
},{
id: 'level3',
name: 'Level 3',
data: [
{name:'Violet', y:1},
{name:'Red',y:2},
{name:'Yellow', y:3}
]
}]
}
})
I'm expecting that, while click on each level;Data is to be appeared with different chart on each individual level.
Above code is giving me data in same chart type on slice click which is supposed to be in different chart type.
To change each individual level chart type you should use series.type like this:
drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
type: 'bar',
//^^^^^^^^^^^
data: [
{name: 'Trees', y: 1},
{name: 'Plants', y: 2},
{name: 'Grass', y: 3},
{name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
]
},{
id:'level2',
name: 'Level 2',
type: 'pie',
//^^^^^^^^^^^^
...
}]
}
since you want to drill to table at last level and highcharts does not support such thing you should create a custom drill to table:
define a method to create custom table when chart drills to level-3
var createTable = function(data) {
$("#container").hide();
// remove the existing table
$('#here_table .table').remove();
// create a table object
var table = $('<div class="table">back<table></table></div>').addClass('chart-table');
// iterate the series object, create rows and columnts
$.each(data, function( index, value ) {
var row = $('<tr></tr>').addClass('chart-row');
var col1 = $('<td></td>').text(value.name).appendTo(row);
var col2 = $('<td></td>').text(value.y).appendTo(row);
// mark the row of the clicked sector
table.append(row);
});
}
add point click event handler for level-2 points,call createTable method and pass the level-3 data to createTable:
{
id:'level2',
name: 'Level 2',
type: 'pie',
point: {
events: {
click: function () {
console.log(this);
if(this.name == "Deeper Level-3"){
var data = [
{name:'Violet', y:1},
{name:'Red',y:2},
{name:'Yellow', y:3}
];
createTable(data);
}
}
}
},
data: [
{name: 'Green', y:1},
{name: 'Red', y:2},
{name: 'Blue', y:3},
{name: 'Deeper Level-3', y: 4} //Level-3
]
}
and finally add an event handler for table back to get back where you were:
tableBack = function(){
$("#container").show();
// remove the existing table
$('#here_table .table').remove();
}
Working Fiddle of what I have done
hope that helps
You just need set type of the data series. see a jsfiddle
series: [{
name: 'IE distribution',
id: 'IE distribution',
type: 'bar',
data: [
['asia', 24.13],
['europe', 17.2],
['africa', 8.11]
]
}
I'm trying to use Mult Series in Bubble Chart. What I'm doing at the moment is:
$('#container').highcharts('Map', {
title: {
text: 'Bubble Chart'
},
tooltip: {
pointFormat: '{point.estado}<br>' +
'Ligacoes: {point.ligacoes}'
},
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Test',
data: data,
maxSize: '12%',
color: '#EE0000'
name: 'Test2',
data: data,
maxSize: '12%',
color: '#EE0000'
}]
});
At the moment I don't care if the data comes the same in both series. It's working if I just use one
name: 'Test',
data: data,
maxSize: '12%',
color: '#EE0000'
Anyone can try to tell what can I do... I'm trying to understand how to have more than one serie.
Thanks !
Each series is represented as an object in the series-array. You are just re-stating the same name/value-pairs inside the same series object, which only overwrites the values.
In short it should look something like:
// series array
series: [{
// Series object 1
name: 'Basemap',
mapData: map
}, {
// Series object 2
type: 'mapbubble',
name: 'Bubble 1',
data: data
}, {
// Series object 3
type: 'mapbubble',
name: 'Bubble 2',
data: data
}]
Or see this more elaborate JSFiddle for a demonstration.