Dari pada ribet, saya contohkan bagaimana membuat line chart dengan highchart-nya.
//CSS
<link href="jquery-ui.min.css" rel="stylesheet">
//VIEW
<div id="chart"></div>
//JQUERY & JAVASCRIPT
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="highcharts-3d.js"></script>
<script type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#chart').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
colors: ["#2b908f", "#90ee7e"],
chart: {
backgroundColor: {
linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},
stops: [
[0, '#395168']
]
},
plotBorderColor: '#606063'
},
title: {
text: 'Realisasi Fisik',
style: {
fontWeight: 'normal',
color: '#E0E0E3',
// textTransform: 'uppercase'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
text: 'Progres (%)',
style: {
color: '#A0A0A3'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
},
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
series: [{
name: 'Target (%)',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 100, 100]
}, {
name: 'Realisasi (%)',
data: [15, 15, 25, 50, 50, 55, 60, 70, 80, 100, 100, 100]
}]
});
});
</script>
Sumber: highcharts[dot]com
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon