PDA

View Full Version : How to change the font styles of a line chart integrated in an Ext.panel



abhasp
24 Oct 2011, 1:37 AM
I'm trying to change the font styles of a line chart dynamically which is integrated as an item in an ExtJs panel.My problem is that i'm getting the appropriate style values thru some javascript codes, but not able to set those values.
The code of the chart.js file is as follows



Ext.onReady(function(){

var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 3000000},
{name:'Aug 07', visits: 240000, views: 3500000},
{name:'Sep 07', visits: 355000, views: 4000000},
{name:'Oct 07', visits: 375000, views: 4200000},
{name:'Nov 07', visits: 490000, views: 4500000},
{name:'Dec 07', visits: 495000, views: 5800000},
{name:'Jan 08', visits: 520000, views: 6000000},
{name:'Feb 08', visits: 620000, views: 7500000}
]
});

// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'visits',
extraStyle: {
padding: 20,
animationEnabled: false,
font: {
name: "ARIAL BLACK",
color: 0x995566,
size: 10,
bold: true,
italic: false,
underline: false
},
border: {
color: 0x995566,
size: 2
},
background: {
color: '#F0E68C'
},
dataTip: {
padding: 20 ,
border: {
color: 0x995566,
size: 2
}, background: {
color: '#F0E68C'
}, font: {
name: "ARIAL BLACK",
color: 0x995566,
size: 10,
bold: true,
italic: false,
underline: false
}
}
},
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});

});

function getValue(){
font_name = document.getElementById('font_name').value;
font_color = document.getElementById('font_color').value;
font_size = document.getElementById('font_size').value;
return true;
}