buz
Posts: 8
Joined: Tue Dec 22, 2009 9:06 am

Re: Highcharts - A new JavaScript charting library

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 9:06 am

Re: Highcharts - A new JavaScript charting library

For other people that want to see/use highcharts with ExtJS i've provided a sample here: http://www.i286.org/examples/ExtSample.html
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

@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
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Brilliant! Thanks!
Torstein Hønsi
CTO, Founder
Highsoft
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

@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
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

@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
alexpp
Posts: 3
Joined: Sat Jan 09, 2010 5:26 pm

Re: Highcharts - A new JavaScript charting library

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
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

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
jharrah87
Posts: 3
Joined: Tue Jan 12, 2010 10:30 pm

Re: Highcharts - A new JavaScript charting library

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!
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

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
Luc
Posts: 6
Joined: Sun Oct 18, 2009 8:10 am

Re: Highcharts - A new JavaScript charting library

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.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

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
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Thanks rafabayona,

Currently this combination is not possible.
Torstein Hønsi
CTO, Founder
Highsoft
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

A new forum has been created for Highcharts user support. See http://highslide.com/forum/viewforum.php?f=9.
Torstein Hønsi
CTO, Founder
Highsoft

Return to “News”