javascript - Rotating the highchart -


im having following code

<!doctype html> <head>   <title>shipment tracker</title>   <script type="text/javascript" src="file:///android_asset/jquery.min.js"></script>   <script type="text/javascript" src="file:///android_asset/highcharts.js"></script>   <script type="text/javascript" src="file:///android_asset/highcharts-3d.js"></script>    <script>      function loadshipment(){          $(function () {               $('#container').highcharts({                   colors:['#f58835','#f32d2b',],                     chart: {                         type: 'column'                     },options3d: {                     enabled: true,                     alpha: 15,                     beta: 15,                     depth: 50,                     viewdistance: 25                 },title: {                         text: 'shipment '                     },                     subtitle: {                         text: ''                     },                     xaxis: {                         categories: [                             '2000',                             '2001',                             '2002',                             '2003',                             '2004',                         ],                         crosshair: true,                         labels: {                               usehtml: true,                           },                      },                     yaxis: {                         min: 0,                         title: {                             text: 'shipment data'                         },                         allowdecimals: false                     },                     tooltip: {                         headerformat: '<span style="font-size:10px">{point.key}</span><table>',                         pointformat: '<tr><td style="padding:0">{series.name}: </td>' +                             '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',                         footerformat: '</table>',                         shared: true,                         usehtml: true                     },                     plotoptions: {                         column: {                             pointpadding: 0,                             grouppadding: 0.3,                             borderwidth: 0,                             datalabels: {                             enabled: true,                             textshadow:null,                             // format:'{point.percentage:.0f}%'                             format:'{point.y}'                             },animation: {                     duration: 15000                 }, column: {          depth: 25       },                           point: {                             events: {                                 click: function() {                                     var drilldown = this.drilldown;                                     if (drilldown) {                                              loaddrilldowndata(drilldown);                                     }                                 }                               }                             }                         }                     },                     series: [{                         name: 'delayed shipment',                         data: [9, 5, 9, 8, 4,],                     }, {                         name: 'shipped',                         data: [0, 1, 2, 3, 1, ],                     }]                 });            });       }   </script> </head> <body>     <div id="container" ></div>     <div id="sliders">         <table>             <tr><td>alpha angle</td><td><input id="r0" type="range" min="0" max="45" value="15"/> <span id="r0-value" class="value"></span></td></tr>             <tr><td>beta angle</td><td><input id="r1" type="range" min="0" max="45" value="15"/> <span id="r1-value" class="value"></span></td></tr>         </table>     </div> </body> </html> 

i want chart rotated when user slides sider.how can able so? feasible? tried adding code in follows

 $('#r0').on('change', function () {       highchart.options.chart.options3d.alpha = this.value;       highchart.redraw(false);    });    $('#r1').on('change', function () {       highchart.options.chart.options3d.beta = this.value;       highchart.redraw(false);    }); 

but not working

as changing settings of chart need use update method instead of using redraw method. http://api.highcharts.com/highstock/chart.update

so becomes:

$('#r0').on('change', function () {   highchart.update({chart: {options3d: {alpha: this.value}}}); }); $('#r1').on('change', function () {   highchart.update({chart: {options3d: {beta: this.value}}}); }); 

Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -