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="exporting.js"></script>
<script type="text/javascript">
//progres fisik dan keuangan theme
$(function () {
Highcharts.createElement('link', {
href: '//fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
colors: ["#2b908f", "#90ee7e"],
chart: {
type: 'areaspline',
backgroundColor: {
linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},
stops: [
[0, '#395168']
]
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
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: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
valueSuffix: ' %',
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'
},
areaspline: {
fillOpacity: 0.3
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
},
credits: {
enabled: false
},
title: {
text: '',
style: {
display: 'none'
}
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
Highcharts.setOptions(Highcharts.theme);
//progres fisik
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_progres_realisasi_fisik'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'Mei',
'Jun',
'Jul',
'Agt',
'Sep',
'Okt',
'Nov',
'Des'
]
},
yAxis: {
title: {
text: 'Progres (%)'
}
},
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