It is currently Fri Jul 25, 2014 12:38 pm Advanced search

Highcharts - A new JavaScript charting library

News and announcements from the author.

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Mon Dec 07, 2009 3:13 pm

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby gibson » Mon Dec 07, 2009 7:10 pm

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.
gibson
 
Posts: 2
Joined: Sun Dec 06, 2009 12:02 pm

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Tue Dec 08, 2009 10:51 am

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby lossendae » Tue Dec 08, 2009 6:37 pm

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.
User avatar
lossendae
 
Posts: 1
Joined: Tue Dec 08, 2009 6:24 pm

Re: Highcharts - A new JavaScript charting library

Postby gibson » Tue Dec 08, 2009 11:13 pm

[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!
gibson
 
Posts: 2
Joined: Sun Dec 06, 2009 12:02 pm

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Wed Dec 09, 2009 10:52 am

@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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Wed Dec 09, 2009 11:08 am

@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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby gibson » Wed Dec 09, 2009 12:22 pm

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 :)
gibson
 
Posts: 2
Joined: Sun Dec 06, 2009 12:02 pm

Re: Highcharts - A new JavaScript charting library

Postby lossendae » Wed Dec 09, 2009 12:39 pm

@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.
User avatar
lossendae
 
Posts: 1
Joined: Tue Dec 08, 2009 6:24 pm

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Fri Dec 11, 2009 12:43 pm

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Mon Dec 14, 2009 10:12 am

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Wed Dec 16, 2009 10:49 am

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Thu Dec 17, 2009 10:03 am

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highcharts - A new JavaScript charting library

Postby buz » Tue Dec 22, 2009 11:15 am

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
buz
 
Posts: 8
Joined: Tue Dec 22, 2009 11:06 am

Re: Highcharts - A new JavaScript charting library

Postby torstein.honsi » Tue Dec 22, 2009 2:11 pm

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 Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9185
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

PreviousNext

Return to News

Who is online

Users browsing this forum: No registered users and 1 guest