Adding Bar charts on product page

[priyeshk]

Hello everyone,

I have a very particular requirement, which initially seemed to be doable to me, but considering my web developer couldn’t develop it in last 2 months before abandoning the project, I started looking into problem by myself. But still haven't found anything substantial.

In short statement, my issue is to have dynamic charts (100% stacked bar charts, highlighted till product specification) on the product page, which can show the product specification. (For example for a mobile phone with 2 gb ram, highlighting a chart with min 1 and max 4, till 2 gb).

In long description:

I want to develop an ecommerce website where on product page I can display the specification of products on charts.

For example let’s take mobiles for reference and assume company name as being unique field/tag.

All products have 4 main characteristics. RAM, battery life, Screen resolution and internal memory.

Considering I have all the HTC models information in my data base. Let’s say of all the phones in my database, minimum RAM by any phone is 1 gb and maximum RAM is 4 gb. So my range for RAM is from 1-4. Similarly form Battery its 2000-3500mAh, weight 110g- 220g and internal memory is 8gb- 64gb.

Now what I want is, when user select any product, when the product page comes up, these specification to be shown as four "100% stacked bar charts"

For example, user select a phone of HTC model with following values: 3 gb RAM, 2600mAh battery, 185g weight and 64gb internal memory.

The output I want is 4 charts (one for each specification) with min and max value on left hand and right hand side and then shaded to value of the product specification.

I am wondering, if this is possible or not. It amazes me that adding chart seems so difficult (i have no programming experience, maybe that’s why).

What I have look into, I see there are google charts, highcharts . com, and some other third party players. But still they don’t exactly have solution I am looking for.

Can someone please, advise me, if getting such charts are even possible? Maybe that’s why no ecommerce website have it.

Kind regards,

Priyesh

[iWeb GazJoy · Accepted solution]

@priyeshk

Hi and welcome to the forums,

I think this is indeed possible, you can do this with some custom template logic and CSS. Its similar to the way Magento displays its review ratings.

So taking your RAM you need a product attribute which would be a dropdown with the options from 0 to 4.

Your template would need to look like this:

<div id="rating" class="rating">
<?php $_ram = $this->getAttributeText('ram'); ?>
    <div class="rating-value">
	<div style="width:<?php echo ($_ram / 4) * 100 ?>%;"></div>
    </div>
</div>

and your CSS like this:

.rating-value,
.rating-value div {
    height: 20px;
}
.rating-value {
    background: black;
}
.rating-value div {
    background: white;
}

Please let me know how you get on and if this helped you please mark as a solution. @davebaker helped me with this php, mad propz to that guy.

[priyeshk]

Thank you @iWeb GazJoy and @iweb_davebaker

Apologies for the much delayed response. I shared your comments to my new developer. He responded that he has similar idea (or maybe he was secretly thanking you in his heart.)

Anyways, he has presented me rough demo where he has the charts prepared. Although they are not very clean, but still resolve the functionality part.

I could share the link (if you like) for finished product, once its is uploaded on the server.

I would again really like to thank you for the contribution, as somewhere I was loosing hope from the platform.

Kind regards,

Priyesh