KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Is annotatationText available in chartJs? #551

Open Alex Chartier opened this topic on on Dec 7, 2018 - 10 comments

Alex Chartier commented on Dec 7, 2018

Or is there something similar I can use to have a hidden field?

Sorry about the spelling mistake, the title should say annotationText

Andrew Borell commented on Dec 7, 2018

Annotations are not part of chartJs properties according to their own documentation https://www.chartjs.org/docs/latest/configuration/tooltip.html?q=annotation. Annotations require a separate plugin and I am not aware that plugin is rolled into the koolreport implementation of chartJs. https://github.com/chartjs/chartjs-plugin-annotation, but I did not see anything exposed in koolreport that could be used similar to an annotation. The question you asked is wildly nebulous, so it's hard to offer an alternative approach. Perhaps you can narrow the scope of your objective?

Alex Chartier commented on Dec 7, 2018

Sorry, I would like to have some hidden var that I can pass to a sub report in the drill down. There was a similar request I found and the suggestion was to use the annotationText.

Andrew Borell commented on Dec 7, 2018

You can hyperlink on the formatValue. I have tested with tables but not charts on this. Given the example on the site with the map I would think its possible.

Table::create(array(
    ...
    "columns"=>array(
        "item_column"=>array(
            "formatValue"=>"<a href='item.php?name=@value'>@value</a>"
        )
    ),
))

https://www.koolreport.com/forum/topics/62

If you wanted to load a tag in the page dynamically without a refresh or redirect you can add a class name or data tag perhaps

"formatValue"=>"<a href='#' class='some-class-name' data-trigger-name='@value'>@value</a>"
 

Then use a little javascript in a script you load into the page initially, near the end of the body.

$(document).ready(function() {
    $(document).on("click",".some-class-name",function(e){
      e.preventDefault();
      var triggerName = $(this).data('trigger-name');
	  
	  // do something with ajax here to load a secondary report using the 
          // data-trigger-name as a parameter maybe ???

	});
});

be careful of values that may have \ or ' though. I havent tested those scenarios.

Alex Chartier commented on Dec 7, 2018

Is this href value going to be returned on the form submission? I am not sure how to access it once I get into the next level of the drilldown. Do you think replacing the href with a hidden input might do the trick? If the input is within the form it should submit with the form. I can test this in the morning.

Thanks for your assistance.

Andrew Borell commented on Dec 8, 2018

The href='#' does not return anything. An alternative is to use href='javascript:void(0)'. If you want a Drilldown then its documented quite well how to use a drilldown in the documentation for koolreport. See: https://www.koolreport.com/docs/drilldown/drilldown/

Your initial question was about using annotationsText, which to my understanding is used to display extended information about the object in context on the hover event. That concept is available in koolreport if you use the googleChart objects instead of chartJs. See: https://www.koolreport.com/docs/google_charts/column_chart/

How did "forms" materialize in this discussion though? The methods described in using the anchor tag utilize the GET method, placing the parameters in the URL. I offered the suggestion for using ajax because I prefer to do everything using the POST method, but I do not think you will not find much support for that with this product.

If you only want to display a subreport of information pertaining to the object you clicked on ( the anchor tag in this case ) then you can use ajax as I described, and throw up a MODAL with the granular data for the object that you clicked, or write up some css to pop up your own label on the event you wish to trigger. If you want a drilldown, then use the drilldown as documented.

Alex Chartier commented on Dec 8, 2018

I think I a work-a-round. What I was trying to accomplish was to have a hidden field that I could pass to a subReport. The label for the column, which does get passed in the drilldown Next, in my case is a numeric Week of the Year number. I wanted to be able to get the associated year in the subReport so that I could display records for that week of a specific year. For now I am simply going to assume the Year is within a 6 month period either side of the Week Number.

I tried a bunch of things though and the formatValue showed some promise as I thought I might be able to use the full date/time element and then use the formatValue to trim just to just the Month & Day, however, it seems the formatValue is not processed against the label and that is where I needed it.

Thanks for your assistance though. I once again apologize for the very vague original question.

Andrew Borell commented on Dec 9, 2018

You are setting the label dynamically? Perhaps you set something like the datatype to datetime instead of string before parsing the formatValue to be displayed as week and thats why you dont see it that way?

This gives me a week number.

,"svc_dt"=>array(
	"label"=>"Service Date",
	"type"=>"string",
	"formatValue"=>function($value)
			{
				$dt = new DateTime($value);
				$w = $dt->format("W");
				return $w;
			}
	)

If you wanted to link a report then add the anchor tag and concatenate.

,"svc_dt"=>array(
	"label"=>"Service Date",
	"type"=>"string",
	"formatValue"=>function($value)
			{
				$dt = new DateTime($value);
				$w = $dt->format("W");
				return "<a href='someWeekReport.php?week=" . $w . "'>";
			}
	)

Then in someWeekReport.php check the $_GET['week'] variable for the week.

<?php 
	// do my includes here. 
	require_once('/includes/someWeekReport.php');

	if ($_SERVER['REQUEST_METHOD'] === 'GET') {
		if(isset($_GET['week'])){
			// run my report here
			$someWeekReport = new someWeekReport(array(
				"week"=>$_GET['week'];
				)); 
			$someWeekReport->run();
		}else { 
			echo "Invalid week number."
			die;
		}
	} else { 
		echo"Invalid request type"; 
		die;
	}
	

If you want to use the same report to pull multiple views then send that in the URL as a second parameter and use a switch in your PHP to call different views. If you want to display the actual date but query the week then that can happen too. I only showed you my POST example with ajax initially because of my own preferences, but a request is a request regardless of the method.

Alex Chartier commented on Dec 9, 2018

Thanks. I will keep this in reserve. For now I have it working with the assumption that if the selected month is numerically greater than the current month, or if the months are the same but the selected day of the month is greater than the current day of the month, then the date must be from the previous year. We have no need to go back beyond one year so this will work for us.

Again, thank you for your extensive examples. I imagine I will need them as time goes on.

Andrew Borell commented on Dec 9, 2018

No problem. I just started working with this framework so you may find more convenient methods than I have offered. Best of luck!

KoolReport commented on Dec 10, 2018

Thank you for your sharing! Please keep going, your sharing is very valuable.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
None yet

None