PDA

View Full Version : How to change "extraStyle" properties of a line chart integrated in an Ext.panel



abhasp
26 Oct 2011, 11:03 PM
Hi I'm trying to change a few properties of a line chart dynamically, which is integrated as an item in an ExtJs panel.My problem is that i'm getting the appropriate values thru some javascript codes, but not able to set those values.

The code of the chart.js file is as follows:


var font_name;
var font_color;
var font_size;
var bg_color;
var panel;

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
panel = new Ext.Panel({
title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
id: 'line_chart',
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;
bg_color = document.getElementById('bg_color').value;
setValue();
return true;
}