Creating Pie Chart in Sencha touch Chart2.0 Beta

**sindhu singh** · 22 Jun 2012 12:08 PM

Hi All,

I have installed Secha touch 2.0 and Sencha touch charts 2.0 successfully , i have integrated them as well, can anyone tell me the step by step procedure to create a simple pie chart ?
Actually i am not understanding from where to start.

Regards,
Sindhu S

jcorredor

I made a simple pie to help you out.
It is all in one .js so that you can copy paste and have it run as is in one file.

Basically, when creating a chart 3 things must occur for the chart to appear. 1: the store, 2: the chart, 3: the container. (each has been commented in the code for simplicity). The chart itself has a few fields that should be filled which has been included as well. Some other interesting fields, though are listeners, callouts, and interactions. You should definitely check those out in the documentation. Try playing around with the code.

The .js code

Code:

Ext.setup({    onReady: function() {
        //a funciton that is used to generate data on the fly for the store
        generateData = function(n) {
            var data = [];
            var names = ['one', 'two', 'three', 'four'];
            var i;
            for (i = 0; i < n; i++) {
                data.push({description: names[i], value: 3 + i}); //pushes data onto the data array by looping, value is a funciton of i
            }
            return data;
        };
        //Part 1: The store
        var myStore = Ext.create('Ext.data.Store', {
            fields: ['description', 'value'],
            data: generateData(4)
        });
        //Part 2: The chart
        var chart = Ext.create('Ext.chart.Chart', {
            store: myStore, //the store that it will use
            series: [{
                type: 'pie',
                showInLegend: true,
                field: 'value',
                label: { //the label inside each pie
                    field: 'description',
                    font: '20px Arial',
                    display: 'rotate',
                    contrast: true
                },
            }],
            legend: { //the legend's properties
                    position: {
                       portrait: 'right',
                       landscape: 'right',
                    },
                    font: '20px Arial'
            },
        });
        //Part 3: The container
        Ext.create('Ext.chart.Panel', {
            fullscreen: true,
            title: 'My Chart',
            chart: chart //displays the chart
        });
    }
});

the HTML code

Code:

<!DOCTYPE html>    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
        <link rel="stylesheet" href="../../resources/css/touch-charts-demo.css" type="text/css">
 
        <title>My Graphic</title>
        <script type="text/javascript" src="../../sencha-touch.js"></script>
        <script type="text/javascript" src="../../touch-charts.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body></body>
    </html>

This HTML is configured to work in the examples folder inside touch-charts. Just make another folder and insert the code into a .js and a HTML file accordingly. The HTML expects the .js to be called index.js, but you can change that in the code to whatever you want.

I hope I helped.

**jcorredor** · 22 Jun 2012 2:59 PM

I made a simple pie to help you out.
It is all in one .js so that you can copy paste and have it run as is in one file.

Basically, when creating a chart 3 things must occur for the chart to appear. 1: the store, 2: the chart, 3: the container. (each has been commented in the code for simplicity). The chart itself has a few fields that should be filled which has been included as well. Some other interesting fields, though are listeners, callouts, and interactions. You should definitely check those out in the documentation. Try playing around with the code.

The .js code

Code:

Ext.setup({    onReady: function() {
        //a funciton that is used to generate data on the fly for the store
        generateData = function(n) {
            var data = [];
            var names = ['one', 'two', 'three', 'four'];
            var i;
            for (i = 0; i < n; i++) {
                data.push({description: names[i], value: 3 + i}); //pushes data onto the data array by looping, value is a funciton of i
            }
            return data;
        };
        //Part 1: The store
        var myStore = Ext.create('Ext.data.Store', {
            fields: ['description', 'value'],
            data: generateData(4)
        });
        //Part 2: The chart
        var chart = Ext.create('Ext.chart.Chart', {
            store: myStore, //the store that it will use
            series: [{
                type: 'pie',
                showInLegend: true,
                field: 'value',
                label: { //the label inside each pie
                    field: 'description',
                    font: '20px Arial',
                    display: 'rotate',
                    contrast: true
                },
            }],
            legend: { //the legend's properties
                    position: {
                       portrait: 'right',
                       landscape: 'right',
                    },
                    font: '20px Arial'
            },
        });
        //Part 3: The container
        Ext.create('Ext.chart.Panel', {
            fullscreen: true,
            title: 'My Chart',
            chart: chart //displays the chart
        });
    }
});

the HTML code

Code:

<!DOCTYPE html>    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
        <link rel="stylesheet" href="../../resources/css/touch-charts-demo.css" type="text/css">
 
        <title>My Graphic</title>
        <script type="text/javascript" src="../../sencha-touch.js"></script>
        <script type="text/javascript" src="../../touch-charts.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body></body>
    </html>

This HTML is configured to work in the examples folder inside touch-charts. Just make another folder and insert the code into a .js and a HTML file accordingly. The HTML expects the .js to be called index.js, but you can change that in the code to whatever you want.

I hope I helped.

**sindhu singh** · 23 Jun 2012 6:22 AM

Hi jcorredor,

Thanks a tonne for your reply

it helped me a lot

you are my saviour

But am i supposed to create charts only in example folder of Touch charts 2.0 beta?
if yes, in that case no need of integrating Sencha Touch and Touch charts 2.0 beta right?

And please let me know if i am wrong .

Regards,
Sindhu S

**jcorredor** · 25 Jun 2012 5:13 AM

You're welcome.

To answer you question, no, you can create them wherever you like. The only reason my example needs to be in the examples folder is because the references in the HTML file require it to be so, but those can be changed accordingly.
You can integrate Touch-Charts beta with Sencha-Touch but it's a little complicated. You have to use the sencha-touch.js that is provided in the touch-charts beta, rather than the sencha-touch.js in Sencha-Touch itself. You also need to modify your app.json file and move around some sass files. I haven't really dared to do this integration, but there's a few people that have and there are some good forum threads on it.
Is it necessary to integrate it, though? The answer is no. I have used it stand-alone and it seems to have its own pretty complete version of Sencha-Touch.

**sindhu singh** · 25 Jun 2012 6:40 AM

Hi jcorredor

Thank you so much for the reply.

Regards,
Sindhu S

**sindhu singh** · 26 Jun 2012 3:15 AM

Hi Jcorredor,

Now suppose if i want to create a UI like, in my first page page that is my welcome page i have tabs and if i click on any one tab it should take me to the respective chart and if i come back and click on next tab i should get some different chart.

Is that possible to create using sencha touch charts 2.0?

Regards,
Sindhu S

**jcorredor** · 26 Jun 2012 5:50 AM

Yes, that is possible. What I did was I used Ext.define to create each chart and assigned an xtype to each. Then, in my panel, I would put the charts in the items array using their xtype. It is not very different from what you would normally do with any other component.

**sindhu singh** · 26 Jun 2012 6:54 PM

Thank you so much .

**Farish** · 12 Oct 2012 4:58 AM

Hi,

I am trying an example with pie chart. I have placed the pie chart in a chart panel and then I am placing the chart panel in a carousel. using this layout, the iteminfo is not shown on the longpress gesture. If I place the pie chart directly in the carousel, then it works but then I cant put a title for my pie chart. I am only using the extra chart panel container for displaying the chart title. Any idea on how to fix this?

I am using all css and JS files from touch charts 2 beta.

Regards,
Farish

Creating Pie Chart in Sencha touch Chart2.0 Beta

Thread Tools

Search Thread

Display

Answered: Creating Pie Chart in Sencha touch Chart2.0 Beta

Answered: Creating Pie Chart in Sencha touch Chart2.0 Beta

Creating Pie Chart in Sencha touch Chart2.0 Beta

Creating Pie Chart in Sencha touch Chart2.0 Beta