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 emptying the container before re-initializing the chart:

Code: Select all

document.getElementById('DivChart').innerHTML = "";
More intelligent updating functions are coming soon.
Torstein Hønsi
CTO, Founder
Highsoft
gibson
Posts: 2
Joined: Sun Dec 06, 2009 10:02 am

Re: Highcharts - A new JavaScript charting library

I'm doing that already.
But actually i'm using 3 seperate divs for the 3 graphs.. It works fine for the graph that was first initiliazed, setting innerHTML = "" and then run the script. But when trying to load the other graphs in the other divs, i keep getting the same colors all the time.
Any ideas?

If not, maybe i could set up a test htm-file to show what i mean.
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

If not, maybe i could set up a test htm-file to show what i mean.
That would be great.
Torstein Hønsi
CTO, Founder
Highsoft
User avatar
lossendae
Posts: 1
Joined: Tue Dec 08, 2009 4:24 pm

Re: Highcharts - A new JavaScript charting library

Hello,

You've done an amazing work with this charts lib.

I've some questions regarding further release:

- Do you plan to provide to support native JSON support instead of only array (I mean without using the dataParser, let's say with a parameter to precise what kind of data is supplied json, array, xml...)?

- Can you give me simple example to parse json with dataParser parameter. For example how can i retreive name and qty for a pie from a json like this one: ({"totalItems":"3","Results":[{"name":"item1","qty":"20"},{"name":"item2","qty":"50"},{"item3":"qty":"30"}]})

- Will you devellop native support for other libs like ExtJS in the future?

Even if you only plan to stick with jQuery, i'll work with your lib since it's easy and less cumbersome to work with than the flash charts that i've tried. Not to mention that the output is really beautiful.

Regards,
lossendae.
gibson
Posts: 2
Joined: Sun Dec 06, 2009 10:02 am

Re: Highcharts - A new JavaScript charting library

[quote="admin"][quote]If not, maybe i could set up a test htm-file to show what i mean.[/quote]
That would be great.[/quote]

Here is an example file.
http://smartkalkyl.se/highcharts.htm

Chart 1: Red, green and orange is defined with the setoption function, but it doesn't work very well.
The "draw chart 2" doesn't work very good at all. It should show 3 grades of grey, but the series gets messed up and the colors doesn't work.

Any ideas?
Thank you for your help!
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

@gibson:

I think it was the shorthand color notation that messed it up for you. Currently Highcharts needs 6-digit HEX codes. See http://www.highcharts.com/cases/smartkalkyl.htm.

Code: Select all

Highcharts.setOptions({
        colors: [
            '#bbbbbb',
            '#cccccc',
            '#eeeeee'
        ]
    });
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

@lossendae:

Highcharts need the data on a specific format as seen under http://highcharts.com/ref/#point. But once you have the data in a JSON format, it is easy for a JavaScript programmer to convert it to Highchart's required format. In your case, the following dataParser does it:

Code: Select all

					dataParser: function(data) {
						// The real data are in the Results member
						data = data.Results;
						// Highcharts needs y, not qty
						for (var i = 0; i < data.length; i++) {
							data[i].y = parseFloat(data[i].qty);
						}
						return data;
					}
You can see it live at http://highcharts.com/cases/lossendae.htm. As you see, your data structure has to be interpreted, and there's no way Highcharts can guess that for example your real data are stored in the Results member or that the values are labeled "qty".

Ext JS is also built on jQuery or MooTools, exactly like Highcharts, so it will not come as a replacement of jQuery. But I assume we will see wrapper classes for common platforms in the future, either written by me or by third parties.
Torstein Hønsi
CTO, Founder
Highsoft
gibson
Posts: 2
Joined: Sun Dec 06, 2009 10:02 am

Re: Highcharts - A new JavaScript charting library

admin wrote:@gibson:

I think it was the shorthand color notation that messed it up for you. Currently Highcharts needs 6-digit HEX codes. See http://www.highcharts.com/cases/smartkalkyl.htm.

Code: Select all

Highcharts.setOptions({
        colors: [
            '#bbbbbb',
            '#cccccc',
            '#eeeeee'
        ]
    });
Thank you very much for your help. This was the answer for one problem (defining #eee instead of #eeeeee) but not the first one. But when i saw it working on your version it gave me a clue that maybe i had an outdated version of the library. So i pointed the src to your online version and everything worked perfectly! I guess you must have done something the last few days that solved this problem with the colors. Thanks again.
I will definataley buy a licens for my website when i have converted my google charts to highcharts :)
User avatar
lossendae
Posts: 1
Joined: Tue Dec 08, 2009 4:24 pm

Re: Highcharts - A new JavaScript charting library

@admin

Thanks for the clarification.

I did play with Highcharts yesterday and come up with a similar code to yours to convert json string that do not use name and y value. The JSON is coming from an ExtJs datastore.

Code: Select all

dataParser: function(data) {
	result = [],
	jQuery.each(data, function(i, val) {
		result[i] = [val.name, parseInt(val.qte)];
	});
	return result;
},
Now, i'll retry to use the lib only with ExtJS to avoid loading jQuery when it's not really needed.
Yesterday, the libs throw me an error each time i tried to use Highcharts without jQuery loaded, that's why i asked about compatibility.
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 for reporting! You can fix it by setting text-align:left on the container itself. I've updated the highcharts.js file so that this won't happen in future releases.
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 Sam,

In the tooltip formatter, return false for the series where you want to disable the tooltip.

Code: Select all

formatter: function() {
	if (this.series.name == 'Something') return false;
}
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

This will be fixed in version 1.1, hopefully shipping today.

From now on, the imagemap area tracking the mouse for a hidden series will be completely removed, instead of just made nonresponsive. So it won't block for other series.
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

Bart,

The dataParser function itself is not documented, because it is actually not part of the API. It is a custom function tailored to this specific table and use general HTML parsing techniques.

There's a more general version at http://highcharts.com/studies/table-parser.htm. Using that, you should be able to build a chart with x-axis categories and everything from a single table.
Torstein Hønsi
CTO, Founder
Highsoft
buz
Posts: 8
Joined: Tue Dec 22, 2009 9:06 am

Re: Highcharts - A new JavaScript charting library

ExtJS intergration.

I'm currently trying to integrate Highcharts with ExtJS. I want it to be in depended of jQuery or MooTools, but I'm having a problem with the Events. What does the load event call to actually display the bars/lines?

btw. The Pie-chart is working, only the lines/bars/columns are not.. (The grid is shown)

Thanks in advance!

Daniel
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,

Highcharts can't work without either jQuery or MooTools. To make it work, you have to create your hand-made versions of all function listed under if (win.jQuery).
Torstein Hønsi
CTO, Founder
Highsoft

Return to “News”