Archive for the Tips and Tricks

Advices by Edward Tufte: Importance of Context for Charts

July 29th, 2011 by Margaret Skomorokh

We continue posting tips from Edward Tufte‘s works. In The Visual Display Of Quantitative Information, he puts a lot of attention to the problem of lying in charts.

It is assumed that charts are aimed to show the truth about data in the most demonstrative way, but this demonstrativeness is a two-edged weapon. Owing to some tricks – or mistakes – data may seem not what they are. One of them is the lack of context.

According to Tufte,

To be truthful and revealing, data graphics must bear on the question at the heart of quantitative thinking: “Compared to what?” The emaciated, data-thin design should always provoke suspicion, for graphics often lie by omission, leaving out data sufficient for comparisons.

The author gives an example of such a graphic – it shows the number of traffic deaths before and after stricter enforcement by the police against cars exceeding the speed limit:

A few more data points make the situation much clearer:

A different context would cause a very different interpretation:

Comparison to adjacent states shows that the crackdown on speeding decreased the number of traffic fatalities not only in Connecticut:

Of course, if one needs to distort the meaning of data, concealing the context may be a relatively useful tip, but in other situations, it is definitely a mistake. The principle formulated by Edward Tufte is:

Graphics must not quote data out of context.

Data Design Advices by Edward Tufte

June 21st, 2011 by Margaret Skomorokh

Edward Rolf Tufte is an American statistician and professor emeritus of political science, statistics, and computer science at Yale University. He is noted for his writings on information design and as a pioneer in the field of data visualization. Here is his website: http://www.edwardtufte.com/tufte/.

We appreciate his works very much, especially The Visual Display Of Quantitative Information, which we recommend to any developers or designers.

As it says,

Graphical displays should

  • show the data
  • induce the viewer to think about the substance rather than about methodology, graphic design, the technology of graphic production, or something else
  • avoid distorting what the data have to say
  • present many numbers in a small space
  • make large data sets coherent
  • encourage the eye to compare different pieces of data
  • reveal the data at several levels of detail, from a broad overview to the fine structure
  • serve a reasonably clear purpose: description, exploration, tabulation, or decoration
  • be closely integrated with the statistical and verbal descriptions of a data set.

AnyChart is an instrument. We give the opportunity to create many different charts in many different ways, and this powerful instrument should be used correctly.

Speaking of “encouraging the eye to compare different pieces of data”: compare a table and a graphical representation of the famous Anscombe’s Quartet:

Anscombe’s Quartet Table
I II III IV
x y x y x y x y
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71
9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84
11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47
14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04
6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25
4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50
12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56
7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89

Anscombe's Quartet Charts by AnyChart

As you can see, in this case the graphical representation speaks loudly, whilst the table remains silent.

We will go on posting here some important tips from Edward Tufte’s books, but after all, the most helpful thing is just considering carefully the way to visualize your data.

Printing Flash Content in Firefox

February 24th, 2011 by Margaret Skomorokh

Flash and Firefox have always had a lot of compatibility problems – for instance, Flash content can’t be printed in Firefox.

A long time ago we found a workaround and published it as a free library. Three years have passed, but the bug still exists, and the fix is still relevant.

So here it is – a small library that allows to achieve correct Flash content printing in Firefox:
http://code.google.com/p/flash-print-fix/

For example, that’s how a Flex application is printed in Firefox:

And that’s how it looks like with the fix applied:

The idea is very simple:

1. Get a PNG screenshot.
2. Encode the PNG file in base64 string.
3. Add a picture with src=”data:img/png;base64,…” mce_src=”data:img/png;base64,…” to the page.
4. In CSS, specify to hide Flash while printing and to show the picture:

@media screen.flashScreenshot { display: none; }
@media print.printableFlashObj { display: none; };
.flashScreenshot { display: block; border: 0; outline: none; }

AnyChart has discovered bug in Skype. Skype promises to fix it ASAP.

July 27th, 2009 by Margaret Skomorokh

We were getting strange bug reports during several years, and the main idea of that reports is the fact that memory in Internet Explorer 6/7 with Flash Player 9/10 leaks when user refreshes the page. We have spent a lot of time and money trying to locate it, we lost a lot of clients. It was a nightmare for everybody in our support and development teams. We have blamed Adobe and Microsoft, but we never could even think that it is not their fault. And today the miracle has happened. We have tested on two different PCs: one of of them had the memory leak, the second one did not. And the reason of the problem was… Internet Explorer Skype add-on.
Read more »

Using AnyChart with JSON and JavaScript

June 6th, 2008 by Alex Batsuev

Until now AnyChart was able to get data only in XML format. However it’s not always convenient and requires at least knowledge of XML.

Now we make the life of AnyChart users easier and add the ability of handy Flash chart implementation in JavaScript. Now AnyChart.js has a new method – setJSData, that allows you to set parameters and data to the chart as a JavaScript object.

You can view a simple example here:
http://6.anychart.com/tips_and_tricks/xml-and-js/js-sample.html

How to create an object with settings and data:An object with settings and data has the same structure as AnyChart XML. XML nodes and attributes are properties. Nodes, that can be repeated (for example, <point />) are arrays.

For example:

var chartData = {
 charts: {
   chart: {
     chart_settings: {
        title: { text: "Chart Title" }      },
      data: {
       series: [
         point: [{name: "pt1", y: 12}, {name: "pt2", y: 23}]
       ]
     }
   }
 }
}

Or:

var chartData = {}
chartData.charts = {};
chartData.charts.chart = {};
chartData.charts.chart.chart_settings = {};
chartData.charts.chart.chart_settings.title = {};
chartData.charts.chart.chart_settings.title.text = "Chart Title";
chartData.charts.chart.data = {};
chartData.charts.chart.data.series = [];

var seriesObj = {};
seriesObj.point = [];
seriesObj.point.push({name: "Pt1", y: 12});
seriesObj.point.push({name: "Pt1", y: 23});

chartData.charts.chart.data.series.push(seriesObj);

Object’s structure is equivalent to XML structure. The description of XML you can find here:
http://6.anychart.com/products/anychart/docs/xmlReference/index.html

Setting chart description object to AnyChart is done using setJSData method.

Also we’ve created several examples of using setJSData, including JSON example:

1. An example of object-creation using JavaScript:http://6.anychart.com/tips_and_tricks/xml-and-js/js-sample.html

2. An example of JSON-creation forming: http://6.anychart.com/tips_and_tricks/xml-and-js/json-sample.html

3. An example of JSON-data loading from the text file using AJAX:
http://6.anychart.com/tips_and_tricks/xml-and-js/json-ajax-sample.html

Creating custom design-time preview for Flex 3 components

February 29th, 2008 by Alex Batsuev

Sometimes it is necessary to create custom preview of the component in the Flex Builder “Design” view.
It is undocumented feature 😉
I’ve found very interesting class in the Flex SDK 3: mx.core.UIComponentGlobals.

This class contains static field designMode:Boolean.

Just check that field in your component code.
You can download example component with the source code from here:
http://6.anychart.com/tips_and_tricks/designMode/DesignModeComponent.zip

Also you can download the usage sample:
http://6.anychart.com/tips_and_tricks/designMode/DesignModeComponentSample.zip

Running in the Flex Builder “Design” mode it shows AnyChart image. But when it runs in the flash player it shows only gray rectangle.

New article “Creating interactive digital dashboards from scratch” by Tim Loginov

October 29th, 2007 by Anton Baranchuk

http://6.anychart.com/products/anychart/docs/creating-dashboard-from-scratch.php

Like the instrument panel in a car, the computer version-dashboard displays critical info in easy-to-read graphics, assembled from data pulled in real time from corporate software programs. Dashboards deliver the detailed information needed by everyone for day-to-day decision-making. Simple yet powerful analysis allows any user to discover vital trends in business performance and continuously monitor the performance of your organization at all levels and in real time.

Dashboards provide your business with real-time business intelligence across all areas of your company – from accounting and sales, to fulfillment and support. The Dashboard offers instant snapshots of your designated key performance indicators (KPIs), and provides real-time trend graphs and ad hoc reports appropriate for each role in your business. With direct drill-down capability, you can move from a summary level directly to greater detail, and you can see real-time information to proactively manage for better results.

While most enterprise dashboards in production are probably still custom built, we provide you a new way of dashboard creation – using AnyChart Flash Component Dashboard mode. Since all charts created by AnyChart Flash Chart Component are rendered using a single swf file it is very easy to place such swf file to your web-site and provide it with an XML configuration file that configures a dashboard.

In this article we will create step-by-step a sample dashboard, at first – we will make a static one – that can be used for presentation purposes, and then – we will add interactivity, which makes dashboard a really useful and modern tool of business data analytics. We’ll go thought all steps from “paper-design” created by hand to the interactive Flash dashboard.

paper-design result

Read it here http://6.anychart.com/products/anychart/docs/creating-dashboard-from-scratch.php

This article was written by Tim Loginov as part of AnyChart Documentation.

ACPrintManager 0.1 – library for content control of printing from a browser with some bug fixes for Firefox and Internet Explorer

October 27th, 2007 by Alex Batsuev

As I promised I’ve uploaded source code for solving the problem with flash content printing in Firefox and an example of its usage in Flash.

FFPrintFix library was extended and now it is called ACPrintManager. Now it is not only bug fix for printing, but also content control for printing from a browser.

See all details here:
https://www.anychart.com/blog/projects/acprintmanager/

Solving problem with printing Flash content in Firefox browser

September 23rd, 2007 by Alex Batsuev

I will let out a secret: we have solved a problem with printing Flash/Flex applications in Firefox 🙂

Here is the article how you can use it. 😉

UPD1: https://www.anychart.com/blog/2007/10/27/ac-print-manager/
UPD2: https://www.anychart.com/blog/projects/acprintmanager/
UPD3: LGPL license

Read more »

How to add Adobe Macromedia Flash content into Microsoft PowerPoint presentations

September 23rd, 2007 by Alex Batsuev

Integrating a Flash movie inside PowerPoint allows vector animation and interactivity to be added to a PowerPoint presentation. This strategy can be used to increase the performance. And it is really easy 😉

Here is a simple tutorial how to embed AnyChart into PowerPoint presentations:
Using AnyChart with PowerPoint presentations

add-flash-to-powerpoint-screen

Categories
Archive