I am creating the following Highcharts chart:
var chart = {
type: 'scatter',
zoomType: 'xy',
backgroundColor: 171515,
events: {
selection:function(event){
var myChart = $('#chartContainer').highcharts();
if(event.xAxis || event.yAxis){
xAxisBool = true;
$('#chartContainer').highcharts().xAxis[1].update({
visible: false
});
}
else{
xAxisBool = false;
$('#chartContainer').highcharts().xAxis[1].update({
visible: true
});
}
}
}
};
var title = {
text: '<span style="color: #a85757">discovery</span>'
};
var subtitle = {
text: '<span style="color: #a85757">Source: VR-Forces</span>'
};
var xAxis = [{
title: {
enabled: true,
text: '<span style="color: #a85757">Heading (Deg)</span>'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
tickPositions: [-180,-160,-140,-120,-100,-80,-60,-40,-20,0,20,40,60,80,100,120,140,160,180],
lineColor: '#a85757',
tickColor: '#FF0000',
tickWidth: 3,
labels: {
style: {
color: 'white'
}
}
},{
title: {
enabled: false
},
valueDecimals: 1,
startOnTick: true,
endOnTick: true,
ceiling: 360,
/*lineColor: '#a85757',*/
tickColor: '#FF0000',
tickWidth: 3,
labels: {
style: {
color: 'white'
}
},
colors: {
minColor: '#0b933f',
maxColor: '#cc1c0f'
}
}];
var yAxis = {
title: {
enabled: true,
text: '<span style="color: #a85757">Frequency [GHz]</span>'
},
allowDecimals: true,
valueDecimals: 4,
startOnTick: true,
endOnTick: true,
showLastLabel: true,
ceiling: 20.0000,
min: 0.0000,
max: 20.0000,
tickAmount: 15,
labels: {
style: {
color: 'white'
}
}
};
var borderColor = '#696969';
var legend = {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 800,
y: -8,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#a6a6a6',
borderWidth: 1
};
var plotOptions = {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.id}, {point.x} Deg, {point.y} GHz',
valueDecimals: 3
},
showInLegend: true
},
series: {
cursor: 'pointer',
events: {
click: function (e) {
var id = e.point.id;
chartSelect(id);
}
}
}
};
var credits = {
enabled: false
};
var series = [{
name: 'firstSeries',
color: '#ffffff',
data: [],
valueDecimals: 4,
marker: {
symbol: 'url(./icons/GreenSquare.png)'
}
},{
name: 'secondSeries',
color: '#ffffff',
data: [],
valueDecimals: 4,
marker: {
symbol: 'url(./icons/BlueSquare.png)'
}
}, {
name: 'thirdSeries',
color: '#ffffff',
data: [],
valueDecimals: 4,
marker: {
symbol: 'url(./icons/PurpleSquare.png)'
}
}];
var chartJson = {};
chartJson.chart = chart;
chartJson.title = title;
chartJson.subtitle = subtitle;
chartJson.xAxis = xAxis;
chartJson.yAxis = yAxis;
chartJson.borderColor = borderColor;
chartJson.legend = legend;
chartJson.plotOptions = plotOptions;
chartJson.credits = credits;
chartJson.series = series;
$('#chartContainer').highcharts(chartJson);
I need to set the second xAxis colors to more then one color.
My second xAxis is dynamically updated.
How can I decide on different colors for different values of the line?
I need to update those values dynamically.
Thy this example
var chart = $('#container').highcharts();
chart.xAxis[0].update(xAxis);
Related
I'm using highcharts to create a master-detail chart, could you help me how to add another series type area to the chart? i have used example from official site, but i cant imagine how to add second area to this chart
const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json',
data => {
let detailChart;
// create the detail chart
function createDetail(masterChart) {
// prepare the detail chart
var detailData = [],
detailStart = data[0][0];
masterChart.series[0].data.forEach(point => {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
zoomType: "x",
spacingLeft: 10,
spacingRight: -20,
borderRadius: 10,
backgroundColor: "#F3F3F3",
borderColor: "#335cad",
height: priceChartHeight,
style: { fontFamily: "Manrope" },
style: {
position: 'absolute'
},
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: -40,
y: 5
},
theme: {
fill: '#377DED',
stroke: 'transparent',
r: 0,
style: {
color: 'white',
borderRadius: 10
},
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
},
},
},
},
},
marginBottom: 90,
reflow: false,
marginLeft: 10,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
title: {
text: null,
align: 'left'
},
subtitle: {
text: null,
align: 'left'
},
xAxis: {
type: 'datetime',
visible: false,
},
yAxis: {
title: {
text: null,
},
opposite: true,
gridLineColor: "rgba(87, 87, 87, 0.15)",
gridLineDashStyle: "dash",
left: -40
},
tooltip: {
formatter: function () {
var point = this.points[0];
return '' + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> ' + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>' + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>' },
shared: true,
borderRadius: 5,
borderColor: 'transparent',
shadow: false,
backgroundColor: '#fff'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [
{
name: 'Nominal',
data: detailData,
type: 'area',
},
],
exporting: {
enabled: false
}
}); // return chart
}
// create the master chart
function createMaster() {
Highcharts.chart('master-container', {
chart: {
reflow: false,
borderWidth: 0,
backgroundColor: null,
spacingLeft: 10,
spacingRight: 30,
borderRadius: 10,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function (event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
this.series[0].data.forEach(point => {
if (point.x > min && point.x < max) {
detailData.push([point.x, point.y]);
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: data[0][0],
to: min,
color: 'rgba(0, 0, 0, 0)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
});
xAxis.addPlotBand({
id: 'mask-after',
from: min,
to: max,
color: 'rgba(255, 255, 255, 1)',
borderColor: "#377DED",
borderWidth: 2
});
detailChart.series[0].setData(detailData);
console.log(min)
console.log(max)
return false;
}
}
},
title: {
text: null
},
accessibility: {
enabled: false
},
xAxis: {
type: "datetime",
labels: { format: '{value:%b %e }' },
crosshair: {
color: '#377DED80'
},
lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', minorTickLength: 0, tickLength: 0,
top: -5,
showLastTickLabel: true,
maxZoom: 14 * 24 * 3600000, // fourteen days
plotBands: [{
id: 'mask-before',
from: data[0][0],
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
}],
title: {
text: null
},
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0.6,
showFirstLabel: false
},
tooltip: {
borderRadius: 50,
borderColor: 'red'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(255,255,255,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: data[0][0],
data: data
}],
exporting: {
enabled: false
}
}, masterChart => {
createDetail(masterChart);
}); // return chart instance
}
// make the container smaller and add a second container for the master chart
const container = document.getElementById('price-chart-main');
container.style.position = 'relative';
container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';
// create master and in its callback, create the detail chart
createMaster();
}
);
there is example that i used https://www.highcharts.com/demo/dynamic-master-detail
Adding a new series to a master-detail chart is very simple. You need to only add a new data set and connect it to the right series. For example:
var detailData = [
[],
[]
],
detailStart = data1[0][0];
masterChart.series.forEach((s, index) => {
s.points.forEach(point => {
if (point.x >= detailStart) {
detailData[index].push(point.y);
}
});
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
type: 'area',
...
},
...,
series: [{
data: detailData[0]
}, {
data: detailData[1]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/97dxakfe/
API Reference: https://api.highcharts.com/highcharts/series
I'm using angular6 and the office highcharts angular wrapper (https://github.com/highcharts/highcharts-angular) in version 2.4.0.
Everything is working good except the labels that can be placed manually on the chart.
I just don't manage to get them refreshed.
I have a graph that can be filtered through the back-end. When I get the new generated data I update the data in my chartOptions which are used in the html as [options]="chartOptions" for the angular component.
The chartOptions are instanciated from my default class like this: this.chartOptions = new GraphConfigSeqAtteptedVsAchived().chartOptions;
The Class looks like this:
`import * as Highcharts from 'highcharts';
export class GraphConfigSeqAtteptedVsAchived{
public chartOptions: any;
constructor(){
this.chartOptions = {
chart: {
height: 600,
width: 620,
events:{load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
backgroundColor: 'transparent',
},
credits: {
text: 'charname',
href: ''
},
labels: {
},
exporting:{
chartOptions:{
title: {
text:'not set',
style:{
color: '#000000'
},
margin: 0
}
}
},
tooltip: {
enabled: false
},
xAxis: {
min: -10,
max: 0,
width: 535,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
yAxis: {
min: -10,
max: 0,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
title: {
text: ' as',
margin: 0,
style:{
color: 'transparent'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 90,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1,
navigation: {
enabled: false
}
},
plotOptions: {
scatter: {
stickyTracking: false,
allowPointSelect: true,
marker: {
radius: 3,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '',
hideDelay: 500
},
symbol: "circle",
events: {
mouseOut: function() {
this.chart.myTooltip.hide();
this.chart.myTooltip.options.enabled = false;
},
mouseOver: function() {
if(this.halo) {
this.halo.attr({
'class': 'highcharts-tracker'
}).toFront();
}
},
click: function(event) {
this.chart.myTooltip.options.enabled = true;
this.chart.myTooltip.refresh(event.point, event);
}
}
},
line:{
events: {
legendItemClick: function () {
return false;
}
}
},
series:{
allowPointSelect: true
}
},
series: [{
type: 'line',
data: [[30, 30], [-30, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 1
}
},
showInLegend: false,
color: "rgba(0, 0, 0, 0.6)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29.5], [-29.5, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29.5, 30], [-30, -29.5]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29, 30], [-30, -29]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29], [-29, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
}]
}
}
}`
The generated data is in the typescript dynamically added and all of that works just fine. Everything is refreshed after I set the updateFlag for [(update)]="updateGraph". The axis titles are also fine.
The only thing that's not refreshed for me are the labels i dynamically added to the chart like this:
let labelTotalNumberOfEyes = {
html : this.translate.instant('GRAPHS.TOTAL_NUMBER_OF_EYES') + ': ' + (scatterSeries.data.length + scatterSeriesRetreatment.data.length),
style : {
left : '330px',
top : '368px',
fontSize : '14px',
backgroundColor: '#FFFFFF',
borderWidth: 1,
}
}
this.chartOptions.labels.items.push(labelTotalNumberOfEyes);
Does someone have any idea what I'm might doing wrong? I don't see any further option than just setting this update flag and it works fine for everything but the labels.
Please let me know if you're missing any information.
Thanks in advance.
This issue is actually a Highcharts bug. I've reported it here: https://github.com/highcharts/highcharts/issues/10429.
As a workaround, you can use Highcharts.SVGRenderer to add a custom label and store reference to it in your component. Next, when updating, call attr() method on the label (Highcharts.SVGElement) and set new options. Check demo and code posted below.
Add a label on chart callback:
constructor() {
const self = this;
this.chartCallback = chart => {
self.chart = chart;
self.label = chart.renderer
.text("test", 100, 100)
.css({
fill: "#555",
fontSize: 16
})
.add()
.toFront();
};
}
call attr() on the label while updating:
update_chart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15],
name: "updatedSerieName"
}
];
self.chartOptions.yAxis.title.text = "updatedData";
self.label
.attr({
text: "test1",
x: 150,
y: 120
})
.css({
fill: "red",
fontSize: 20
});
self.updateFromInput = true;
}, 2000);
}
Demo:
https://codesandbox.io/s/8zo0yvqqwj
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I have a Flot Bar Chart code.
$(function() {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.4,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
}
}
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
min:-200, max: 200, tickSize: 50,
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth:0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "Cost: %y %"
}
};
var barData = {
label: "bar",
data: [
["First", -100],["Second", 66.67],["Third", -177.77],]
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
});
I want that every bar below 0 would be specific (for example red) color. I have tried to do that with threshold plugin, but it adds additional values. Is there any solution to make it?
The threshold plugin should not add additional values, see this fiddle or the snippet below:
$(function() {
var barOptions = {
series: {
bars: {
show: true,
barWidth: 0.4,
fill: true,
fillColor: {
colors: [{
opacity: 0.8
}, {
opacity: 0.8
}]
},
align: 'center'
}
},
xaxis: {
mode: "categories",
tickLength: 0,
ticks: [
[1, 'First'],
[2, 'Second'],
[3, 'Third']
]
},
yaxis: {
min: -200,
max: 200,
tickSize: 50,
},
colors: ["#1ab394"],
grid: {
color: "#999999",
hoverable: true,
clickable: true,
tickColor: "#D4D4D4",
borderWidth: 0
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: "Cost: %y %"
}
};
var barData = {
label: "bar",
data: [
[1, -100],
[2, 66.67],
[3, -177.77],
],
threshold: {
below: 0,
color: "rgb(200, 20, 30)"
},
};
$.plot($("#flot-bar-chart"), [barData], barOptions);
});
#flot-bar-chart {
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.threshold.min.js"></script>
<div id="flot-bar-chart"></div>
I'm trying to hide the label and change the border width on mouse over, and return the graph to its original state on mouse out.
The "Uncaught TypeError: Cannot read property 'states' of undefined" keeps showing and I don't know what to do.
var showLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = true;
options.plotOptions.series.borderWidth = 0;
myChart = new Highcharts.Chart(options);
};
var hideLabel = function () {
var options = myChart.options;
options.xAxis[0].labels.enabled = false;
options.plotOptions.series.borderWidth = 3;
myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits:false,
exporting:false,
title: {
text: ''
},
xAxis: {
categories:['Captação'],
labels: {
//AQUI
enabled:true,
x: 80,
y: 5,
style:{
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled:false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled:false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
stickyTracking: false,
borderColor: '#000000',
//AQUI
borderWidth: 0,
events: {
mouseOver: function (event) {
console.log('Mouse over');
return hideLabel();
},
mouseOut: function () {
console.log('Moused out');
return showLabel();
}
}
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
JS Fiddle
Instead of recreating charts on each mouse event you should update the chart dynamically using axis.update and series.update.
It will be also better to get event of charts container instead of series, since you want to change the chart and the series.
Example: https://jsfiddle.net/aythcvop/
$(function() {
var showLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: true
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 0
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = true;
//options.plotOptions.series.borderWidth = 0;
//myChart = new Highcharts.Chart(options);
};
var hideLabel = function(chart) {
chart.xAxis[0].update({
labels: {
enabled: false
}
}, false);
Highcharts.each(chart.series, function(series) {
series.update({
borderWidth: 3
}, false);
});
chart.redraw();
//options.xAxis[0].labels.enabled = false;
//options.plotOptions.series.borderWidth = 3;
//myChart = new Highcharts.Chart(options);
};
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.bar.colors = (function() {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'graph_capt',
type: 'bar',
backgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
credits: false,
exporting: false,
title: {
text: ''
},
xAxis: {
categories: ['Captação'],
labels: {
//AQUI
enabled: true,
x: 80,
y: 5,
style: {
color: '#ffffff',
fontSize: '12pt',
},
},
tickWidth: 0,
tickColor: '#000000',
gridColor: '#000000',
gridLineWidth: 0,
lineWidth: 0,
visible: true,
},
yAxis: {
labels: {
enabled: false
},
min: 0,
gridLineWidth: 0,
title: {
text: ''
}
},
tooltip: {
pointFormat: '<span style="color:black">{series.name}</span>: <b>R$ {point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: false,
},
legend: {
enabled: false,
},
plotOptions: {
bar: {
stacking: 'percent',
allowPointSelect: true,
colorByPoint: true,
cursor: 'pointer'
},
series: {
borderColor: '#000000',
//AQUI
borderWidth: 0
},
},
series: [{
name: 'Poupança',
data: [1000000]
}, {
name: 'Letras',
data: [75000.75]
}, {
name: 'Fundos',
data: [50545.49]
}]
});
$('#graph_capt').on('mouseenter', function() {
console.log('hide');
hideLabel(myChart);
});
$('#graph_capt').on('mouseleave', function() {
console.log('show');
showLabel(myChart);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="graph_capt" style="height:100px"></div>
I have data from ajax response in array, here it is:
"attd": [
{
"y": 1,
"name": "Attendance",
"sliced": true,
"selected": true
},
{
"y": 1,
"name": "SPJ in town",
"sliced": true,
"selected": true
}
]
i want pass this result into highchart, here's my code:
success: function(rs) {
var attdChart = $(".attdChart");
attdChart.unbind();
var jsonData = JSON.parse(rs);
if (jsonData.success) {
var data = jsonData.attd;
var data_array = [];
$.each(data, function(key, value){
data_array.push(value);
});
$('#containerPiechart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height: 200,
marginRight: 60
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
}
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 0
},
series: data_array
});
}
I tried to use console.log, here is the result:
It show the result. I assumed that the error in series: data_array cause when i give a hard code in there, the chart showed. But cause the code:series: data_array,there is no chart show.Help me please...
here's my sample code for pie chart that how i do that ,
var options1={
chart:{
renderTo: 'pie_chart',
type: 'pie',
options3d:{
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: 'Title'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Time Fixed',
},
labels: {
overflow: 'justify'
},
tooltip:{
formatter: function() {
return this.series.name +': '+ this.y;
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true
},
showInLegend: true
},
series: {
animation:{ duration: 1000}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 50,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: []
}
// chart = new Highcharts.Chart(options1);
$.getJSON("your_ajax_call_file.php", function(json){
$.each(json, function(key, value) {
var series = {}; // <-------------------- moved and changed to object
series.name = key;
series.data = value;
options1.series.push(series); // <-------- pushing series object
});
var chart = new Highcharts.Chart(options1);
});
just tried out this method , it should helps you definitely . remember just put series as array in var options1.