PDA

View Full Version : Scroll With Highcharts.js



round
05-22-2012, 06:49 AM
Hello I am using highcharts.js in my php application.
i am having problem in displaying horizontal scroll.
My js and my code is as below.
can anyone help me to solve?


<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: { renderTo: 'individual_leads', defaultSeriesType: 'column' },
title: { text: 'Total Leads' },
subtitle: { text: '' },

xAxis: { categories:['Initiated Contacts','Spoken','Email','Open','Close','test11','Business Name','New','aaa','abc','news','test22','test33','close','new11','OPEN','CLOSE','EMAIL','SPOKE','CLOSE'] },
//labels: {rotation: -45,align: 'right',style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}
//xAxis: { categories:['serviceskill','communication'] },
yAxis: { min: 0, title: { text: 'Number of Leads' } },
legend: { layout: 'vertical', backgroundColor: '#FFFFFF', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, shadow: true },

//legend: { verticalAlign: 'top', y: 100, align: 'right'},
scrollbar: { enabled: true},


tooltip: { formatter: function() { return ''+ this.x +': '+ this.y; } },
plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{
name: 'Total Leads', data: [8,51,40,39,4,2,0,5,0,0,0,0,0,0,0,0,0,0,0,0] }]
});
});
</script>
<style> .feedback_style{ font-weight:bold; margin-right:20px;}</style>
<div id="individual_leads" style="float:left; width:45%; height: 400px; margin: 15px auto 20px 20px" ></div>