EXT.NET 3.0.0 RELEASED!
Now with Tablet Support!
Ext.NET 3.0.0 is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 4 of 4

Thread: Using HighCharts with Coolite

  1. #1
    Member
    Join Date
    Aug 2010
    Posts
    6

    Using HighCharts with Coolite

    One of the requirements for our project is to implement HighCharts.com charts into the web app. Below is the source to create a chart using javascript. Can someone demonstrate how I could make the chart appear within an ext panel using coolite?

    Code:
    var chart;
    $(document).ready(function() {
       chart = new Highcharts.Chart({
          chart: {
             renderTo: 'container',
             defaultSeriesType: 'bar'
          },
          title: {
             text: 'Historic World Population by Region'
          },
          subtitle: {
             text: 'Source: Wikipedia.org'
          },
          xAxis: {
             categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
             title: {
                text: null
             }
          },
          yAxis: {
             min: 0,
             title: {
                text: 'Population (millions)',
                align: 'high'
             }
          },
          tooltip: {
             formatter: function() {
                return ''+
                    this.series.name +': '+ this.y +' millions';
             }
          },
          plotOptions: {
             bar: {
                dataLabels: {
                   enabled: true
                }
             }
          },
          legend: {
             layout: 'vertical',
             align: 'right',
             verticalAlign: 'top',
             x: -100,
             y: 100,
             borderWidth: 1,
             backgroundColor: '#FFFFFF'
          },
          credits: {
             enabled: false
          },
               series: [{
             name: 'Year 1800',
             data: [107, 31, 635, 203, 2]
          }, {
             name: 'Year 1900',
             data: [133, 156, 947, 408, 6]
          }, {
             name: 'Year 2008',
             data: [973, 914, 4054, 732, 34]
          }]
       });
       
       
    });

  2. #2
    Ext.NET - Dev Team Vladimir's Avatar
    Join Date
    Mar 2008
    Location
    Russia
    Posts
    15,388
    Hi,

    There is ExtJS adapter for HighCharts, you can use it with Coolite via javascript
    http://www.sencha.com/forum/showthre...ugin-for-ExtJS
    Vladimir Shcheglov
    Ext.NET, Inc.
    Development Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Member
    Join Date
    Aug 2010
    Posts
    6
    Thanks for the reply. In our existing (non-coolite) app, we load the HighChart in the store load event using normal ExtJs. I guess my question is, how would the store event look for coolite? Where could I put the code below?

    Code:
     load: function(store,records,loadoptions) {
                                if (store.getTotalCount()>0)
                                {
                                    var options =
                                    {
                                        chart:
                                        {
                                            renderTo: 'stagetypechartdiv',
                                            defaultSeriesType: 'column',
                                            height: 300
                                            //shadow: true
                                        },
                                        title:
                                        {
                                            text: null
                                        },
                                        tooltip:
                                        {
                                            formatter: function()
                                            {
                                                if (this.y > 1)
                                                {
                                                    return '<b>'+ this.point.name +'</b>: ('+ this.y +') Opportunities';
                                                }
                                                else
                                                {
                                                    return '<b>'+ this.point.name +'</b>: ('+ this.y +') Opportunity';
                                                }
                                            }
                                        },
                                        xAxis:
                                        {
                                            categories: []
                                        },
                                        yAxis:
                                        {
                                            min: 0,
                                            title:
                                            {
                                                text: 'Opportunities'
                                            }
                                        },
                                        legend:
                                        {
                                            layout: 'vertical',
                                            style:
                                            {
                                                left: 'auto',
                                                bottom: 'auto',
                                                right: '0px',
                                                top: '100px'
                                            },
                                            borderWidth: 1,
                                            backgroundColor: '#FFFFFF'
                                        },
                                        series: [],
                                        credits: {
                                            enabled: false
                                        }
                                    };
    
                                    options.xAxis.categories.push('Stage');
    
                                    Ext.each(records, function(item) {
                                    var series =
                                    {
                                        data: []
                                    }
                                        series.name = item.get('stage') + ': ' + item.get('expectedsales');
                                        series.data.push([item.get('stage') + ': ' + item.get('expectedsales'),item.get('number')]);
                                        options.series.push(series);
                                    });
    
                                    var chart = new Highcharts.Chart(options);

  4. #4
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,052
    Hi,

    The ExtJS charts has been included into Ext.NET v2.
    http://examples2.ext.net/#/Chart/Dashboard/Basic/

    More details about Ext.NET v2 are here:
    http://forums.ext.net/showthread.php?16883
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

Similar Threads

  1. HighCharts in Coolite
    By ljankowski in forum 1.x Help
    Replies: 2
    Last Post: Jan 12, 2012, 5:13 PM
  2. Highcharts, Filter no Refresh
    By micmty in forum 1.x Help
    Replies: 3
    Last Post: Jan 12, 2012, 5:12 PM
  3. Replies: 1
    Last Post: Jan 03, 2011, 10:38 AM
  4. HighCharts With Coolite
    By simonmicheal in forum Open Discussions
    Replies: 0
    Last Post: Dec 04, 2009, 10:59 AM
  5. [CLOSED] help files for coolite? (extjs verses coolite)
    By pkellner in forum 1.x Premium Help
    Replies: 1
    Last Post: Nov 25, 2008, 1:19 PM

Posting Permissions