It is currently Sat Dec 20, 2014 7:53 am Advanced search

Highcharts - A new JavaScript charting library

News and announcements from the author.

Re: Highcharts - A new JavaScript charting library

Postby buz » Tue Dec 22, 2009 2:19 pm

This is the code for the ExtJS extentsion, it works without jQuery or MooTools. I hope I can please some people with the code, i'll post some demo's on my site later on.

Daniel

Code: Select all
/**
 * ExtJS Extentions
 *
 */
} else if (win.Ext){
    /**
     * jQuery extend function
     */
    var jqextend = function() {
        // copy reference to target object
        var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

        // Handle a deep copy situation
        if ( typeof target === "boolean" ) {
            deep = target;
            target = arguments[1] || {};
            // skip the boolean and the target
            i = 2;
        }

        // Handle case when target is a string or something (possible in deep copy)
        if ( typeof target !== "object" && !Ext.isFunction(target) )
            target = {};

        // extend jQuery itself if only one argument is passed
        if ( length == i ) {
            target = this;
            --i;
        }

        for ( ; i < length; i++ )
            // Only deal with non-null/undefined values
            if ( (options = arguments[ i ]) != null )
                    // Extend the base object
                    for ( var name in options ) {
                            var src = target[ name ], copy = options[ name ];

                            // Prevent never-ending loop
                            if ( target === copy )
                                    continue;

                            // Recurse if we're merging object values
                            if ( deep && copy && typeof copy === "object" && !copy.nodeType )
                                    target[ name ] = jqextend( deep,
                                            // Never move original objects, clone them
                                            src || ( copy.length != null ? [ ] : { } )
                                    , copy );

                            // Don't bring in undefined values
                            else if ( copy !== undefined )
                                    target[ name ] = copy;

                    }

        // Return the modified object
        return target;
    };
    each = function(arr, fn){
            Ext.each(arr, fn);
    }
    map = function(arr, fn){
            var results = [];
            if (arr)
            for (var i = 0, len = arr.length; i < len; i++)
                    results[i] = fn.call(arr[i], arr[i], i, arr);
            return results;
    }
    merge = function(){
        var args = arguments;
        return jqextend(true, null, args[0], args[1], args[2], args[3]);
    }

    hyphenate = function (str){
        return str.replace(/([A-Z])/g, function(a, b){ return '-'+ b.toLowerCase() });
    }
    addEvent = function (el, event, fn){
        var xel = Ext.get(el);
        if (xel) xel.addListener(event, fn)
    }
    fireEvent = function(el, event, eventArguments, defaultFunction) {
        // if fireEvent is not available on the object, there hasn't been added
        // any events to it above
        if (el.fireEvent) el.fireEvent(event, eventArguments);

        // fire the default if it is passed and it is not prevented above
        if (defaultFunction) defaultFunction(event);
    }
    animate = function (el, params, options){
        var opt = {
            duration: 1,
            easing: 'easeOut'
        };
        Ext.apply(opt, options);
        var i = parseInt(params.width);
        Ext.get(el).setWidth(i, true);
    }
    getAjax = function (url, callback) {
        Ext.Ajax.request({
           url: url,
           success: function(response){
               callback(response.responseText);
           }
        });
    }
}
buz
 
Posts: 8
Joined: Tue Dec 22, 2009 11:06 am

Re: Highcharts - A new JavaScript charting library

Postby buz » Thu Dec 31, 2009 5:38 pm

For other people that want to see/use highcharts with ExtJS i've provided a sample here: http://www.i286.org/examples/ExtSample.html
buz
 
Posts: 8
Joined: Tue Dec 22, 2009 11:06 am

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Tue Jan 05, 2010 11:05 am

@daniel:
Great Job on the Ext JS implementation! Do you have a blog page or anything on this, so I can write a short piece on it?

@moforce:
is it at all possible to make it dynamic so we don't have to refresh the page to see the new data?

Working on that. Version 1.2 will add methods for adding, updating and removing points, series and axies. Only the affected parts of the chart will be redrawn. You can follow the work at http://highcharts.com/studies/dynamic.htm. It's still very much in development, and only tested in Firefox with jQuery.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Wed Jan 06, 2010 10:14 am

Brilliant! Thanks!
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Thu Jan 07, 2010 10:08 am

@squarepaw:

Highcharts expects numbers for the border width and radius, so you need to remove the quotes:

Code: Select all
chart: {
   renderTo: 'container',
   defaultSeriesType: 'line',
   borderColor: '#666666',
   borderRadius: 10,
   borderWidth: 1
}
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Thu Jan 07, 2010 10:15 am

@thatcode:

Highcharts is tested with MooTools 1.2.4 and 1.2.3. If you are running into problem with the latest version, you can set up a live test page and I can debug it.

Currently the data labels can't be made clickable. There's an imagemap overlaying all other elements in the chart listening for mouse interaction. However, you can set a click event listener on the point itself and run location.href. See http://highcharts.com/ref/#plotOptions- ... int-events.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby alexpp » Sat Jan 09, 2010 7:28 pm

Great library! But I have question.
I render following chart:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: { min: 99.6, max: 116.4 },
series: [{ name: 'Theo', type: 'line', data: [[99.6, -13950], [102, -13950], [114, 4050], [116.4, 4050]]}]
});

I want it's axis X begins at 99.6 but it begins at 97.5. How to move axis X start from 97.5 to 99.6? And I want chart ends at 116.4 at X. Vertical ticks are ideal - starts from 100 and intervals are good. How to set visible X interval from 99.6 to 116.4?

now - http://img37.imageshack.us/i/13383830.png/
expected - http://img413.imageshack.us/i/25284632.png/

thank you
alexpp
 
Posts: 3
Joined: Sat Jan 09, 2010 7:26 pm

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Tue Jan 12, 2010 10:12 am

Thanks alexpp!

In the current version the axis min and max are always rounded to the nearest tick. In 1.2 there are two new options, endOnTick and startOnTick, which default to true on the y axis but false on the x axis.

Try out the unstable prerelease at http://highcharts.com/js/prerelease/hig ... 1.2.src.js. It comes with no guarantees, but it may work for you.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby jharrah87 » Wed Jan 13, 2010 12:37 am

I love the charts. Like everyone else said, they render some amazing charts. However, I've found a problem that i was hoping you could help me fix.

When specifying data inline such as "data: [1,2,3]" there is an issue with drawing single points on the chart such as in this example:

data: [10, 5, null, 5, null, 4, 5, 3]. With this dataset I get the following error: Error: uncaught exception: [Exception... "An invalid or illegal string was specified" code: "12" nsresult: "0x8053000c (NS_ERROR_DOM_SYNTAX_ERR)" location: "file://highcharts.js Line: 59"].

With this dataset: data: [null,5,null,10,5,5,null,4,5,3] I get this error: Error: i[0] is undefined Source File: file://highcharts.js Line: 78

It looks like the library doesn't like to draw/render a single point and if the point is in the middle of a series it has even bigger issues. If you can provide any help on how to resolve this it would be extremely helpful.

Thank You!
jharrah87
 
Posts: 3
Joined: Wed Jan 13, 2010 12:30 am

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Wed Jan 13, 2010 10:53 am

You're right there's a problem with single points in splines. It should be fixed in the latest trunk: http://highcharts.com/js/prerelease/hig ... 1.2.src.js .
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby Luc » Fri Jan 15, 2010 5:16 pm

Can you give an example of how to use xAxis.dateTimeLabelFormats ?

plotOptions contains:
line: { pointInterval: 3600000 * 24, // one day
pointStart: Date.UTC(2008, 0, 1, 0, 0, 0), // 1 January 2008
}
and now the X-labels are displayed as "00:00". It should be displayed as "1 Jan", "2 Jan", etc.

And how can I set the pointInterval to one month instead of one day? So the X-labels are displayed as "Jan", "Feb"? I want to display some data which spans multiple years.
Luc
 
Posts: 6
Joined: Sun Oct 18, 2009 10:10 am

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Mon Jan 18, 2010 12:24 pm

Try this. It sets the date format for the hours to display the date.

Code: Select all
{
   second: '%H:%M:%S',
   minute: '%H:%M',
   hour: '%e. %b',
   day: '%e. %b',
   week: '%e. %b',
   month: '%b '%y',
   year: '%Y'
}
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Thu Jan 21, 2010 4:45 pm

Thanks rafabayona,

Currently this combination is not possible.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Thu Jan 21, 2010 5:05 pm

A new forum has been created for Highcharts user support. See viewforum.php?f=9.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9204
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Previous

Return to News

Who is online

Users browsing this forum: No registered users and 0 guests

cron