1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    12
    Vote Rating
    0
    sindhu singh is on a distinguished road

      0  

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

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


    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

  2. 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.

  3. #2
    Sencha User
    Join Date
    Jun 2012
    Posts
    14
    Answers
    2
    Vote Rating
    0
    jcorredor is on a distinguished road

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    12
    Vote Rating
    0
    sindhu singh is on a distinguished road

      0  

    Default Creating Pie Chart in Sencha touch Chart2.0 Beta

    Creating Pie Chart in Sencha touch Chart2.0 Beta


    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

  5. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    14
    Answers
    2
    Vote Rating
    0
    jcorredor is on a distinguished road

      0  

    Default


    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.

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    12
    Vote Rating
    0
    sindhu singh is on a distinguished road

      0  

    Default


    Hi jcorredor

    Thank you so much for the reply.

    Regards,
    Sindhu S

  7. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    12
    Vote Rating
    0
    sindhu singh is on a distinguished road

      0  

    Default


    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

  8. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    14
    Answers
    2
    Vote Rating
    0
    jcorredor is on a distinguished road

      0  

    Default


    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.

  9. #8
    Sencha User
    Join Date
    Jun 2012
    Posts
    12
    Vote Rating
    0
    sindhu singh is on a distinguished road

      0  

    Default


    Thank you so much .

  10. #9
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,088
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    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

Thread Participants: 2