Ext.ux.chart.TitleChart - Chart with a Title

[nohuhu]

When one page contains several charts, it may be necessary to provide users with information on each charts' meaning. This is what Ext.ux.chart.TitleChart is for: it allows assigning title text to any kind of chart supported by Ext JS.

It looks like this:

TitleChart screenshot.png

TitleChart accounts for presence or absence of a title, adjusting chart dimensions accordingly. Title can be placed at top, bottom, left or right side of the Chart. Padding between Chart edge and title text is configurable, as well as margin between title text and actual charting area.

Usage is pretty straightforward, take a look at the source and it should be obvious how to use it. Demo application is provided as well.

Tested with:

• Chrome 15
• Firefox 7
• Safari 5
• Opera 11
• MSIE 8

Source code is released under GPL 3.0 on Github: https://github.com/nohuhu/Ext.ux.chart.TitleChart. Commercial licensing is also available.

Live demo: http://nohuhu.org/demos/demo_titlechart.html

Sencha Market page: https://market.sencha.com/users/30/extensions/36

Regards,
Alex.

[mitchellsimoens]

Could be a great submission for the App Gallery

[feanor91]

Hello

I try to use your plugin but I get that message :

uncaught exception: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.chart.TitleChart

BTW, in my code (it's ASP.NET), I have :

    <script type="text/javascript" src="jsFile/ext-all.js" />
  
    <script type="text/javascript">
        Ext.Loader.setConfig({
            enabled: true,
            disableCaching: true,
            paths: { 'Ext': "/app/" }
        });
    </script>
    
    <script src="jsFile/Chart.js" type="text/javascript"></script>
    <script src="jsFile/TitleChart.js" type="text/javascript"></script>
....

I add that to my main include :

Ext.require('Ext.ux.chart.Chart');Ext.require('Ext.chart.TitleChart');
Ext.require('Ext.ux.chart.TitleChart');

I have already that :

Ext.require(['*']);

but epic fail...


I called the chart like that (not sure it will be good):

var ETTRChart= Ext.create('Ext.chart.TitleChart', {    animate: true,
    store: stoETTR,
    title: 'ETTR',
    titleFont: 'bold 16px sans-serif',
    titlePadding: 5,
    titleMargin: 5,
    insetPadding: 5,
    shadow: false,

BTW, your example works well...Could you help me please?

[feanor91]

Forget it, it works. I thought I was in 4.0.7, but apprently, i'm not, I try with 4.1.0 and it's good.


Sorry to bother you.

[nohuhu]

Version 0.99 supports Ext JS 4.1.

[msinn]

Hi @ nohuhu,

your extension works great with 4.1.3 and the popular browsers, but it does not work with IE8 and older or in Quirksmodus, just with IE9.

If you open your demo with IE8(Win 7), you'll get the panel empty without chart and chart title.
Do you know about this? There is no error or warning in the IE browsers, so I do not really have an idea how to get it working.

Thank you for your shared extension

Marius