Advanced Charts

Cloud Media
Cloud Media
@cloud-media
8 years ago
53 posts
Using the Lucid skin I was able to get the audio charts to work. Can someone tell me how to get the number count and direction arrows?
updated by @cloud-media: 09/09/16 12:50:15AM
michael
@michael
8 years ago
7,692 posts
Did you see the docs for them here?

Docs: "Advanced Charts"
https://www.jamroom.net/the-jamroom-network/documentation/modules/274/advanced-charts
Cloud Media
Cloud Media
@cloud-media
8 years ago
53 posts
Thanks Michael,

I tried the different variations from the above link. I'm missing something here.

Help me out with wording this for the Lucid skin.

{$item.chart_direction}
{$item.chart_change}
{$item.chart_new_entry}
{$item.chart_position}
{$item.chart_count}
brian
@brian
8 years ago
10,136 posts
Audio charts are pretty much "automatic" - you should not need to do anything. How long have you had the audio module installed with audio files uploaded and plays being counted? Each night the system stores the play counts for the items, and the chart_days variable determines how far back in the history it looks. If you set chart_days to "30" but only have 5 day of history, then every audio entry will appear as "new". So you need to have MORE history than the chart_days.

Let me know if that helps.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Cloud Media
Cloud Media
@cloud-media
8 years ago
53 posts
Thanks Brian,

It's been more than 60 days we just got charts maybe 2 weeks ago.

We have chart movement I would like to know how to add the number count and the hot and cold arrows?
michael
@michael
8 years ago
7,692 posts
If you have any of these skins:
* flashback
* mediapro
* nova
* projam
* sage
you can copy the code from the music_chart_row.tpl file. Think thats what your talking about?

They uses the Advanced Charts module and do a bit of checking to see which image to display.

        {if $item.chart_direction == 'up'}
            {if $item.chart_change > 10}
                {assign var="chart_image" value="hot_up"}
            {else}
                {assign var="chart_image" value="up"}
            {/if}
        {elseif $item.chart_direction == 'down'}
            {if $item.chart_change > 10}
                {assign var="chart_image" value="cool_down"}
            {else}
                {assign var="chart_image" value="down"}
            {/if}
        {elseif $item.chart_direction == 'same'}
            {assign var="chart_image" value="same"}
        {elseif $item.chart_direction == 'new'}
            {assign var="chart_image" value="new"}
        {/if}

then display that image:
{jrCore_image image="chart_`$chart_image`.png" alt="`$item.chart_direction`"}

Thats not part of the charts module though, its just skin design.
Cloud Media
Cloud Media
@cloud-media
8 years ago
53 posts
Thanks Michael,

I did try the above code it's what's saved now.

So it's the skin.

Is there a work around to get the above code to work in Lucid?
douglas
@douglas
8 years ago
2,767 posts
Can you show us the code that your using for your chart template?


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Cloud Media
Cloud Media
@cloud-media
8 years ago
53 posts
Here you go.

{jrCore_list module="jrAudio" chart_field="audio_file_stream_count"
chart_days="0" pagebreak="50" page=$_post.p}

{if $item.chart_direction == 'up'}
{if $item.chart_change > 10}
{assign var="chart_image" value="hot_up"}
{else}
{assign var="chart_image" value="up"}
{/if}
{elseif $item.chart_direction == 'down'}
{if $item.chart_change > 10}
{assign var="chart_image" value="cool_down"}
{else}
{assign var="chart_image" value="down"}
{/if}
{elseif $item.chart_direction == 'same'}
{assign var="chart_image" value="same"}
{elseif $item.chart_direction == 'new'}
{assign var="chart_image" value="new"}
{/if}
douglas
@douglas
8 years ago
2,767 posts
The problem here is that your not using a custom template to show your charts but instead are relying on the jrAudio default templates, which are not setup to show chart movement.

You'll want to create a template to use with your jrCore_list function ie.

{jrCore_list module="jrAudio" chart_field="audio_file_stream_count"
chart_days="30" template="chart_row.tpl pagebreak="50" page=$_post.p}

Then in your chart_row.tpl is where you would add the code you have above as well as the rest of the code for the chart... something like this:

{jrCore_module_url module="jrAudio" assign="murl"}
{if isset($_items)}
    <div class="mb8">
        <div class="container">
            {foreach from=$_items item="item"}

                <div class="row">
                    <div class="col1">
                        <div class="p20" style="padding-top:0;">
                            <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">{jrCore_module_function function="jrImage_display" module="jrAudio" type="audio_image" item_id=$item._item_id size="xlarge" crop="auto" class="iloutline img_scale" alt=$item.audio_title}</a>
                        </div>
                    </div>
                    <div class="col1">
                        <div class="p10">
                            {if $item.audio_file_extension == 'mp3'}
                                {jrCore_media_player type="jrAudio_button" module="jrAudio" field="audio_file" item=$item}
                            {else}
                                <a href="{$jamroom_url}/{$murl}/download/audio_file/{$item._item_id}">{jrCore_image image="download.png" alt="Download" title="Download"}</a>
                            {/if}
                        </div>
                    </div>
                    <div class="col6">
                        <div class="p5">
                            {if $item.chart_direction == 'up'}
                                {if $item.chart_change > 10}
                                    {assign var="chart_image" value="hot"}
                                {else}
                                    {assign var="chart_image" value="up"}
                                {/if}
                            {elseif $item.chart_direction == 'down'}
                                {if $item.chart_change > 10}
                                    {assign var="chart_image" value="cold"}
                                {else}
                                    {assign var="chart_image" value="down"}
                                {/if}
                            {elseif $item.chart_direction == 'same'}
                                {assign var="chart_image" value="same"}
                            {/if}
                            <div style="display:table;">
                                <div class="rank" style="display:table-cell;text-align:center;vertical-align:top;">
                                    {$item.list_rank}
                                </div>
                                <div style="display:table-cell;text-align:center;vertical-align:top;">
                                    {if $item.chart_direction != 'same'}
                                        {jrCore_lang  skin=$_conf.jrCore_active_skin id="46" default="moved" assign="chart_postition_title1"}
                                        {assign var="cp_title" value="`$chart_postition_title1` `$item.chart_direction`"}
                                    {else}
                                        {jrCore_lang  skin=$_conf.jrCore_active_skin id="47" default="position" assign="chart_postition_title1"}
                                        {assign var="cp_title" value="`$item.chart_direction` `$chart_postition_title1`"}
                                    {/if}
                                    {jrCore_image image="`$chart_image`.png" width="16" height="16" alt=$item.chart_direction title=$cp_title}<br>
                                    {if $item.chart_change > 0}
                                        {$item.chart_change}
                                    {else}
                                        -
                                    {/if}
                                </div>
                                <div style="display:table-cell;text-align:left;vertical-align:middle;padding-left:10px;">
                                    <h3><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}"><span class="capital">{$item.audio_title}</span></a></h3><br>
                                    <span class="capital">{jrCore_lang module="jrAudio" id="12" default="genre"}:</span> <span class="media_title">{$item.audio_genre}</span>&nbsp;
                                    {if isset($item.audio_album) && strlen($item.audio_album) >0}<span class="capital">album:</span> <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/albums/{$item.audio_album_url}">{$item.audio_album}</a><br>{else}<br>{/if}
                                    <span class="capital">{jrCore_lang skin=$_conf.jrCore_active_skin id="49" default="plays"}:</span> <span class="media_title">{$item.chart_count}</span><br>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col2">
                        <div class="p5">
                            {jrCore_module_function function="jrRating_form" type="star" module="jrAudio" index="1" item_id=$item._item_id current=$item.audio_rating_1_average_count|default:0 votes=$item.audio_rating_1_count|default:0 }
                        </div>
                    </div>
                    <div class="col2 last">
                        <div class="nowrap float-right" style="padding-right: 10px;">
                            {if isset($item.audio_file_item_price) && $item.audio_file_item_price > 0}
                                {if jrCore_module_is_active('jrFoxyCart')}
                                    {jrCore_module_function function="jrFoxyCart_add_to_cart" module="jrAudio" field="audio_file" item=$item}
                                {elseif jrCore_module_is_active('jrPayPal')}
                                    {jrPayPal_buy_now_button module="jrAudio" item=$item}
                                {/if}
                            {elseif $_conf.jrAudio_block_download != 'on'}
                                <div class="add_to_cart_section" title="Free Download"><span class="add_to_cart_price">Free</span><a href="{$jamroom_url}/{$murl}/download/audio_file/{$item._item_id}" title="download">{jrCore_icon icon="download" size="24"}</a></div>
                            {else}
                                <div class="add_to_cart_section" title="Download Not Available"><span class="add_to_cart_price">N/A</span>{jrCore_icon icon="lock" size="24"}</div>
                            {/if}
                            {jrCore_module_function function="jrPlaylist_button" playlist_for="jrAudio" item_id=$item._item_id}
                        </div>
                    </div>
                    <br><br>
                </div>

            {/foreach}
        </div>
    </div>
    {if $info.total_pages > 1}
        {if isset($_post.module_url) && $_post.module_url == 'song_chart'}
            {assign var="pb_url" value="song_chart_weekly"}
        {else}
            {assign var="pb_url" value=$_post.module_url}
        {/if}
        <div class="block">
            <table style="width:100%;">
                <tr>

                    <td style="width:25%;">
                        {if isset($info.prev_page) && $info.prev_page > 0}
                            <input type="button" value="{jrCore_lang module="jrCore" id=26 default="&lt;"}" class="form_button" onclick="jrCore_window_location('{$jamroom_url}/{$pb_url}/p={$info.prev_page}');">
                        {/if}
                    </td>

                    <td style="width:50%;text-align:center;">
                        {if $info.total_pages <= 4}
                            {$info.page} &nbsp;/ {$info.total_pages}
                        {else}
                            <form name="form" method="post" action="_self">
                                <select name="pagenum" class="form_select" style="width:60px;" onchange="var sel=this.form.pagenum.options[this.form.pagenum.selectedIndex].value;jrCore_window_location('{$jamroom_url}/{$pb_url}/p=' +sel);">
                                    {for $pages=1 to $info.total_pages}
                                        {if $info.page == $pages}
                                            <option value="{$info.this_page}" selected="selected"> {$info.this_page}</option>
                                        {else}
                                            <option value="{$pages}"> {$pages}</option>
                                        {/if}
                                    {/for}
                                </select>&nbsp;/&nbsp;{$info.total_pages}
                            </form>
                        {/if}
                    </td>

                    <td style="width:25%;text-align:right;">
                        {if isset($info.next_page) && $info.next_page > 1}
                            <input type="button" value="{jrCore_lang module="jrCore" id=27 default="&gt;"}" class="form_button" onclick="jrCore_window_location('{$jamroom_url}/{$pb_url}/p={$info.next_page}');">
                        {/if}
                    </td>

                </tr>
            </table>
        </div>
    {/if}
{/if}

which comes from the skins/jrNova/song_chart_row.tpl

You may need to modify the style to fit the design of your site, but it should work with the jrLucid skin.

Hope this helps!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

updated by @douglas: 06/09/16 11:39:37AM
Cloud Media
Cloud Media
@cloud-media
8 years ago
53 posts
Thanks Douglas,

We actually had it working with this. All we had to do was call the arrow images.

{jrCore_module_url module="jrAudio" assign="murl"}
{if isset($_items)}
    
        
            {foreach from=$_items item="item"}

                
                    
                        
                            
                    

                    
                        
                            {if $item.audio_file_extension == 'mp3'}
                                {jrCore_media_player type="jrAudio_button" module="jrAudio" field="audio_file" item=$item}
                            {else}
                                {jrCore_image image="download.png" alt="Download" title="Download"}
                            {/if}
                        
                    
                    
                        
                            {if $item.chart_direction == 'up'}
                                {if $item.chart_change > 10}
                                    {assign var="chart_image" value="hot"}
                                {else}
                                    {assign var="chart_image" value="up"}
                                {/if}
                            {elseif $item.chart_direction == 'down'}
                                {if $item.chart_change > 10}
                                    {assign var="chart_image" value="cold"}
                                {else}
                                    {assign var="chart_image" value="down"}
                                {/if}
                            {elseif $item.chart_direction == 'same'}
                                {assign var="chart_image" value="same"}
                            {/if}
                            
                                
                                    {$item.list_rank}
                                
                                
                                    {if $item.chart_direction != 'same'}
                                        {jrCore_lang  skin=$_conf.jrCore_active_skin id="46" default="moved" assign="chart_postition_title1"}
                                        {assign var="cp_title" value="`$chart_postition_title1` `$item.chart_direction`"}
                                    {else}
                                        {jrCore_lang  skin=$_conf.jrCore_active_skin id="47" default="position" assign="chart_postition_title1"}
                                        {assign var="cp_title" value="`$item.chart_direction` `$chart_postition_title1`"}
                                    {/if}
                                    {jrCore_image image="`$chart_image`.png" width="16" height="16" alt=$item.chart_direction title=$cp_title}
                                    {if $item.chart_change > 0}
                                        {$item.chart_change}
                                    {else}
                                        -
                                    {/if}
                                
                                
                                    {$item.audio_title}
{jrCore_lang module="jrAudio" id="12" default="genre"}: {$item.audio_genre} 
                                    {if isset($item.audio_album) && strlen($item.audio_album) >0}album: {$item.audio_album}{else}{/if}
                                    {jrCore_lang skin=$_conf.jrCore_active_skin id="49" default="plays"}: {$item.chart_count}
                            
                        
                    
                    
                        
                            {jrCore_module_function function="jrRating_form" type="star" module="jrAudio" index="1" item_id=$item._item_id current=$item.audio_rating_1_average_count|default:0 votes=$item.audio_rating_1_count|default:0 }
                        
                    
                    
                        
                            {if isset($item.audio_file_item_price) && $item.audio_file_item_price > 0}
                                {if jrCore_module_is_active('jrFoxyCart')}
                                    {jrCore_module_function function="jrFoxyCart_add_to_cart" module="jrAudio" field="audio_file" item=$item}
                                {elseif jrCore_module_is_active('jrPayPal')}
                                    {jrPayPal_buy_now_button module="jrAudio" item=$item}
                                {/if}
                            {elseif $_conf.jrAudio_block_download != 'on'}
                                
Free{jrCore_icon icon="download" size="24"}

                            {else}
                                
N/A{jrCore_icon icon="lock" size="24"}
                            {/if}
                            {jrCore_module_function function="jrPlaylist_button" playlist_for="jrAudio" item_id=$item._item_id}
                        
                    
                    

            {/foreach}
        
    
    {if $info.total_pages > 1}
        {if isset($_post.module_url) && $_post.module_url == 'song_chart'}
            {assign var="pb_url" value="song_chart_weekly"}
        {else}
            {assign var="pb_url" value=$_post.module_url}
        {/if}
        
            
                        {if isset($info.prev_page) && $info.prev_page > 0}
                            
                        {/if}
                    

                    
                        {if $info.total_pages 
                                
                                    {for $pages=1 to $info.total_pages}
                                        {if $info.page == $pages}
                                             {$info.this_page}
                                        {else}
                                             {$pages}
                                        {/if}
                                    {/for}
                                 / {$info.total_pages}
                            
                        {/if}
                    

                    
                        {if isset($info.next_page) && $info.next_page > 1}
                            
                        {/if}
                    

                
    {/if}
{/if}

But then it caused this error.

CRI: Query Error: MySQL server has gone awayCRI: Query Error: MySQL server has gone away

Then I dropped the file count from 50 to 10 and please see the attachment.

Where am I going wrong we actually had it working with the 50 count.
Attachments:
pdf
Doc1.pdf  •  97KB

pdf
Doc1.pdf  •  97KB

Cloud Media
Cloud Media
@cloud-media
8 years ago
53 posts
How do I actually create the chart_row.tpl in Lucid? I used a list custom at first.
michael
@michael
8 years ago
7,692 posts
"MySQL server has gone away" is a server problem, that should not happen. Need to ask your server company about that one, may have hit some sort of limit.
douglas
@douglas
8 years ago
2,767 posts
Cloud Media:
How do I actually create the chart_row.tpl in Lucid? I used a list custom at first.

In your text editor, or whatever you use to edit html type files, create a file named chart_row.tpl, add your code and then upload it to your active skin directory using a FTP client.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Tags