Home › forums › Using CanvasJS › What if, all y : data is 0 ?
Tagged: 0 value in datapoint, dataPoints, pie chart
This topic contains 7 replies, has 2 voices, and was last updated by Sanjoy 1 year, 1 month ago.
If i input 0 for all value of y: in datapoint pie-chart, chart doesn’t show-up/render.
Is it possible to display a message like : “No Data found!” for a particular canvas chart.
Example : <script type=”text/javascript”> window.onload = function () { var chart = new CanvasJS.Chart(“chartContainer”, { theme: “theme2”, title:{ text: “Gaming Consoles Sold in 2012” }, data: [ { type: “pie”, showInLegend: true, toolTipContent: “{y} – #percent %”, yValueFormatString: “#,##0,,.## Million”, legendText: “{indexLabel}”, dataPoints: [ { y: 0, indexLabel: “PlayStation 3” }, { y: 0, indexLabel: “Wii” }, { y: 0, indexLabel: “Xbox 360” }, { y: 0, indexLabel: “Nintendo DS”}, { y: 0, indexLabel: “PSP” }, { y: 0, indexLabel: “Nintendo 3DS”}, { y: 0, indexLabel: “PS Vita”} ] } ] }); chart.render(); } </script>
@nik-sol,
Please take a look into this jsfiddle.
— Sanjoy Debnath Team CanvasJS
@sanjoy,
Great .! Thanks for the info.
—
nik.sol
One more help in similar case, We need to hide legends in this situation as well.
I did this to achieve my functionality..
function showDefaultText(chart, text){ var dataPoints = chart.options.data[0].dataPoints; var isEmpty = !(dataPoints && dataPoints.length > 0); if(!isEmpty){ for(var i = 0; i < dataPoints.length; i++){ isEmpty = !dataPoints[i].y; dataPoints[i].indexLabel = ''; if(!isEmpty) break; } } if(!chart.options.subtitles) chart.options.subtitles = []; if(isEmpty) chart.options.subtitles.push({ text : text, verticalAlign : 'center', }); else chart.options.subtitles = []; }
Let me know if there is better way of doing it.
Did some more changes..
Using this :
if(isEmpty){ <strong> for(var i = 0; i < dataPoints.length; i++){ dataPoints[i].indexLabel = ''; }</strong> chart.options.subtitles.push({ text : text, verticalAlign : 'center', }); }
Instead of :
if(!isEmpty){ for(var i = 0; i < dataPoints.length; i++){ isEmpty = !dataPoints[i].y; <del datetime="2018-01-03T09:35:27+00:00"> dataPoints[i].indexLabel = '';</del> if(!isEmpty) break; } }
nik.sol,
You can achieve this by toggling showInLegend property. Please take a look at this updated jsfiddle.
You must be logged in to reply to this topic.