Highcharts - A new JavaScript charting library

[torstein.honsi]

Try emptying the container before re-initializing the chart:

Code: Select all

document.getElementById('DivChart').innerHTML = "";

More intelligent updating functions are coming soon.

[gibson]

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]

If not, maybe i could set up a test htm-file to show what i mean.

That would be great.

[lossendae]

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]

[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]

@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.honsi]

@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.

[gibson]

@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 :)

[lossendae]

@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]

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.honsi]

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.honsi]

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.honsi]

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.

[buz]

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]

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).