The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Using HighCharts with Coolite

  1. #1

    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?

    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
    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
    Sr. Developer
  3. #3
    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?

     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
    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 Veriga
    Developer & Support Expert

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

Subscribe now to get the latest Ext.NET happenings in our newsletter.