[OJS 3.1] How to show a different color in article statistic's graph bars?

Software Support
1

I want to show a different color in the graph bars of statistics. How do I do that? I tried looking for the codes but could not find any codes in the inspect mode. i think it is hardcoded in java files of the plugin or .less files. Isnt it?

2

@NateWr Your Bootstrap 3 theme had light grey color bar. Can I change in the default manuscript theme?

3

Hi @varshilmehta

The bar color is calculated/defined here: pkp-lib/PKPUsageStatsPlugin.inc.php at ojs-3_1_0-0 · pkp/pkp-lib · GitHub

Best,
Bozana

1 Like
4

On the frontend, we actually modify the color of the bar/line charts in JavaScript. The chart options are defined in a JS object, and then passed with an event which allows third-party scripts to modify that object:

https://github.com/pkp/pkp-lib/blob/master/plugins/generic/usageStats/js/UsageStatsFrontendHandler.js#L39-L95

Here’s how the default theme hooks in to modify the color:

The Manuscript theme loads this same JS, which sets the color. If you’re using a custom child theme of Manuscript, you could accomplish this by adding the following script tag to your article_details.tpl template:

<script type="text/javascript">
	document.addEventListener('usageStatsChartOptions.pkp', function(e) {
		e.chartOptions.elements.line.backgroundColor = 'rgba(0, 122, 178, 0.6)';
		e.chartOptions.elements.rectangle.backgroundColor = 'rgba(0, 122, 178, 0.6)';
	});
</script>

(Obviously, you’d change the colors to whatever you’d like.)

You can read about all the configuration options in Chart.js if you want to do any further customization.

3 Likes
5

It worked like a charm

1 Like
6

Wow, cool… I didn’t know what one can all customize in the themes… From now on I will always assume that EVERYTHING can be done… :clap: :slight_smile:

7

I am thinking to create a donut style graph bar which will cool. It will really look cool.

8

Hi @varshilmehta,

I am using JatsManuscript theme by @Vitaliy.

I tried putting the script codes in the article_details.tpl but then I get a blank page.

Can you tell me where exactly I should put those codes? Or, any additional thing I need to do.

Regards,

9

I put little modifications in the theme developed by NateWr just to make jatsParser work.
If you get an error, it is better to look at php error logs and post them there.

1 Like
10

Hi @Vitaliy,
Here is the php error:

PHP Fatal error:  Smarty error: [in frontend/objects/article_details.tpl line 355]: syntax error: unrecognized tag: e.chartOptions.elements.line.backgroundColor = 'rgba(0, 122, 178, 0.6)';
		e.chartOptions.elements.rectangle.backgroundColor = 'rgba(0, 122, 178, 0.6)'; (Smarty_Compiler.class.php, line 446) in /home/jlmcedun/public_html/lib/pkp/lib/vendor/smarty/smarty/libs/Smarty.class.php on line 1094

Regards,

11

I did exactly the same as above, and it did worked for me. I am also using @Vitaliy modified theme with my modifications over it. But it should work.

12

Have you put js code inside {literal} tag?
https://www.smarty.net/docsv2/en/language.function.literal.tpl

1 Like
13

No.
Now I will try with {literal} tag.

Edit: With {literal} tag, now I do not get a blank page, but the color applied within the script is not applied. Don’t know, where I did wrong

Regards,

14

It is working. I saw maroon color in your site. Just clean the browsers cache.

15

@varshilmehta,

I changed the codes for colors in the default theme.

I am working to make the code work in the child theme in my localhost, but not lucky yet.

Confused.

Regards,