ZingChart – Now Rendering Charts in HTML5 Canvas, SVG, VML and Flash

By abegin | Published: May 10, 2011

The Most Compatible JavaScript Charting Library Available just got more compatible

Dear ZingChart customers, tinkerers and evaluators,

Just over a year ago we released the first charting library capable of rendering Flash and HTML5 Canvas. It was a big achievement, and even earned us a nod from Zeldman. Today, we’re raising the bar again with two additional render formats.

ZingChart now renders charts in Scalable Vector Graphics (SVG) and Vector Markup Language (VML) in addition to Flash and HTML5 Canvas. Those of you who are familiar with all the benefits and limitations of each technology already know how many headaches and hours you can save by building once and rendering across HTML5, SVG, VML and/or Flash. For those that don’t, here’s a quick overview:

  • Despite the fact that iPads, iPhones and some other mobile devices don’t run Flash, we’re not jumping on the anti-Flash bandwagon. Flash still reigns supreme for many charting needs – mobile is just not currently one of them.
  • While SVG is a solid technology for building interactive charts (and the sole technology selected by many other libraries’ HTML5 efforts), it’s not always the best solution. We’ll refer to the IE Blog for further reading.
  • Why use ancient VML, you ask? Internet Explorer 6, 7 and 8 render neither HTML5 Canvas nor SVG natively. And since many of you have been going the sans-Flash route for your data visualization, we didn’t find it helpful to force your users to take the performance hit of ExCanvas.

We’ve been working hard on making ZingChart as forward and backward compatible as possible, so you won’t need to worry about using multiple libraries or sacrificing the performance or functionality of your apps, websites and dashboards. We’ll keep fighting the format wars so you can keep building great products and projects with ZingChart.

Download ZingChart for SVG, HTML5 Canvas, Flash and VML.

Browse the Chart Gallery.

Share this post on twitter.

Happy Charting,
Andrew Begin
abegin@zingchart.com
858-490-5281

Posted in News and Updates | Tagged , , , , , | Leave a comment

Watch this Space – ZingChart News is Brewing

By abegin | Published: April 20, 2011

We’ve been quiet for a while now. Aside from keeping our tweet stream filled with 140-char bursts of demos and other fun dataviz news, we’ve been busy coding away on some great features and updates to push our charting library – and our customers’ applications – to their full potential. Along the way, we’re exploring the outer limits of what’s possible with JavaScript in desktop and mobile browsers, and finding some interesting data along the way.

We’re almost ready to share some of the updates and findings, so subscribe to our feed or follow us to be the first to know.

Interested in getting a first look? Give us a shout at sales@zingchart.com.

Posted in Uncategorized | Leave a comment

ZingChart How-to: Pinpoint Chart Data with Crosshair Guides

By abegin | Published: January 11, 2011

Many of our users have shown interest in our “guide”: feature that allows chart viewers to hover over areas of a visualization and see what series values are available for a given x-axis node (see traditional guide example here). The guide feature is a great one since it doesn’t require end users to hover over exact nodes to trigger tooltips, and it allows for viewing more than one tooltip at a time for comparing series values.

Well, we recently took our guides one step further and gave them a new name in the process. These hover-guides are to be called “crosshair-x”: and “crosshair-y”: and are new objects within the “graphset”:. They’re customizable, and they are awesome. Give them a try:

NOTE: If you ever want to dig deeper into JSON that drives one of our charts, just right click on it and select View Source.

The crosshair-x and crosshair-y features are fully customizable, from the lines to the tooltips (“value-label”:) to the labels for scale-x and scale-y (“scale-label”:). Here’s some sample code to try out to get you started:

(the following goes within “graphset”:[{}])

"crosshair-x":{
            "text":"%t Sales: %k: $%v",
            "line-color":"red",
            "line-width":"3px",
            "font-color":"purple",
            "font-weight":"bold",
            "value-label":{
               "alpha":0.6,
               "background-color":"green"
            },
            "scale-label":{
               "alpha":1,
               "background-color":"#0000ff",
               "font-color":"#ffffff",
               "font-weight":"bold"
            },
            "marker":{
               "size":"3",
               "background-color":"#ff0000",
               "border-color":"#00ff00",
               "border-width":"2px"
            }
         }

Happy Charting!

Mention us on Twitter or Email us with any questions!

- Andrew

Posted in How-to's | Tagged , , , , , , , , | 1 Comment