I search many in site but i could not find the answer so i post my question. I think for my question has exist easy asnwer but It's first time i use javascript , jquery and ajax and i don't know what to do :(! I use Laravel 5 I have a blade php Page and in this file i have a while that create many < div >s like this chart.blade.php:
<?php $id=0; ?>
@foreach($results as $row)
...
<?php
$i++;
$allGrade = findData($row);
echo "<div id=\"container$id\" style=\"...\"></div>";
?>
...
@endforeach
this file create all of my divs with id container1, container2, container3, ... in some case create 100 divs , in some case 1200 divs and it's not constant!
in these divs i want to use a Bar charts , and i use http://highcharts.com/ . One of my question is what is the best way for doing this work? the top of this blade i use this java script function for highchart.js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ift.tt/Sw98cH"></script>
<style type="text/css">
$ {
demo.css
}
</style>
<script type="text/javascript">
$(function () {
for (var i = 0; i < 5000; i++) {
// Some Alert ****test here ****
//I put some alert work correctly
$('#container' + i).highcharts({
chart: {
type: 'bar'
}
, title: {
text: 'Historic World Population by Region'
}
, subtitle: {
text: 'Source: <a href="http://ift.tt/1hiu6or">Wikipedia.org</a>'
}
, xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
, title: {
text: null
}
}
, yAxis: {
min: 0
, title: {
text: 'Population (millions)'
, align: 'high'
}
, labels: {
overflow: 'justify'
}
}
, tooltip: {
valueSuffix: ' millions'
}
, plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
, legend: {
layout: 'vertical'
, align: 'right'
, verticalAlign: 'top'
, x: -40
, y: 80
, floating: true
, borderWidth: 1
, backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF')
, shadow: true
}
, credits: {
enabled: false
}
, series: [{
name: 'Year 1800'
, data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900'
, data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012'
, data: [JSON.parse('<?php echo json_encode($allGrades[1]); ?>')]
}]
});
}
});
</script>
</head>
<body>
<div id="container4" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container1"></div>
.
.
.
<script src="http://ift.tt/TQup4m"></script>
<script src="http://ift.tt/1rNirHL"></script>
</body>
</html>
The value of allGrade[1] is 20 , and when I use this alert test in Alert test section as below
var d = <?php echo json_encode($allGrades); ?>; //Don't forget the extra semicolon!
//alert(d[1]);
j++;
var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
var c1 = newJ[1];
var c2 =newJ[2];
alert(c1);
alert(JSON.parse('<?php echo json_encode($allGrades[1]); ?>'));
alerts work and shows data 20 in alert box!
I Expect for Data Year 2012 when i put c1 or put JSON.parse('') the chart data be 20 , But when i put these two items don't work!
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire