Home forums Using CanvasJS Removing doughnut label from chart populated from a CSV

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  jh87 9 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #14106

    jh87
    Member

    I have this chart that populates from Data.csv, however I’ve been unable to remove the labels without also removing the region from the tooltip. So – I want the Tooltip to read ‘UK: 3’ for example, but to have no labels. The code is:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function () {
    
        $.ajax({
            type: "GET",
    		startAngle: -90,
            url: "Data.csv",
            dataType: "text",
            success: function (data) { processData(data); }
        });
    	
    	
    
        function processData(allText) {
            var allLinesArray = allText.split('\n');
            if (allLinesArray.length > 0) {
                var dataPoints = [];
                for (var i = 0; i <= allLinesArray.length - 1; i++) {
    	        var rowData = allLinesArray[i].split(',');
    	        if(rowData && rowData.length > 1)
    	            dataPoints.push({label: rowData[0], y: parseInt(rowData[1]) });
                }
                chart.options.data[0].dataPoints = dataPoints;
                chart.render();
            }
        }
    	
                
        var chart = new CanvasJS.Chart("chartContainer", {
    
            theme: "theme2",
            data: [
            {
    			
                type: "doughnut"	,	
    			startAngle: -90,
                dataPoints: []
    			
            },
            ]
        });
                
    });
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>

    Thank you!

    #14116

    Vishwas R
    Keymaster

    @jh87,

    Are you looking for something like this?


    Vishwas R

    #14120

    jh87
    Member

    Hi Vishwas,

    Thanks for your reply. I solved it by adding:

    indexLabel: "{null}",

    So all together:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function () {
    
        $.ajax({
            type: "GET",
            url: "datapointsnumber.csv",
            dataType: "text",
            success: function (data) { processData(data); }
        });
    
        function processData(allText) {
            var allLinesArray = allText.split('\n');
            if (allLinesArray.length > 0) {
                var dataPoints = [];
                for (var i = 0; i <= allLinesArray.length - 1; i++) {
    	        var rowData = allLinesArray[i].split(',');
    	        if(rowData && rowData.length > 1)
    	            dataPoints.push({ label: rowData[0], y: parseInt(rowData[1]) });
                }
                chart.options.data[0].dataPoints = dataPoints;
                chart.render();
            }
        }
    
                
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
    		indexLabelLineColor: "white",
            data: [
            {
                type: "doughnut",
    			showInLegend: true, 
    			indexLabel: "{null}",
    			interval : 1,
                dataPoints: []
            }
            ]
        });
                
    });
    </script>
    <script type="text/javascript" src="canvasjs.min.js"></script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </body>
    </html>
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.