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
  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.
    https://examples2.ext.net/#/Chart/Dashboard/Basic/

    More details about Ext.NET v2 are here:
    http://forums.ext.net/showthread.php?16883

Similar Threads

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

Posting Permissions