Chart Js clickable bar - javascript

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

DIV refresh with index

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"); ?>

Uncaught SyntaxError: Unexpected token < in CodeIgniter

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

Wordpress Instead of showing search result. show category entry right away (with acf map)

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 } ?>

Looping with php over a php-Statement wrapped in javascript

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.

jquery full calendar : Different color randomly for each event from MySQL

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 } ?>

Categories

Resources