jqplot pie chart not showing all available values - jqplot

I need some help related with jqPlot pie-chart value. Using the following data-set:
['XX01',77.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]
and this jqPlot option script:
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
the result is not showing all the available values. see the snapshot.
Can somebody help me about this? Waiting for any solution here... thanks!

Thank you for the response, Nandu.
I just figured it out yesterday, there is plugin's option for the data label, it is called dataLabelThreshold - jqPlot documentation. By default the value is 3, which mean that for any value below 3 won't be displayed. So the solutions just as simple as define the new threshold.

See this FIDDLE
$.jqplot('pieChart', [[['XX01',7.28], ['XX02',3.28], ['XX03',3.31], ['XX04',2.42], ['XX05',2.4],
['XX06',1.61], ['XX07',2.45], ['XX08',1.69], ['XX09',2.18], ['XX10',1.6],
['XX11',1.78]]],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
dataLabelFormatString: '%.2f%%',
dataLabelPositionFactor: 1.2,
shadow: false,
sliceMargin: 3
},
}
});
I think it is due to your data.I changed the first data from 77.28 to 7.28.It works fine.

Related

Highstock dataGrouping not working with live data

I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/

Display and use time values on Highcharts

I'm quite new to Highcharts and the documentation is pretty huge for me to solve my little big problem.
I'm working on app for runners and want to display running pace on chart in minutes:seconds by kilometer or mile, in format like 05:30, which means pace 5 minutes and 30 seconds pre kilometer or mile.
My current (and not working) code is here:
Highcharts.chart('container', {
yAxis: {
type: 'datetime',
categories: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
labels: { format: '{value:%H:%M}'}
},
xAxis: {
categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
data: ['05:00', '06:00' , '06:30'],
dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});
Currently the line in chart is not appearing. Can anybody repair my code to work correctly? Thanks.
Data needs to be numbers, not string values. If you look in console, you will most likely have Error 14 telling you this.
Changing your data to milliseconds (the format needed for highcharts to understand time) will work, like this:
data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],
Working example: https://jsfiddle.net/ewolden/55bk99ke/2/
If you want to fix the tooltip in the above example, you just need to format it the same way you format the yAxis labels. Like this:
tooltip: {
pointFormat: '{point.y:%H:%M}'
},
https://jsfiddle.net/ewolden/55bk99ke/5/

Parsing dates issues with amCharts

I am trying to create a date based data serial type chart, strongly based in example "Date Based Data" available in amChart's website. The code is almost the same except that I'm replacing dataProvider variable names and date format.
The problem is that it's throwing jQuery error:
Uncaught TypeError: Cannot read property 'replace' of undefined
at Object.d.formatDate (amcharts.js:397)
at b.dispatchTimeZoomEvent (serial.js:45)
at b.timeZoom (serial.js:36)
at b.zoom (serial.js:34)
at b.drawChart (serial.js:31)
at b.onDataUpdated (serial.js:25)
at b.initChart (serial.js:25)
at b.measureMargins (serial.js:7)
at b.onDataUpdated (serial.js:26)
at b.initChart (serial.js:25)
And so it's not rendering the graph.
Any idea in what I could be doing wrong? Here's a fiddle with the code: https://jsfiddle.net/qtzmq9z7/
var chartData = [{"regtime": "2016-12-06T09:16:17Z", "power": -0.4},
...
{"regtime": "2016-12-06T13:28:43Z", "power": -0.4}];
var chart1 = AmCharts.makeChart("general-chart", {
...
"dataDateFormat": "YYYY-MM-DDTHH:NN:SSZ",
"categoryField": "regtime",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"minPeriod": "SS"
},
...
});
PS: It looks like there is some weird bug with jsfiddle and amCharts, causing the graph to increase its height infinitely, but that is not happening outside jsfiddle, so just ignore that problem.
minPeriod uses "ss" for seconds. Notice it has to be lower-cased.
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"minPeriod": "ss"
}
Please check the updated example https://jsfiddle.net/qtzmq9z7/1/

kendo chart display 0 value

I display correctly a funnel dataviz kendo-Ui chart, it works great except when my dataItem is 0
I want it to display in my label so I made a custom label:
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
color:"white",
format: "N0",
template: "#= dataItem.type # - #= dataItem.value#"
},
dynamicSlope: false,
dynamicHeight: false
},
I get my data from a Json call which return 0.
How should I do to make my funnel display the label even if the dataItem.value = 0?
I ended by doing quick and dirty fix, i replaced 0 by 0.000001 and rounding at display it's dirty but it works.

horizontal legend at the bottom of graph in jqplot

I m able to get horizontal legend of jqplot graph using EnhancedLegendRenderer plugin.But i need horizontal legend at the bottom of the graph .Any suggestion?
You should always show some work when posting to stack overflow. It helps us understand your problem.
I think you are having a problem with EnhancedLedgendRenderer based on your description.
This is what my code looks like to achieve a 1 row, 3 column legend.
legend: {
// This renderer is needed for advance legends.
renderer: jQuery.jqplot.EnhancedLegendRenderer,
show: true,
location: 's',
placement: 'outside',
// Breaks the ledgend into horizontal.
rendererOptions: {
numberRows: '1',
numberColumns: '3'
},
seriesToggle: true
},
Also, you are probably getting down voted because of punctuation and lack of capitalization.
change placement option to outside to outsideGrid
legend: {
renderer: jQuery.jqplot.EnhancedLegendRenderer,
show: true,
location: 's',
placement: 'outsideGrid',
rendererOptions: {
numberRows: '1',
},
},

Resources