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

[nohuhu]

Hi Marius,

Thanks for the bug report, I've never noticed that the demo didn't work in IE8. The component itself does work with IE7+ though, it's used in one of my projects and I never noticed any problem there. It's probably the demo is misconfigured or something; I'll look into it.

Regards,
Alex.

[msinn]

Hi Alex,

and than you for your answer. That would be very helpful to find out why the demo does not work in IE8/IE7.
I've tried to use the component and got the same issues in IE8/IE7.

I have it in a CardLayout and works fine in IE9 and all other popular browsers:

titlechart-ie9.png

But not in IE8/IE7 :


titlechart-ie8.png
Thx

[nohuhu]

Marius,

I've taken a look at the demo and it seems that there's some problem with first rendering of the chart. If you click on 'no title' button in the demo, the chart will render - clicking on any of the arrows will redraw the chart with the title. I'm not sure if that's a problem with component code or demo code; I'm using this exact component in one of my projects and it works as expected with IE7+.

Regards,
Alex.

[troseberry]

I was having the same problem with display issues on IE7/8 in quirksmode. I updated the "getTitleAttributes" function inside the TitleChart.js file to default the width and height to 0 if its undefined and then it started to render with no issues.