Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breaking 3d pie chart #3323

Closed
sunilvarmach opened this issue Aug 7, 2014 · 16 comments

Comments

@sunilvarmach
Copy link

commented Aug 7, 2014

slice is breaking in pie chart
3d pie chart
Code:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
          reflow: false,
            options3d: {
                enabled: true,
                alpha: 85,
                beta: 0
            }
        },
      legend: {
                enabled: true,
                align: 'bottom',
                layout: 'vertical',
                verticalAlign: 'bottom'
            },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
              size:400,
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 130,
                animation: false,
                    //minSize: 1,
                    dataLabels: {
                        enabled: false,
                        format: '{point.y}: {point.percentage:.1f} % asd'
                        //softConnector: false,
                        //connectorPadding: 5,
                        //distance: 30
                    },
                    showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            data: [
                    { "name": "FFI PREMIER INSTITUTIONAL FUND", "y": 5600.11, "sliced": true, "selected": true },
                    { "name": "2001 ML VENTURES", "y": 8612.1, "sliced": true, "selected": true}]
        }]
    });
});

@TorsteinHonsi TorsteinHonsi assigned ghost Aug 7, 2014

@TorsteinHonsi TorsteinHonsi added the Bug label Aug 7, 2014

@ghost

This comment has been minimized.

Copy link

commented Aug 7, 2014

http://jsfiddle.net/stephanevanraes/02w1udhy/
Do you see this in all browsers or is it a specific version ?

@sunilvarmach

This comment has been minimized.

Copy link
Author

commented Aug 7, 2014

its coming in all browsers

@sunilvarmach

This comment has been minimized.

Copy link
Author

commented Aug 11, 2014

any update on this issue?

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Aug 11, 2014

Tested Chrome & FF on Mac - works perfectly fine. Maybe Windows specific issue?

@sunilvarmach

This comment has been minimized.

Copy link
Author

commented Aug 13, 2014

i am working with windows os.
this code will work in jsfiddle but the same code i use in html file issue is coming like in pic.

@sebastianbochan

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2014

Can you attach your html files, or recreate demo as live, to replicate this issue, beside the jsfiddle?

@sunilvarmach

This comment has been minimized.

Copy link
Author

commented Aug 13, 2014

Here is my cshtml code am using in mvc

controller action:
Public ActionResult TestPage()
{
return view("~/Views/Test/TestPage.cshtml");
}

<script type="text/javascript" src=".../jquery-1.7.1.min.js"></script> <script type="text/javascript" src=".../highcharts.js"></script>
     $(function () {
         $('#chartcontainer1').highcharts({
             chart: {
                 type: 'pie',
                 reflow: false,
                 options3d: {
                     enabled: true,
                     alpha: 85,
                     beta: 0
                 }
             },
             legend: {
                 enabled: true,
                 align: 'bottom',
                 layout: 'vertical',
                 verticalAlign: 'bottom'
             },
             title: {
                 text: 'Browser market shares at a specific website, 2014'
             },
             tooltip: {
                 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
             },
             plotOptions: {
                 pie: {
                     size: 400,
                     allowPointSelect: true,
                     cursor: 'pointer',
                     depth: 130,
                     animation: false,
                     //minSize: 1,
                     dataLabels: {
                         enabled: false,
                         format: '{point.y}: {point.percentage:.1f} % asd'
                     },
                     showInLegend: false
                 }
             },
             series: [{
                 type: 'pie',
                 data: [
         { "name": "BLACKROCK CAPITAL APPR CF", "y": 5.02, "sliced": false, "selected": true },
         { "name": "WESTERN ASSET CORE BOND CL IS", "y": 5.04, "sliced": false, "selected": true },
         { "name": "FFI PREMIER INSTITUTIONAL FUND", "y": 5590.1, "sliced": false, "selected": false },
         { "name": "2001 ML VENTURES", "y": 8612.1, "sliced": false, "selected": false }
         ]
             }]
         });
     });    
</script>
@sunilvarmach

This comment has been minimized.

Copy link
Author

commented Aug 13, 2014

3d issue

@sunilvarmach

This comment has been minimized.

Copy link
Author

commented Aug 13, 2014

3d issue

@sunilvarmach

This comment has been minimized.

Copy link
Author

commented Aug 13, 2014

sharing the page source also

<title>Benefits OnLine</title>
<link rel="Stylesheet" href="/CDN/Styles/bolcore.css?v=2.1.38">

<script language="javascript" type="text/javascript">
    try {
        document.domain = 'ml.com';
    }
    catch (e) {

    }
</script>
<div>


<div>
<div style="margin-top: -20px; float: right;" id="dvHeaderControls"></div>
    <span>Site Master</span>&nbsp;<a href="/CoreTest/Test/Home">| Home</a>
    <br>
    <span>Custom Sections:</span>
    <br>        
    <div>
    <div id="dvStageMessages"></div>
        <div style="padding: 5px; border: 1px solid blue; width: 30%; float: left;">

            <div></div>
            <br>


            <div></div>
            <br>

        </div>
        <div style="padding: 5px; border: 1px solid green; width: 60%; margin-left: 5px; float: left;">

            <div><form method="post" action="/CoreTest/Test/TestChart" novalidate="novalidate"></form><div id="chartcontainer">


Created with Highcharts 4.0.1BLACKROCK CAPITAL APPR CFWESTERN ASSET CORE BOND CL ISFFI PREMIER INSTITUTIONAL FUND2001 ML VENTURES2001 ML VENTURESSeries 1: 59.9%

            <div></div>
            <br>


            <div></div>
            <br>

            <div></div>
            <br>
        </div>



        <br>
    </div>
</div>

</div>

    <span id="HEX" class="hidden">
        A28E9B9D
    </span>
<script type="text/javascript" src="/CDN/JS/jquery-1.7.1.min.js?v=2.1.38"></script> <script type="text/javascript" src="/CDN/JS/Utility.min.js?v=2.1.38"></script> <script type="text/javascript"> $(function () { HTML.BOL_Client.ThreeDimPieChart().Container('chartcontainer1').Title('').Size(150) .SeriesData([ { "name": "BLACKROCK CAPITAL APPR CF", "y": 5.02, "sliced": false, "selected": true }, { "name": "WESTERN ASSET CORE BOND CL IS", "y": 5.04, "sliced": false, "selected": true }, { "name": "FFI PREMIER INSTITUTIONAL FUND", "y": 30.1, "sliced": false, "selected": false }, { "name": "2001 ML VENTURES", "y": 60.1, "sliced": false, "selected": false } ], '$') .LegendFormatter().ShowLegend(false).Tilt(null).Render(); // HTML.BOL_Client.ThreeDimPieChart().Container('chartcontainer1').Title('Stock Price').Size(160). // SeriesData([{ "name": "Incentive Stock Open 1", "y": 45, "sliced": false, "selected": false }, { "name": "Incentive Stock Open 2", "y": 24.8, "sliced": true, "selected": true }, { "name": "Non Qualified Stock Option", "y": 30.2, "sliced": false, "selected": false}], '$') // .LegendFormatter().Render(); //HTML.BOL_Client.ColumnChart().YAxis('', '').Container('chartcontainer1').Title('Historic Stock Price 1') // .DataOnXAxis(["GROWTH AWARD ACCOUNT BALANCE","BAC COM STK FUND","DODGE \u0026 COX STOCK FD","PIMCO TOTAL RETURN PORT. INSTL","BLACKROCK GLOBAL ALLOC I"]).DataOnYAxis('{"Title":null,"StackLabels":null,"Labels":null,"Min":null,"Max":null,"TickInterval":null}').SeriesData([{"name":" ","data":[[35712.21],[66562.62],[116845.16],[18323.53],[18323.53]]}],'M') // .Size(80).LegendFormatter(return '
' + key + '
').Render(); // HTML.BOL_Client.ColumnChart().YAxis('', '').Container('chartcontainer1').Title('Historic Stock Price 1') // .DataOnXAxis(["GROWTH AWARD ACCOUNT BALANCE","BAC COM STK FUND","DODGE \u0026 COX STOCK FD","PIMCO TOTAL RETURN PORT. INSTL","BLACKROCK GLOBAL ALLOC I"]).DataOnYAxis('{"Title":null,"StackLabels":null,"Labels":null,"Min":null,"Max":null,"TickInterval":null}').SeriesData([{"name":" ","data":[[35712.21],[66562.62],[116845.16],[18323.53],[18323.53]]}],'M') // .Size(80).LegendFormatter("return '
' + value + '' + key + '
'").Render(); // HTML.BOL_Client.LineChart().Container('chartcontainer1').Title('Historical Balances').SubTitle('Historical Balance Per Year').TickInterval() // .PointStart().SeriesData([30605.91, 24344.62, 33575.66, 12024.33, 20913.87, 6300.01], 'L').Name('test Chart') // .XAxis(null, null, null, ["1Q\u003cbr/\u003e2014", "4Q\u003cbr/\u003e2013", "3Q\u003cbr/\u003e2013", "2Q\u003cbr/\u003e2013", "1Q\u003cbr/\u003e2013", "4Q\u003cbr/\u003e2012"]).YAxis(null, null, null, '') // .Size(80).Render(); // HTML.BOL_Client.ColumnChart().YAxis('Stock Price', '').Container('chartcontainer1').Title('Historic Stock Price 1') // .DataOnXAxis(["GROWTH AWARD ACCOUNT BALANCE", "BAC COM STK FUND", "DODGE \u0026 COX STOCK FD", "PIMCO TOTAL RETURN PORT. INSTL", "BLACKROCK GLOBAL ALLOC I"]) // .DataOnYAxis('').SeriesData([{ "name": "Total Retirement Plans", "data": [[35712.21], [66562.62], [116845.16], [18323.53], [18323.53]]}]).Size(80) // .Render(); // HTML.BOL_Client.ColumnChart().YAxis('', '').Container('chartcontainer1').Title('Historic Stock Price 2') // .DataOnXAxis(["08/08/2009", "09/09/2010", "10/10/2011", "11/11/2013"]).DataOnYAxis('') // .SeriesData([{ "name": "Non Qualified Stock Option", "data": [11000, 27000, 30000, 45000] }, { "name": "Stock appreciation Rights", "data": [12000, 21000, 39000, 50000] }, { "name": "Restricted Shares", "data": [12000, 21000, 39000, 50000] }, { "name": "Restricted Share Units", "data": [12000, 21000, 39000, 50000]}]) // .Size(80).Render(); // HTML.BOL_Client.LineChart().Container('chartcontainer1').Title('Line Chart Demo 1').SubTitle('Historical Balance Per Year 1').TickInterval(). // PointStart(1).SeriesData([1,2,4,8,16,32,64,128,256,512]).Name('Historical Balances 1').XAxis(null,null,null,null).YAxis(null,null,null).Size(80).Render(); // HTML.BOL_Client.LineChart().Container('chartcontainer1').Title('Line Chart Demo 2').SubTitle('Historical Balance Per Year 2').TickInterval(). // PointStart(1).SeriesData([1,2,4,8,16,32,64,128,256,512]).Name('Historical Balances 2') // .XAxis(null,null,null,["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct"]).YAxis(null,null,null).Size(80).Render(); // var barseriesdata = [{ name: 'Jane', data: [1, 2, 4] }, // { name: 'John', data: [5, 7, 3] } // ]; // HTML.BOL_Client.BarChart("chartcontainer") // .Title("Fruits Chart") // .DataonXAxis(['Apples', 'Bananas', 'Oranges']) // .DataonYAxis('Fruit eaten') // .SeriesData(barseriesdata) // .ShowChart(); // var pieseriesdata = [{ name: 'Jane', data: [['Apple', 1], ['Bananas', 2], ['Oranges', 4]] // }]; // HTML.BOL_Client.PieChart("chartcontainer1") // .Title("Fruits Chart") // .Name("Fruits Eaten") // .SeriesData(pieseriesdata) // .ShowChart(); }); </script>

//testasdf

@ghost

This comment has been minimized.

Copy link

commented Sep 1, 2014

I can't reproduce it on Windows either, even tried IE8.

@ghost ghost added the Cant reproduce label Sep 1, 2014

@sebastianbochan

This comment has been minimized.

Copy link
Contributor

commented Nov 18, 2014

Another example, which seems to be related with this issue. http://jsfiddle.net/0z0fddrf/2/

@sebastianbochan

This comment has been minimized.

Copy link
Contributor

commented May 20, 2015

+1

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented May 21, 2015

@stephanevanraes Sebastian's example from November is reproduceable in Chrome.

@TorsteinHonsi TorsteinHonsi unassigned ghost Jun 3, 2015

KacperMadej added a commit that referenced this issue Sep 17, 2015
Fixed: #3323, 3d pie parts have better zIndexes, out part of slice cr…
…ossing sides created, normalization of alpha and beta to (-360, 360) range.
KacperMadej added a commit that referenced this issue Sep 18, 2015
Fixed: #3323, 3d pie parts have better zIndexes, out part of slice cr…
…ossing sides created, normalization of alpha and beta to (-360, 360) range.
@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Sep 18, 2015

Closed by 7a62327

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Sep 18, 2015

@KacperMadej Thanks for the fix! Note that the issue wastn't closed automatically because you put a semicolon between "Fixed" and the issue number.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.