Line or Graph chart for data in multiple array.
As I have said that I have research for the line graph or chart by many ways. But the easiest and fast processing tutorial is highchart graph.
The other way of the multiple array, as I have got that many got problem in this section. I also got that may plugins and programming is slow processing. The best way is to use High chart plugins.
One of the example on the graph is as follow.
The other way of the multiple array, as I have got that many got problem in this section. I also got that may plugins and programming is slow processing. The best way is to use High chart plugins.
One of the example on the graph is as follow.
<script type="text/javascript">
$(document).ready(function() {
var options = {
colors: ['#058DC7', '#50B432', '#ED561B'],
chart: {
renderTo: 'diagram',
type: 'spline',
zoomType: 'x',
spacingRight: 20,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
plotShadow: true,
plotBorderWidth: 1,
width:700,
height:450
},
title: {
style: {
color: '#333',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
},
text: 'My Rank'
},
subtitle: {
style: {
color: '#BBBB23',
font: 'bold 10px "Trebuchet MS", Verdana, sans-serif'
},
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 7 * 24 * 3600000, // fourteen days
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
},
text: 'Date',
margin: 10
},
lineColor: '#333333',
plotLines: [{
color: '#808080'
}]
},
yAxis: {
allowDecimals: false,
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
},
text: 'Rank'
},
lineColor: '#333333',
plotLines: [{
color: '#808080'
}]
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
exporting:{
enabled: false
},
series: [{
name: 'Rank'
}]
}
traffic = []; try {
// Place the loop as you want over here, as many use looping for the data from database
traffic.push( [Date.UTC(1970, 9, 27), 0 ],
[Date.UTC(1970, 10, 10), 0.6 ],
[Date.UTC(1970, 10, 18), 0.7 ],
[Date.UTC(1970, 11, 2), 0.8 ],
[Date.UTC(1970, 11, 9), 0.6 ],
[Date.UTC(1970, 11, 16), 0.6 ],
[Date.UTC(1970, 11, 28), 0.67],
[Date.UTC(1971, 0, 1), 0.81],
[Date.UTC(1971, 0, 8), 0.78],
[Date.UTC(1971, 0, 12), 0.98],
[Date.UTC(1971, 0, 27), 1.84],
[Date.UTC(1971, 1, 10), 1.80],
[Date.UTC(1971, 1, 18), 1.80],
[Date.UTC(1971, 1, 24), 1.92],
[Date.UTC(1971, 2, 4), 2.49],
[Date.UTC(1971, 2, 11), 2.79],
[Date.UTC(1971, 2, 15), 2.73],
[Date.UTC(1971, 2, 25), 2.61],
[Date.UTC(1971, 3, 2), 2.76],
[Date.UTC(1971, 3, 6), 2.82],
[Date.UTC(1971, 3, 13), 2.8 ],
[Date.UTC(1971, 4, 3), 2.1 ],
[Date.UTC(1971, 4, 26), 1.1 ],
[Date.UTC(1971, 5, 9), 0.25],
[Date.UTC(1971, 5, 12), 0 ]);
} catch (e) { }
options.series[0].data = traffic; chart = new Highcharts.Chart(options);
});
</script>
And in side body
<script src="js/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Download highchart.js from highchart site Thank you. comments as there is any problem about this. I can help you.
Comments
Post a Comment