Highcharts - A new JavaScript charting library

[torstein.honsi]

Today I am happy to announce the release of Highcharts, a pure JavaScript charting library. Check out the new program at http://www.highcharts.com.

[daniel.rataj]

It looks like a pro solution. I'd like to integrate this charts into the Joomla! :)
Thanks for your work.

[torstein.honsi]

A Joomla solution would be great!

[roach]

This is freakin' SWEET! Exactly what I needed. Will there be a separate forum for users? I have a couple of questions...

edit: Been playing around with the Charts. And I'm blown away at how professional they look, and how easy it is to use! I'm having a couple of problems, however, so I wonder if you could steer me in the right direction:

1) I can't get the Zoom feature to work on Spline graphs (or I'm not using it properly, maybe?). Taking the example at http://www.highcharts.com/demo/?example ... me=default, and replace 'line' with 'spline'. The zoom stops working, and the "Reset Zoom" link also apparently breaks. Do I need to set some additional configuration?

2) On line graphs, after zooming, the legend no longer displays properly. That is, the series label is still displayed, but the legend border and series color disappear. Again, take the above example, and add a legend. Zoom in, and the legend disappears.

3) In the 'area' chart, when plotOptions.area.stacking = 'normal', I can't get the data to display properly. Taking the example at http://www.highcharts.com/demo/?example ... me=default, if you set series to:

[{name:"EXPLORER",data:[0,1,0,]},
{name:"FIREFOX",data:[0,6,6,0]},
{name:"SAFARI",data:[0,6,0,]},
{name:"OPERA",data:[0,1,0,]}]

The chart displays all sorts of weird polygons. This appears to be related to the order of the individual Series in the array. If you play around with them, you can get it to display correctly, but I'd like to be able to get the data from a JSON feed, so I'll never know what order they come in. Am I doing something wrong?


Thanks for the amazing work!

[torstein.honsi]

Thanks roach! A dedicated forum will be set up for the charts, but for now we can use this thread.

You found some bugs in Highcharts version 1.0.0. Congratulations

1. In highcharts.src.js, find the SplineSeries.drawLine function. Replace it with this:

Code: Select all

   drawLine: function(state) {
      var series = this,
         realSegments = series.segments;
      
      // temporarily set the segments to reflect the spline
      series.segments = series.splinedata || series.getSplineData();
      
      // draw the line
      LineSeries.prototype.drawLine.apply(series, arguments);
      
      // reset the segments
      series.segments = realSegments;   
   },

2. This fix is a bit more complicated, but I will find a solution before the next release.

3. Also a simple fix.

Instead of explaining it all in detail, if you're interested you can download the fixed file here: http://highcharts.com/downloads/next-highcharts.src.js

[roach]

gleeeeee! Awesome! I'll check it out ASAP!

Thanks Tor!

[roach]

Sorry to report that there still appears to be a problem with stacked area charts. I'm using xAxis.type="datetime" for this one. Here's the series:

Code: Select all

[
{name:"BABY",data:[[1257282000000,0],[1259830800000,0],[1259834400000,2],[1259838000000,1],[1259841600000,0],[1259845200000,5],[1259848800000,0],[1259875805225,0]]},
{name:"JAP",data:[[1257282000000,0],[1259794800000,0],[1259798400000,1],[1259802000000,0],[1259875805225,0]]},
{name:"LUV",data:[[1257282000000,0],[1259830800000,0],[1259834400000,1],[1259838000000,0],[1259841600000,0],[1259845200000,1],[1259848800000,2],[1259852400000,1],[1259856000000,0],[1259875805225,0]]}
]

Depending on whether, and how far, you zoom in, data points disappear or move around, and areas are not properly filled.

Mouse-overing a series in the chart seems to cause a "too much recursion" error, though I can't reliably reproduce this.

Also, moving the mouse from one data point to another in the same series doesn't appear to highlight the second data point, the way it does in an unstacked area chart.

Sorry to rain on the parade, Tor! Thanks for all your hard work and dedication!

[edit]: Also looks like attempting to "refresh" the chart by creating a new Highcharts.Chart with the same chart.renderTo property no longer works (I think this is new in the version you just posted). The new chart is just drawn right on top of the old one, on the same "canvas" (don't know how to explain this better). Is there some more accepted way to clear and re-create the chart canvas? Maybe I'm doing it wrong?

This issue may be related to the "too much recursion" error I mentioned, as the browser chrome also seems a little screwy after encountering that error.

[edit]: Also also, the "Reset Zoom" link appears on top of other page elements (such as drop down lists or jQuery UI datepicker).

[torstein.honsi]

Sorry to rain on the parade, Tor! Thanks for all your hard work and dedication!

No problem! Power users like yourself keep pushing my products forwards. It's in my best interest.

It seems like it is the uneven spacing of your datetime data that does the difference. If I put unevenly spaced data in a stacked area chart it always fails. I'll check this out.

Also looks like attempting to "refresh" the chart by creating a new Highcharts.Chart....

What if you do document.getElementById('container').innerHTML = '"" first? Anyway, one of the things on the roadmap for future releases is to add more dynamic features to Highchart. Dynamically update series, add points etc.

Also also, the "Reset Zoom" link appears on top of other page elements

Try setting a zIndex value on the container div itself.

[roach]

It seems like it is the uneven spacing of your datetime data that does the difference.

I'll try "normalizing" the data to even up the data points, and see if that works. When you think about it, this sort of makes sense as a requirement for the "stacked" chart types.

What if you do document.getElementById('container').innerHTML = '"" first?

Tried that. It doesn't appear to have any effect, strangely. Actually, now that I think about it, that [i]is[/s] strange! Maybe this is related to the "too much recursion" error I keep seeing? Like, I don't know, the browser renderer is running out of memory or something? (No idea what I'm talking about now...)

Try setting a zIndex value on the container div itself.

This worked. Thanks!

Another issue I'm having (with that same data series, using a plain "area" chart), is when I mouse over data points, the tooltip will display, but won't diappear when I move the mouse to another data point, and the "highlighted" data point doesn't change (the browser seems to freeze for a moment or two, and sometimes I get a javascript error "point is undefined". Firebug shows this:

Code: Select all

point is undefined
refresh(Object name=point, Object chart=Object options=Object name=BABY visible=true)2 (line 2457)
onmousemove(mousemove clientX=803, clientY=101)2 (line 2048)
anonymous(mousemove clientX=803, clientY=101)
(2475 out of range 115)


Here's some more info on that "too much recursion" error I keep seeing (again from Firebug):

Code: Select all

setStyles(div, Object left=183px top=379px)2 (line 585)
move(185, 381)2 (line 2551)
move(185, 381)2 (line 2557)
move(185, 381)2 (line 2557)
move(185, 381)


[edit]: Hmm... Seems like bbcode is turned off. Any idea how I turn that on? Sorry about all the bbcode tags...

[roach]

I don't know if this helps, but It looks like the "too much recursion" error is originating from this line:

extend(el.style, styles);

(line 603 in function setStyles (el, styles))

[gibson]

Really nice charting library, looks very nice and it's easy to use.

I don't know if this should be called a bug, but anyway..
When I have a chart with 3 series and need to define 3 colors for this i do it like this:
colors: [
'#7cac44',
'#cc2b2b',
'#ecb25f'
]

The problem is that i load the highchart js-code from .NET code-behind and evaluate and execute it on the callback in js. This works great, but when i click my "make chart"-button a second time, the series will begin to take the color from the default ones instead of the one i defined. A workaround was to repeat the colors 3 times so all 9 defaults where used. But this doesn't work if the number of series can't be multiplied by 3 (it do work but then serie 1 for example will have different colors everytime).
Is there any solution to this? I'm not sure why this happens, if there is some sort of global object that needs to be reseted each time i add the chart so the colors will start on the first one i defined..

Another really cool thing would be like you can do in google chart api, you only define one color and if there are more than 1 series Highchart could create the rest of the colors in the same shade.
Example: http://chart.apis.google.com/chart?cht= ... chs=320x90

[roach]

Quick update on the "bugs" that I've found so far:

Stacked Area:
Zooming appears to be broken, in the sense that all the data points disappear when you zoom in. Also, all series have to have the same series of "x" values, which kind of makes sense for stacked area, so maybe not a bug, per se.

All line/area types:
In fact, Mouse-over the data points will ALWAYS attempt to show markers, regardless of what is specified in plotOptions.*.states.hover.marker or plotOptions.*.marker.

Any chart type:
Chart legend labels (series names) appear at a higher z-order than tooltips, which usually causes tooltips that overlap the legend to become unreadable.
Mouse-over the data points will sometimes "highlight" them (as defined in, say, plotOptions.area.states.hover), and sometimes not. In both cases, the browser appears to "hang" for a second, and sometimes I'll see a "too much recursion" error in firebug. This problem is worse in the new version, for some reason. This happens in line, Area, stacked area and Pie chart types.

Date formatting:
Nitpicking a bit now, but the 12-hour time formatting for hours should probably show 12:01 pm, for example, rather than 00:01 pm.

[torstein.honsi]

@gibson:

Where do you set the colors? The 'correct' way would be using Highcharts.setOptions before any of the charts are created.

Code: Select all

Highcharts.setOptions({
   colors: [
      '#7cac44',
      '#cc2b2b',
      '#ecb25f'
   ]
});

Automatically detecting color variations is a good idea for pie and column/bar plots. I'll keep that in mind.

[torstein.honsi]

@roach:

Thanks for your continued patience and valuable testing. I'll publish a bugfix release today or tomorrow, and most of the issues you discovered will be fixed. Keep'em coming!

Stacked Area:
Fixed the zoom issue. On the equal spacing issue, I think this has to be this way. If not, we have to interpolate a fictive point for every x axis point in other series.

All line/area types:
Fixed the single point hover status. Set plotOptions.*.marker.states.hover.enabled to false. The difference is that plotOptions.*states.hover.marker applies to all markers in a hovered series.

Legend issue, any chart type:
The legend zIndex is a problem. The tooltip is behind the transparent image map, but the legend has to stay on top to be clickable. I have given this some thought, and I'll try a dynamic zIndex solution where the legend is moved to the front only when the mouse is over the legend square. But this has to wait for now.

Date formatting
You're right. Fixed.

[gibson]

I was setting the colors in the initialization of the chart..
I've tried the way you suggested now but the problem is if i have 3 buttons that creates 3 different graphs and all with different colors. The colors doesn't seem to reset when setting this option.

I'm doing it like this now:

Highcharts.setOptions({
colors: [
'#7cac44',
'#cc2b2b',
'#ecb25f'
]
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'DivChart'
}
.......
}

And this works perfectly the first time, but the second time i execute the code but with different colors, the first ones will still be there. Im getting the highchart js-code with ajax from .NET code-behind and then do eval(graphstring) in js.