Header background color for chart

**ratheeshrohini** · 19 Feb 2012 9:25 PM

Hi nag, thank u for ur quick reply.I tried the above mentioned method.But still the panel header is there as in attachment.I think the toolbar title appears below the panel header.(i am not sure whether it is panel header or not).can u help me.

**Naga** · 19 Feb 2012 10:23 PM

Better you try this code for pie chart,

First you create one panel and call pie chart in that panel

Code:

var Panel = new Ext.Panel( {
        layout: {
            type: 'fit',
            align: 'top'
        },
        defaults: {
            flex: 1,
            cls: 'card1',
            layout: 'fit'
        },
        dockedItems: {
            dock: 'top',
            xtype: 'toolbar',
            layout: 'vbox',
            ui: 'light',
            title: 'Pie chart',
            items: [],
        },
        items: [pieChart]


    });

If you want to cahnge the background of your title you can change in touch-charts-full.css by searching for toolbar-light.

you use Ext.chart.Chart instead of Ext.chart.panel hope this will sove your problem.

again don't mention renderTo in this chart.Chart it's working fine for me

Code:

var pieChart = new Ext.chart.Chart({
cls: 'pie1',
theme: 'Demo',
store: store2,
shadow: false,
animate: true,
insetPadding: 20,
legend: {
position: {
portrait: 'bottom',
landscape: 'left'
}
},/*
interactions: [{
type: 'reset',
confirm: true
},
{
type: 'rotate'
},
{
type: 'iteminfo',
gesture: 'taphold',
listeners: {
show: function(interaction, item, panel) {
var storeItem = item.storeItem;
panel.update(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('2007') + '</li></ul>'].join(''));
}
}
},
{
type: 'piegrouping',
//snapWhileDragging: true,
onSelectionChange: function(me, items) {
if (items.length) {
var sum = 0,
i = items.length;
while(i--) {
sum += items[i].storeItem.get('2007');
}
chartPanel.descriptionPanel.setTitle('Total: ' + sum);
chartPanel.headerPanel.setActiveItem(1, {
type: 'slide',
direction: 'left'
});
}
else {
chartPanel.headerPanel.setActiveItem(0, {
type: 'slide',
direction: 'right'
});
}
}
}],*/

interactions: [{
type: 'itemhighlight',
gesture:'tap',
onGesture : function() { 
window.location = 'big_pie_chart.html';
}
}
],


series: [{
type: 'pie',
field: '2007',
showInLegend: true,
highlight: false,
listeners: {
'labelOverflow': function(label, item) {
item.useCallout = true;
}
},
// Example to return as soon as styling arrives for callouts
callouts: {
renderer: function(callout, storeItem) {
callout.label.setAttributes({
text: storeItem.get('name')
}, true);
},
filter: function() {
return false;
},
box: {
//no config here.
},
lines: {
'stroke-width': 2,
offsetFromViz: 20
},
label: {
font: 'italic 14px Arial'
},
styles: {
font: '14px Arial'
}
},
label: {
field: 'name'
}
}]
}
});
                });

**ratheeshrohini** · 20 Feb 2012 1:27 AM

Hi,
Unfortunately this is not loading chart in my case...Is there any .js file to be included for this .My chart.html file contains following code?
Also , I think some braces are more in ur code .I corrected it and checked.Then panel title is loading, but not pie chart

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" href="resources/css/touch-charts-full.css" type="text/css">

<title>Demoooooo</title>
<style type="text/css">

</style>
<script type="text/javascript" src="sencha-touch.js"></script>
<script type="text/javascript" src="touch-charts.js"></script>
<script type="text/javascript" src="src/big_pie_chart.js"></script>
</head>
<body bgcolor="#000">

</body>
</html>

**Naga** · 20 Feb 2012 9:26 PM

Hai,

what's the error displaying in your console?

Regards,
Nag.

**Naga** · 20 Feb 2012 9:28 PM

hai Rohini,

I think you have to include sencha-touch.css also in your chart.html file.

Regards,
Nag.

**ratheeshrohini** · 22 Feb 2012 10:40 PM

Hi Nag ,

Now can u help me to know how to parse a json file to draw a line chart.My json file containig following code.Pls reply as soon as possible.

{
"version": 1,
"report_type": "dashboard",
"title": "Daily Sales Report",
"sub_title": "",
"run_datetime": "February 2, 2012 22:13:00",
"panels": [
{
"title": "Daily Order Volume",
"sub_title": "",
"panel_type": "cumulative_line_graph",
"x_axis": {
"label": "Hour",
"values": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
18,
19,
20,
21,
22,
23,
24
]
},
"y_axis": {
"label": "Order Totals in (100's)",
"values": [
0,
500,
1000,
1500,
2000,
2500
]
},
"plot": [
{
"label": "Projected Orders",
"values": [
[
1,
2000
],
[
2,
0
],
[
3,
0
],
[
4,
0
],
[
5,
0
],
[
6,
0
],
[
7,
0
],
[
8,
0
],
[
9,
0
],
[
10,
0
],
[
11,
0
],
[
12,
0
],
[
13,
0
],
[
14,
0
],
[
15,
0
],
[
16,
0
],
[
17,
0
],
[
18,
0
],
[
19,
0
],
[
20,
0
],
[
21,
0
],
[
22,
0
],
[
23,
0
],
[
24,
0
]
]
},
{
"label": "Cumulative Orders for the day by hour",
"values": [
[
1,
30
],
[
2,
30
],
[
3,
40
],
[
4,
25
],
[
5,
25
],
[
6,
50
],
[
7,
75
],
[
8,
60
],
[
9,
75
],
[
10,
85
],
[
11,
90
],
[
12,
125
],
[
13,
110
],
[
14,
125
],
[
15,
50
],
[
16,
50
],
[
17,
50
],
[
18,
60
],
[
19,
60
],
[
20,
55
],
[
21,
40
],
[
22,
25
]
]
},
{
"label": "Cumulative Orders for the same day last year",
"values": [
[
1,
25
],
[
2,
25
],
[
3,
40
],
[
4,
20
],
[
5,
20
],
[
6,
60
],
[
7,
85
],
[
8,
80
],
[
9,
80
],
[
10,
95
],
[
11,
135
],
[
12,
110
],
[
13,
100
],
[
14,
120
],
[
15,
50
],
[
16,
50
],
[
17,
50
],
[
18,
60
],
[
19,
55
],
[
20,
30
],
[
21,
20
],
[
22,
15
],
[
23,
10
],
[
24,
5
]
]
}
]
},
{
"title": "Revenue Split by Channel",
"panel_type": "pie",
"value": "650376",
"format": "currency",
"slice": [
{
"label": "Google SEM",
"value": 24
},
{
"label": "SEO",
"value": 20
},
{
"label": "Mobile",
"value": 5
},
{
"label": "Phone",
"value": 10
},
{
"label": "Untagged",
"value": 10
},
{
"label": "Affiliates",
"value": 8
},
{
"label": "Amazon",
"value": 9
},
{
"label": "email",
"value": 14
}
]
}
]
}

**Naga** · 23 Feb 2012 12:14 AM

hai rohini,

sorry am not familiar with Ext.js. Till now i didn't work using Ext js.

**ratheeshrohini** · 14 Mar 2012 3:16 AM

hi
I have a line chart drawn using parsed values from a json. On taping the cchart i need a bigger view of the same chart.to go to big view i wrote the following code

onGesture : function() {
alert("inside gesture.............................");
alert(dataArray.length);
window.location = 'big_pie_chart.html';
}

this will redirect to big_pie_chart.html. but i need to pass array to the big_pie_chart.js.......How it is possible?Can any one show me the code for this?

Header background color for chart

Thread Tools

Search Thread

Display