General developer forum

chart js moodle standard query

 
Picture of Mihir J
chart js moodle standard query
 

Hi All,

I am using Moodle3.3

And trying to create a plugin with report which renderes chart using moodle's chart lib.

I could make everything working fine. 

Question 1- 

However i would like to understand how we can pass the parameter 

For example in chart js they have given example like

ticks: {

          autoSkip: false,

          maxRotation: 0,

          minRotation: 0

        }


In moodle api - how can we pass this parameters.

Question 2 - 

The x-axis label is getting cut off,  I have seen in google that it was a bug in earlier version of chart js.

See the attachment

Is there anyway we can fix this.


Thank you for all support.

Mihir


 
Average of ratings: -
Picture of Mihir J
Re: chart js moodle standard query
 

Hi

Any help will be greatly appreciated


thanks!

 
Average of ratings: -
Picture of Marcus Green
Re: chart js moodle standard query
Core developersParticularly helpful MoodlersPlugin developersTesters
You are probably going to need to ask a question, and it will be helpful if you say what steps you have taken so far (e.g. web searches you have done and what they found)
 
Average of ratings: -
Gareth J Barnard
Re: chart js moodle standard query
 
Average of ratings: -
Picture of AL Rachels
Re: chart js moodle standard query
Core developersParticularly helpful MoodlersPlugin developersTesters

Without seeing the code you have used, I don't know what to try to help you with. Maybe you can find what you need on this page:

https://docs.moodle.org/dev/Charts_API

 
Average of ratings: -
Picture of Mihir J
Re: chart js moodle standard query
 

Thank you all.

Actually I have used the simple code given in the charts api link


$chart = new core\chart_bar(); 

$chart->add_series($sales); 

$chart->add_series($expenses); 

$chart->set_labels($labels); 

echo $OUTPUT->render($chart);


Only difference is my x axis name is not the year but the name of the course. I have actually tried all the moodle api options given in the charts api link and could not find how can I make  autoskip = false for ticks, so that even for smaller sizes it never misses the ticks and always show the course name in x  axis.

Right what it does is - for smaller sizes, it skips couple of course name and when i searched in the google, i found that 'autoskip' paratemeter need to be set false. I check the chats-lazy. js as well where autoskip parameter value is given as true


thanks!

 
Average of ratings: -
Picture of AL Rachels
Re: chart js moodle standard query
Core developersParticularly helpful MoodlersPlugin developersTesters

Did you try using the step setting?

$xaxis = new chart_axis();
$axis->set_stepsize(5); // Chart steps will be displayed as  5, 10, 15, 20...
If you change the 5 to 1, maybe it will give you the equivalent of autoskip = false.

$xaxis = new chart_axis();
$axis->set_stepsize(1); // Chart steps should be displayed as  1, 2, 3, 4...

 
Average of ratings: -