FusionCharts API-Methods: startingAngle

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the startingAngle() method -->
<div id="indicatorDiv">Method Name: <b>startingAngle()</b>    
    <p>Rotates the pie/doughnut chart to a specific angle or by a specific angle. Click <a href="http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#startingAngle" target="_blank">here</a> to read more about this method.</p>
    <p>Enter an angle measure in the text box shown below. If <b>Rotate: Absolute</b> is clicked, the pie chart is rotated at the specified angle measure w.r.t to 0° starting angle. If <b>Rotate: Relative</b> is clicked, the chart is rotated at the specified angle measure w.r.t to the current angle measure.</p>

    <div class="text-center mb-20">
    	<input type="text" id="angle" placeholder="Enter an angle measure here." height="35" />
    	<button id="absolute">Rotate: Absolute</button>
    	<button id="relative">Rotate: Relative</button>
    </div>
    
     <span class="err mb-20" id="err"></span>
    <div id="chart-container" class="container">chart will render here.</div>
    
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#absolute {
    height: 25px;
    font-size: 13px;
}
#relative {
    height: 25px;
    font-size: 13px;
}
#angle {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
    width: 200px;
    height: 20px;
}
.err {
    color:red;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Visitors by Age Group",
                    "subCaption": "Last year",
                    "captionFontSize": "13",
                    "subCaptionFontSize": "12",
                    "theme": "fint"
            },
                "data": [{
                "label": "Teenage",
                    "value": "1250400"
            }, {
                "label": "Adult",
                    "value": "1463300"
            }, {
                "label": "Mid-age",
                    "value": "1050700"
            }, {
                "label": "Senior",
                    "value": "491000"
            }]
        }
    }).render();

    /**
     * @description
     * The startingAngle() method rotates the pie/doughnut chart to a specific angle or by a specific angle. The mode of operation is controlled by the optional second parameter.

     *
     * @param {Number} angle: Angle measure by which the pie/doughnut chart will be rotated. Default: 0
     * @param {Boolean} relative: Mode of operation for the rotation. Specifies whether the angle being set is relative to the current angle or is w.r.t absolute 0.Default: false
     *
     * usage: chartObj.startingAnlge(angle,angle);
     *         
     */
    function warn() {
        document.getElementById("err").innerHTML = "Enter valid number";
    }

    var angle = document.getElementById("angle");

    function rotate_abs() {
        if (isNaN(angle.value) || angle.value === "") {
            warn();
        } else {
            document.getElementById("err").innerHTML = "";
            ageGroupChart.startingAngle(angle.value);
        }
    }

    function rotate_rel() {
        if (isNaN(angle.value) || angle.value === "") {
      ...