I am using HighChart to draw a pie chart.Pie chart container is in an ascx control.In the page there are 5 controls other than this.Each ascx sections are loading by ajax async calls.Problem is that graph in first section is showing only after complete page page load.Please provide a solution.
$('#arrhythmiacontainer').highcharts({
chart: {
//plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
colors: ['#F5F5F5'],
title: {
text: ''
},
exporting: {
enabled: exportingStatus
},
tooltip:{
formatter: function() {
return false;
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: true,
distance: -70,
style: {fontSize: '12px',fontWeight: 'bold'}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'pie',
name: 'Percentage',
data: [['NO DATA AVAILABLE', 100]]
}]
});
}
The above graph is in first control and it is binding using ajax call.all the other informations in control1 is loading after first ajax call.but graph is loading only after window stop.
Related
I have a chart where I had to build a second series to format the labels for my design brief. In this the data labels on the pie chart show percentages, and the legend shows the labels of the items. Currently my implementation works fine except that the legend is still hoverable, and causes the chart to wash out.
Highcharts.chart({
chart: {
styledMode: true,
renderTo: chart,
events: {},
},
title: {
text: "",
},
credits: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
enableMouseTracking: false,
},
pie: {
dataLabels: {
distance: 3,
padding: 0,
// crop: false,
// overflow: "allow",
alignTo: "toPlotEdges",
verticalAlign: "middle",
},
},
},
series: [
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: highchartsData,
innerSize: "25%",
showInLegend: false,
size: "95%",
states: {
hover: {
enabled: false,
},
},
},
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: labelData,
showInLegend: true,
states: {
hover: {
enabled: false,
},
},
},
],
});
Currently, this is the behavior:
Not sure what to do to disable this that I haven't already done.
You don't need to use the second series, use instead format for data labels.
series: [{
dataLabels: {
format: '{point.y}%'
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/jhmfcty3/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.format
I created document with highcharts scatter graph
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
title: {
enabled: true,
text: 'Date of entry'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Values'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
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: 'Dana {point.x} = {point.y}'
}
}
},
series: [{
name: 'Values',
color: 'rgba(223, 83, 83, .5)',
data: [[167.6, 64.5], [167.6, 72.3], [167.6, 61.4]]
}]
});
and this works. This code is from documentation page. I get normal scatter data like on this page Highcharts scatter jsfiddle
Now, I created another PHP file that produces me with data I actually need. it is in document highcharts.php and result is this
[07.03.2017,21000],[07.03.2017,25000],[07.03.2017,33000],[07.03.2017,27000],[07.03.2017,30000],[01.01.2017,700],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],
how to connect data to this highcharts.php file? I found some examples but I cannot get it to work. So for start I need this, ONE line of data to show on scatter diagram. I lost few days and just do not get it what I am doing wrong.
If your PHP file returns the array presented above, you need to parse it a little bit in order to use it as data array in a scatter series. First of all, dates should be strings. Secondly, you need to use new Date() to create Date instance and use getTime() to return timestamps. Also, change xAxis type to datetime.
API Reference:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
Example:
http://jsfiddle.net/0025rsmt/
I am building a real-time visualisation tool for some PC hosts, using the highcharts library. Using websocket, the web application receives data and update the charts (11 charts per web application, per host). The javascript code is in one single file and that causes the browser to freeze at some point, or just some considerable latency.
After googling, i read about web workers, and thought of trying it to optimize. So I came up with 02 javascript files:
The first one (Main thread) initialising UI and charts etc...
The second one (worker) supposed to listen to websocket, and update the charts.
Since the charts are created in the main thread (because that's where i can acces the DOM and choose charts' container), when i try to transfer the charts to the worker i get the DATA_CLONE_ERR error as follows:
DataCloneError: The object could not be cloned.
Below is the part of the script triggering the code, precisely at the postmessage() part:
var charts_list = []; //charts
function initAllCharts(host_i, l_id, pos){
var chart_i;
for (var i = 0; i < 11; i++) {
if (i < 4){
chart_i = new Highcharts.Chart({
chart: {
renderTo: l_id + '_graph'+i,
defaultSeriesType: 'spline',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
title: {
text: ''
},
legend: {
enabled: true
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
spline: {
marker: {
enabled: false
}
}
},
tooltip: {
valueDecimals: 2,
},
xAxis: {
title: {
text: ''
},
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
title: {
text: ''
},
minPadding: 0.2,
maxPadding: 0.2,
},
series: [{
name: 'Random data',
data: []
}]
});
}else{
chart_i = new Highcharts.Chart({
chart: {
renderTo: l_id + '_histogram'+i,
type: 'column',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
title: {
text: '',
},
subtitle: {
text: '',
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
tooltip: {},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
borderWidth: 0.5,
}
},
xAxis: {
title: {
text: ''
}
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Random Data',
data: []
}],
});
}
charts_list.push(chart_i);
chart_i = {};
}
//Post to worker
toChartsWorker = {"charts_list":charts_list};
chartsDataWorker.postMessage(toChartsWorker);
return chart_i;
}
So far, that's the only approach i have. Could you please help me out ? Do you see another way of doing ?
I am having troubles trying to render Highchart inside a div. I dont know why there are bars that not displaying correctly.
I set a width value on the container highchart div, expecting bars occupy 100% of the div, but as you see it is not happening.
Here is how i set Highchart options:
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
spacingBottom: 1,
spacingTop: 1,
spacingRight: 1,
backgroundColor: null,
renderTo: containerId
},
colors: ['#8b878a', '#10914E', '#DBD311', '#7e8b00'],
title: '',
tooltip: {
enabled: false
},
xAxis: {
labels:{
enabled: false
}
},
yAxis: {
labels:{
enabled: false
},
gridLineWidth:0,
title: {
enabled: false
},
visibility: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
if(this.series.options.showPercentageValue && this.series.options.percentageValue > minValueBarPercentage){
return (Math.round(this.series.options.percentageValue) + ' %'); //~~(elimina decimales)
}
},
style:{fontSize: '9px', color:'black', paddingBottom: '1px', fontWeight: 'bold'}
},
pointPadding: 0,
groupPadding: 0.1
}
},
series: values
});
Any idea?
Here is a picture of what is happening >>> http://imgur.com/a/FEfpz
I have multiple data coming on each day and I was wondering how to make a graph where I see the days and when I zoom in I should see the time in between the days. I am not able to do so resulting in a graph with days getting duplicated or triplicated as per the number of data points.
Before Zooming:-
After Zoom :-
I would like not to have duplicate Day names rather time in between them.
My Highcharts-ng configuration json object is as follows:-
{
options: {
chart: {
type: 'line',
zoomType: 'xy',
animation: true
},
colors:['#2C91DE','#165A8E'],
plotOptions: {
line:{
marker:{
symbol:'circle'
}
},
series: {
lineWidth: 3,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: null,
enabled: true,
radius: 5
}
}
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: true
}
},
title: {
text: ''
},
loading: false,
xAxis: {
type: 'datetime',
title: {
text: 'Date/Time'
},
dataTimeLabelFormats:{
day:'%a',
week:'%a',
},
labels: {
format: '{value:%a}'
}
},
series: [{
pointIntervalUnit: 'hourly'
}],
yAxis: {
title: {
text: ''
}
},
size: {
height: 500
}
}