View Full Version : Stacked Bar Chart

9 Oct 2013, 3:42 AM
Hello Everyone,

I am trying to create a stacked bar chart but after studying the examples in the documentation I am still running into some problems.

Here's what I am trying to achieve: I want a chart that has a YearMonth value along the Y-axis and a total number of Views on the X-axis, the trick is(and the reason I am stacking the bars is) that I want the bars to be split among the views per Movies. (So one bar would be Titanic, Matrix, Starwars stacked on top of each other to form the total amount of Views these movies had in a given YearMonth)

Here's what I have:


Ext.define('model.MovieStatistics', {
extend: 'Ext.data.Model',
idProperty: ['YearMonth'],
fields: [
{ name: 'YearMonth', type: 'string' },
{ name: 'Movie_Id', type: 'int' },
{ name: 'Year', type: 'int' },
{ name: 'Month', type: 'int' },
{ name: 'TotalViewCount', type: 'int' }


Ext.define('view.chart.MovieStatisticsPerMonth', {
extend: 'Ext.chart.Chart',
alias: 'widget.MovieStatisticsPerMonthChart',
requires: [
constructor: function () {
this.store = Ext.create('store.MovieStatisticsStore', {
autoLoad: true, sorters: [{
property: 'YearMonth',
direction: 'ASC'
this.store.getProxy().api.read = ServerControllers.Dashboard.MovieStatisticsPerMonth;
animate: true,
shadow: true,
border: true,
legend: {
position: 'right'
theme: 'MoD',
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['TotalViewCount'],
title: false,
grid: true,
label: {
renderer: function (v) {
return String(v);
}, {
type: 'Category',
position: 'left',
fields: ['YearMonth'],
title: false

series: [{
type: 'bar',
axis: 'bottom',
gutter: 80,
xField: ['YearMonth'],
yField: ['TotalViewCount'],
stacked: true,
tips: {
trackMouse: true,
width: 65,
height: 28,
renderer: function(storeItem, item) {


Ext.define('store.MovieStatisticsStore', {
extend: 'Ext.data.Store',
requires: ['model.MovieStatistics'],
model: 'model.MovieStatistics',
autoLoad: false,
remoteSort: false,
remoteFilter: false,
filterOnLoad: true,
sorters: [{
property: ['YearMonth', 'Movie_Id'],
direction: 'DESC'
proxy: {
type: 'direct',
paramOrder: [],
api: {
read: ServerControllers.Reports.GetMovieStatisticsPerMonth
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalRecords',
successProperty: 'success',
messageProperty: 'msg'

Currently my code selects one random record for each YearMonth and displays it in the graph.
Any advice or tips on how to fix this?

9 Oct 2013, 4:28 AM
your store should have the following 4 fields:

{name: 'YearMonth'},
{name: 'movieA'},
{name: 'movieB'},
{name: 'movieC'}

your data should be of the form:

{"movieA":"3", "movieB":"13", "movieC":"81", "YearMonth":"Sept 13"},
{"movieA":"4", "movieB":"10", "movieC":"83", "YearMonth":"Oct 13"}

your chart axes should be like:

title: 'Views',
type: 'Numeric',
position: 'left',
fields: ['movieA', 'movieB', 'movieC'],
grid: true,
minimum: 0
title: 'Month / Year',
type: 'Category',
position: 'bottom',
fields: ['YearMonth']

and then chart series:

type: 'column',
xField: 'YearMonth',
yField: ['movieA', 'movieB', 'movieC'],
stacked: true,
axis: 'left',
smooth: true,
fill: true,
fillOpacity: 0.5

9 Oct 2013, 10:38 PM
The problem is that the amount of movies is massive( 1000+ ) and will keep on growing.(I'm loading them from a database into the model) So predefining all the movies as separate columns will not be possible unless there is a convenient way to convert the data values I already have.

As you might have guessed by what I just said I am working with a legacy system that I need to build upon, so rebuilding the entire thing from scratch is not an option.

9 Oct 2013, 10:46 PM
I would suggest that you have one store for your movies information and keep the chart store separate. whenever you get new entries in your movies store, you can update the data in the chart store by formatting it as I showed. you can add new records but I dont know if its possible to dynamically add series to the charts...