I want to make my chart js bar clickable. I want to add click features such as links. No idea how to proceed. Have read documentation times 10...
<script> var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Now', '-1h', '-2h', '-3h', '-4h', '-5h', '-6h', '-7h', '-8h', '-9h', '-10h', '-11h', '-12h', '-13h', '-14h', '-15h', '-16h', '-17h', '-18h', '-19h', '-20h', '-21h', '-22h', '-23h'],
datasets: [{
label: 'Litraa',
data: [<?php echo "$chart_readings[0]";?>, <?php echo "$chart_readings[1]";?>, <?php echo "$chart_readings[2]";?>, <?php echo "$chart_readings[3]";?>, <?php echo "$chart_readings[4]";?>, <?php echo "$chart_readings3[5]";?>, <?php echo "$chart_readings3[6]";?>, <?php echo "$chart_readings[7]";?>, <?php echo "$chart_readings[8]";?>, <?php echo "$chart_readings[9]";?>, <?php echo "$chart_readings[10]";?>, <?php echo "$chart_readings[11]";?>, <?php echo "$chart_readings[12]";?>, <?php echo "$chart_readings[13]";?>, <?php echo "$chart_readings[14]";?>, <?php echo "$chart_readings[15]";?>, <?php echo "$chart_readings[16]";?>, <?php echo "$chart_readings[17]";?>, <?php echo "$chart_readings[18]";?>, <?php echo "$chart_readings[19]";?>, <?php echo "$chart_readings[20]";?>, <?php echo "$chart_readings[21]";?>, <?php echo "$chart_readings[22]";?>, <?php echo "$chart_readings[23]";?>],
backgroundColor: "rgb(255, 255, 255)"
}]
},
options: {
tooltips: {
mode: 'label'
}
}
});
/*Global settings*/
Chart.defaults.global.defaultFontColor = '#fff';
</script>
If you are using chart.js version 2.4+ (maybe earlier), there is a onclick event that is very useful. I'm using it on a stacked bar chart, so it should work for you too. You can find it under common chart configuration in the documentation. (See: https://www.chartjs.org/docs/latest/charts/bar.html#stacked-bar-chart)
options:{
onClick: graphClickEvent
}
function graphClickEvent(event, array){
if(array[0]){
foo.bar;
}
}
Hope this helps.
Related
I ask for your help regarding the refreshment of my DIV.
When loading my page, _promo.php is called but does not update the data of this page.
Can you help me please ?
I don't know much about javascript
<?php include($_SERVER["DOCUMENT_ROOT"]."/includes/header.php"); ?>
<?php
try {
$stat = $pdo->query( "SELECT * FROM tab_shop_produits");
$i = 0;
while ($data = $stat->fetch( PDO::FETCH_ASSOC)) {
$reference = $data["reference"];
?>
<div id="promo_<?php echo $i; ?>" class="mb-2 text-end small text-success blink_"></div>
<input type="hidden" id="txt_reference_<?php echo $i; ?>" value="<?php echo $reference; ?>">
<?php
$i++;
}
} catch(PDOException $e){
echo "<div class='alert alert-danger'>".$e->getMessage()."</div>";
}
?>
<script>
$(document).ready(function(){
function loadLog(i) {
var reference = document.getElementById("txt_reference_" + i).value;
var intTotal = parseInt('<?php echo $i; ?>');
$.ajax({
type: "POST",
url: "_promo.php",
cache: true,
data: {reference: reference},
error: function (e) {console.log('Ajax Error', e);alert('Erreur Ajax');},
success: function(html){
document.getElementById("promo_"+i).innerHTML = html;
console.log(html);
i=parseInt(i)+1;
if(i<intTotal){setTimeout(loadLog(i), 1000);}
}
});
}
setTimeout(loadLog('<?php echo $i; ?>'), 1000);
});
</script>
<?php include($_SERVER["DOCUMENT_ROOT"]."/includes/footer.php"); ?>
I am currently working on CodeIgniter charts, but am getting an error like:
Uncaught SyntaxError: Unexpected token <
And charts are not loading showing blank.
var data_course_stats = google.visualization.arrayToDataTable([
['Course', 'Time spent',{ role: 'style' }],
<?php
$i=0;
foreach ($timespent_stats as $course) { $course = (object)$course;
$color_val = 'green';
if(count($i<count($timespent_stats)))
$color_val = $colors[$i++];
?>
['<?php echo $course->title;?>', <?php echo $course->spent_seconds/60;?>,'<?php echo $color_val; ?>'],
<?php } ?>
]);
var options_course_stats = {
title: 'Course Wise Spent Time in Minutes',
curveType: 'function',
height: 400,
bar: {groupWidth: "50%"},
legend: { position: "none" },
};
For longer blocks, to keep PHP open - you're getting in trouble because you're mixing and matching open and closed. Change this:
<?php
$i=0;
foreach ($timespent_stats as $course) { $course = (object)$course;
$color_val = 'green';
if(count($i<count($timespent_stats)))
$color_val = $colors[$i++];
?>
['<?php echo $course->title;?>', <?php echo $course->spent_seconds/60;?>,'<?php echo $color_val; ?>'],
<?php } ?>
to this:
<?php
$i=0;
foreach ($timespent_stats as $course) {
$course = (object)$course;
$color_val = 'green';
if(count($i<count($timespent_stats))) {
$color_val = $colors[$i++];
echo "['" . $course->title . "','" .
$course->spent_seconds/60 . "','" .
$color_val . "']";
}
}
?>
although you have accepted the answer, i want to add the another technique which is little simpler than the previous one. You can perform echo with <?= like <?php echo something; ?> so you can simply do this <?= something ?>
<?php
$i=0;
foreach ($timespent_stats as $course) {
$course = (object)$course;
$color_val = 'green';
if(count($i<count($timespent_stats)))
{
$color_val = $colors[$i++];
?>
[<?= $course->title ?>, <?= $course->spent_seconds/60 ?>, <?= $color_val ?>]
<?php
}
}
?>
If anyone get this problem again, check if your base_url is correct in config/config.php
Hi the code below is for my search page and its working properly and it will show the search item along with the map marker what im trying to do now is show all post from the category example "category1", "category2" how can i do that? thank you so much
<div id="posts_cont">
<?php
while ($search_query->have_posts()) : $search_query->the_post();
$post_id = get_the_ID ();
$location = get_field_object('gmap', $post_id)['value'];
$title = get_the_title($post_id);
$url = get_permalink($post_id);
$comments = get_comments(array('post_id' => $post_id));
//$ratings = rating_form();
$thumb_id = get_post_thumbnail_id($post_id);
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$thumb_url = $thumb_url_array[0];
if( !empty($location) ):
?>
<script type="text/javascript">
$(".acf-map").append("<div class='marker' data-lat='<?php echo $location['lat']; ?>' data-lng='<?php echo $location['lng']; ?>' title='<?php echo the_title_attribute(); ?>' ></div>");
</script>
<?php endif; ?>
<?php endwhile; ?>
<?php if (!have_posts() || $search_query->post_count == 0) { ?>
<script type="text/javascript">
$("#search-title").hide();
$(".acf-map").hide();
$(".search-text").hide();
$(".container").append("<h6 class='title'>Oops! No results were found.</h6>");
</script>
<?php } ?>
I am using dygraphs to plot a graph. I am using a database to store all the values i need. to use dygraphs i have to use javascript. but the data im getting from the database needs to fill the dygraphs constructor dynamically. i could do it like this, but that isnt dynamic and not what i need.
<script type="text/javascript">
g = new Dygraph(
document.getElementById('graphdiv'),
"Travel(mm),Force(N)\n"+
"0,0\n"+
"<?php $sql = "SELECT daten FROM azubi3 where pau_table_id=2";
$result = pg_query($sql);
$row = pg_fetch_row($result);
$toEcho = str_replace("{","[",$row[0]);
$toEcho = str_replace("}","]",$toEcho);
$toEcho = json_decode($toEcho);
echo $toEcho[0][0].','.$toEcho[0][1].'\n';
?>"+
"<?php echo $toEcho[1][0].','.$toEcho[1][1].'\n';?>"+
"<?php echo $toEcho[2][0].','.$toEcho[2][1].'\n';?>"+
"<?php echo $toEcho[3][0].','.$toEcho[3][1].'\n';?>"+
"<?php echo $toEcho[4][0].','.$toEcho[4][1].'\n';?>"+
"<?php echo $toEcho[5][0].','.$toEcho[5][1].'\n';?>"+
"<?php echo $toEcho[6][0].','.$toEcho[6][1].'\n';?>"+
"<?php echo $toEcho[7][0].','.$toEcho[7][1].'\n';?>"+
"<?php echo $toEcho[8][0].','.$toEcho[8][1].'\n';?>"+
"<?php echo $toEcho[9][0].','.$toEcho[9][1].'\n';?>"+
"<?php echo $toEcho[10][0].','.$toEcho[10][1].'\n';?>"+
"<?php echo $toEcho[11][0].','.$toEcho[11][1].'\n';?>"+
"<?php echo $toEcho[12][0].','.$toEcho[12][1].'\n';?>"+
"<?php echo $toEcho[13][0].','.$toEcho[13][1].'\n';?>"+
"<?php echo $toEcho[14][0].','.$toEcho[14][1].'\n';?>"+
"<?php echo $toEcho[15][0].','.$toEcho[15][1].'\n';?>"+
"<?php echo $toEcho[16][0].','.$toEcho[16][1].'\n';?>"+
"<?php echo $toEcho[17][0].','.$toEcho[17][1].'\n';?>"+
"<?php echo $toEcho[18][0].','.$toEcho[18][1].'\n';?>"+
"<?php echo $toEcho[19][0].','.$toEcho[19][1].'\n';?>"+
"<?php echo $toEcho[20][0].','.$toEcho[20][1].'\n';?>"+
"<?php echo $toEcho[21][0].','.$toEcho[21][1].'\n';?>"+
"<?php echo $toEcho[22][0].','.$toEcho[22][1].'\n';?>"+
"<?php echo $toEcho[23][0].','.$toEcho[23][1].'\n';?>"+
"<?php echo $toEcho[24][0].','.$toEcho[24][1].'\n';?>"+
"<?php echo $toEcho[25][0].','.$toEcho[25][1].'\n';?>"
);
</script>
because i have to seperate the data with "...."+ i dont know how to control that i echo as much as my array is long. i thought of a loop over the javascript code which itself contained php. it didnt work. some ideas? or questions, i dont know if anyone will understand me...
This looks to me like a perfect case for using foreach
Output will look like
"123,123\n;"+
.....
"126,143\n;"
Code:
$setCount = 0; // keeps track of sets so i dont put a linebreak before the first one
$toEcho = json_decode($toEcho);
foreach ($toEcho as $set){
if($setCount>0) echo "+"; // every set is seperated with a plus
echo "\""; // put double quote down
$valueCount = 0;
foreach($set as $value){
if($valueCount>0) echo ',';
echo $value;
$valueCount++;
}
echo "\\n;\""; // puts the weird \n into the string and final quote
$setCount++;
}
Let me know if something is unclear.
I am starting to use jQuery full calendar and creating the event in MySQL database. I would like the calendar events to have different colour randomly. How can I do this?
Here is my code:
<?php if ($event[$j]['allday'] == 0){?>
{ title: '[<?php echo $event[$j]['courseid'];?> by <?php echo $event[$j]['tutorid'];?>]',
start: new Date(start_year[<?php echo $j?>],
start_month[<?php echo $j?>]-1,
start_day[<?php echo $j?>],
start_hour[<?php echo $j?>],
start_mins[<?php echo $j?>]),
end: new Date(end_year[<?php echo $j?>],
end_month[<?php echo $j?>]-1,
end_day[<?php echo $j?>],
end_hour[<?php echo $j?>],
end_mins[<?php echo $j?>]),
url: 'mg_course.php?courseid=<?php echo $event[$j]['courseid']; ?>'
},
<?php };
if ($event[$j]['allday'] == 1) {?>
{ title: '[<?php echo $event[$j]['courseid'];?> by <?php echo $event[$j]['tutorid'];?>]',
start: new Date(start_year[<?php echo $j?>],
start_month[<?php echo $j?>]-1,
start_day[<?php echo $j?>],
start_hour[<?php echo $j?>],
start_mins[<?php echo $j?>]),
end: new Date(end_year[<?php echo $j?>],
end_month[<?php echo $j?>]-1,
end_day[<?php echo $j?>],
end_hour[<?php echo $j?>],
end_mins[<?php echo $j?>]),
url: 'mg_course.php?courseid=<?php echo $event[$j]['courseid']; ?>',
allDay: 'false'
},
<?php } ?>