With some coding and getting the ratyrate to work into chartkick.js - there are very minimal tutorials regarding styling changes.
The data is working into the bar graph as shown below;
HTML Setup for display:
<div class="col-md-4">
<%= bar_chart Review.group(:rating).count(:rating), colors: ["blue"], discrete: true %>
<p>Sum of each Review</p>
<%=#review_total_each%>
<p><%=#review_count%> Total Review count</p>
</div>
Main objective is to get it to look like this;
have different colours per each rating number
reverse order with 5 being at the top
remove the bottom legend (only keep the left)
remove the lines between the bars
done need to worry about the average etc, only focussing on the colour changes to the bars
I have read some tutorials although each review needs to become a unique data set and then you can complete colours.
(Chartkick column charts multiple colors)
But still having no success.
Any help or guidance will be appreciated.
(I can always update the question with requests)
Related
I want to add a line chart as a control chart in one of the widget pages in October CMS. CMS has pre-built classes for bar chart and pie chart. I was wondering if they have similar classes for other kind of analytics data.
I want to add the line chart prebuilt class to an html partials page, that can be used as a widget in october cms.
It seems that you are talking about things like this: https://octobercms.com/docs/ui/chart and you are looking for another type of chart besides those mentioned there.
I wanted to say if such a thing is not listed there then probably it does not exist. But... hey... I just went looking into the backend UI JS code.
Look at this file in your October app root: {% app root %}/modules/system/assets/ui/js/chart.line.js
/*
* Line Chart Plugin
*
* Data attributes:
* - data-control="chart-line" - enables the line chart plugin
* - data-reset-zoom-link="#reset-zoom" - specifies a link to reset zoom
* - data-zoomable - indicates that the chart is zoomable
* - data-time-mode="weeks" - if the "weeks" value is specified and the xaxis mo
de is "time", the X axis labels will be displayed as week end dates.
* - data-chart-options="xaxis: {mode: 'time'}" - specifies the Flot configurati
on in JSON format. See https://github.com/flot/flot/blob/master/API.md for detai
ls.
*
* Data sets are defined with the SPAN elements inside the chart element: <span
data-chart="dataset" data-set-data="[0,0],[1,19]">
* Data set elements could contain data attributes with names in the format "dat
a-set-color". The names for the data set
* attributes are described in the Flot documentation: https://github.com/flot/f
lot/blob/master/API.md#data-format
*
* JavaScript API:
* $('.chart').chartLine({ resetZoomLink:'#reset-zoom' })
*
So the functionality is there, it seems, but it's not in the public docs. Looks like you could try out something like this
<div
class="control-chart"
data-control="chart-line"
style="min-height:400px"
data-zoomable="1"
data-reset-zoom-link="#reset-zoom"
data->
<span data-chart="dataset" data-set-label="Graph me tender" data-set-data="[0,0],[1,5],[3,8],[4,2],[5,6]">
Graph me tender
</span>
<span data-chart="dataset" data-set-label="Graph me sweet" data-set-data="[0,0],[1,5],[3,8],[4,2]">
Graph me sweet
</span>
</div>
<a id="#reset-zoom" href="#">Reset zoom</a>
(Edit: There was a somewhat "dirty" tweak necessary here: I added a min-height css attribute, otherwise there was an error thrown. Maybe there should be some additional class for that instead which I do not know. Also, the two data-sets are not plotted in order (the second is plotted first) and are wrongly labeled in the legend, and appear horizontally connected to each other. The zoom function does not seem to work, etc, etc. I think this line graph thingy is possibly still work in progress and that might be the reason why it is not included in the docs yet. )
, play around with it and see what it does. (I have not tested this and hope it works somehow.) If I understand correctly it should give you a zoomable line graph with data points [0,0],[1,5],[3,8],[4,2],[5,6] (x,y coordinate points) and the link below should reset the zoom (edit: zooming does not work. maybe need to set some additional options for that)
The whole thing seems to be based on this Flot JQuery chart library. So you might find some good further hints there or here, besides reading October's {% app root %}/modules/system/assets/ui/js/chart.line.js source code.
I am working on a personal website and so far, everything has been going pretty well. I got the pages set up with the basic layout and everything like that. Now I am trying to make it look more professional. I bowl in tournaments multiple weekends a month. (Yes, I said bowl and yes I do consider it a sport) What I would like to do is put a schedule type bar across the top. (example can be found by clicking the link in this post) The problem is I cannot find any tutorials on how to do this because I don't really know what this functionality is called. Everything that I have tried searching for has just brought up horizontal navigation/scroll bars. Can anyone point me to a tutorial or give me a starting point for getting something like this working on my website?
That is actually a slider, showing like 15 slides at a time.
BX SLIDER - jQuery Slider
The slider included above has many options that let you customize how it works, such as
maxSlides - the total number of slides shown at a given time ( you'd set to 15 )
moveSlides - the number of slides to move on change ( you'd set to 1 ).
Example JS
$('.schedule').bxSlider({
maxSlides: 15,
minSlides: 15,
moveSlides: 1,
autoStart: false
});
Your HTML, with the schedule and all, as styled as you would like, is contained in a list.
<ul class="schedule">
<li>January 15th - Match</li>
<li>January 22nd - Match</li>
<li>January 23rd - Match</li>
</ul>
etc etc etc.
This is a great site, and I've already had a lot of questions answered simply by scrolling and searching through other postings. Unfortunately, I can't seem to track down an answer that specifically helps this problem, and figured I would try posting and looking for help-
I'm using ImportXML and google spreadsheets to 'scrape'a few product descriptions from a retail site. It's been working fine for the most part, and I have done it in 2 ways:
1) Specific call to the description part of a post:
=ImportXML(A1,"//div[#class='desc']")
2) Call to the entire 'product Card', which also returns info such as product title, price, time posted, and places these items in adjacent cells in my Google spreadsheet:
=ImportXML(A1,"//div[#class='productCard']")
Both have worked fine, but I've ran into a different problem using each method. If I can resolve even one of these problems, then I'll happily scrap the other method, I just need one of them to work. The problems are:
Method 1) The website prohibits sellers from including contact information in product postings-- when they include an email address anyways, the site automatically blocks it, so that in the posting it simply appears as "...you can reach me at [obscured]" or something like that. The [obscured] appears in a different colour text and is obviously treated differently somehow. When I scrape these descriptions using Method 1, ImportXML appears to get 'bumped' when it hits the word [obscured], and it passed the remaining text from that product description to the next cell over in my spreadsheet. This ruins the entire organization of the sheet, and I'd like to find a way where I can get ImportXML to just ignore the [obscured], and still place the entire text of the product description in one cell.
Method 2) My call for the entire 'product Card' is as follows:
=ImportXML(A1,"//div[#class='productCard']")
As mentioned, this works fine (for most products), and I don't mind the additional info (price, date, etc.) being posted in adjacent cells.
However, the website also allows certain products to be 'featured', where they appear in a different colour box on the site, and are therefore more likely to get a buyer's attention.
Using this method, the 'featured' products are not scraped or imported into my spreadsheet, but are simply passed over.
The source code (on actual site) (via 'inspect element' in Safari) for both the description (Method 1) and product card (Method 2) look as follows (for a normal product (a) and a featured product (b)):
(a)
<div id="productSearchResults">
<div class="productCard tracked">
<div>...</div>
<div class="stats">...</div>
<div class="desc collapsed descFull">...</div>
</div>
(b)
<div id="productSearchResults">
<div class="productCard featured tracked">
<div>...</div>
<div class="stats">...</div>
<div class="desc collapsed descFull">...</div>
</div>
You can see in both (a) an (b) the 'desc' class that I call in Method 1, which seems to work fine.
From my reading on this site, I think I've learned that a given class can't have more than one word, and therefore the use of "desc collapsed descFull" and "productCard tracked" and "productCard featured tracked" don't represent classes with 3, 2 and 3 words in the title, but instead cases where multiple classes have been assigned?
Regardless, the call to 'desc' (Method 1) works fine and seems to get all descriptions.
In method 2 therefore, I would have thought that a call to 'productCard' would get the info for all products, both featured and regular, as 'featured' is an extra class assigned to some 'productCard's. If I call all 'productCard's, shouldn't the normal AND featured ones be returned? This is currently not the case. I've tried calling just 'tracked' and just 'featured' as classes, and neither returns anything, so my logic that they are their own class equivalent to 'productCard' may be flawed.
In summary, the 'desc' call in Method 1 works fine, and even gets descriptions for 'featured' products. However, when contact information is included in the description and is displayed as [obscured] it bumps my data into the next cell in the spreadsheet, immediately following the word. This throws off and ruins all organization.
In Method 2, I am not getting the featured products at all, which greatly weakens what I am trying to do. Can either (or both!) of these problems be fixed??
Thanks so so much for any help you can give me.
***UPDATE: As seen in the comments below, use of the 'contain' as suggested improved Method 2 by retrieving both regular and featured products. However, featured product cards have extra text elements, and since the entire card is being scraped in this method, featured products do not match the cell alignment that regular products do. If there is a way to fix Method 1, this would therefore be much better.
As outlined in the comments below, the [obscured] text appears in a 'span' that follows underneath/indented from the
<div class="desc descFull collapsed"
as
<span class="obscureText">[obscured]</span>
Is there any way that I can import the 'desc's as I have been, but tell the XPath to essentially 'ignore' the [obscured] span, or at least deal with it in a way that doesn't make description text immediately after [obscured] appear one cell over?
Thanks so much everyone!
You can wrap your function with the concatenate()-function to make sure it all shows up in one cell:
=concatenate(ImportXML(A1,"//div[#class='productCard']"))
Im having a hard time deciding what is the best way to pull pictures from a separate table, for a certain item.
In django, I have two tables:
class item(models.Model):
title..
descr..
class item_pic(models.Model):
item=models.ForeignKey(item)
pic=models.ImageField...
Im displaying the item.title and item.descr in a div, and in the same div I want to pull the pictures.
So far I've tried creating a template filter like item|getPics which returns a list of the pics for that item.
{% for pic in item|getPics %} <img src="/uploads/{{pic.pic}}"> {%endfor%}
In the end I got rid of this since it was firing too many sql queries
Right now I finished pulling the pictures through ajax, the only downside here is that the images take some time to appear. And I assume is the same number of sql queries (only that django debug toolbar doesnt see them since they are fired up in the background).
How would you approach this? Thanks for any tips!
You should use select_related() (docs) to get the image objects together with the items.
It would look like this:
item = item.objects.select_related().get(...)
This means you won't get additional database queries when you're retrieving the item_pics.
As a final note, it's better to capitalize the names of classes as this is convention in Python/Django.
I want to use 2 types of sharethis buttons with different counts. One count for the page that is currently shown, and one in the footer that counts every share for the whole site (only http://example.com, not the articles or something, so not every share).
Here is a short example of the code next to the article:
<span class="st_facebook_custom"><img src="images/icons/facebook.png" alt="Facebook" /></span>
And here is a short example of the code in the footer:
<div class="share"><span class="st_facebook_hcount"></span></div>
You can have two buttons that get two different counts by using the following
The problem is that when you pass in http://example.com it does not give you counts for the whole site, just for the home page...
This is exactly how the FB like and Twitter count buttons work, they are on a per page level, not at a site wide level..
-Manu