PowerCharts

PowerCharts is a set of advanced charting widgets for usage in specialized applications like network diagrams, performance analysis, hierarchical structures, stock prices and financial planning.

Chart Types

PowerCharts offers 16 different chart types each with their own specialized applications:

1. Drag Node Chart

   Powerful diagramming tool for network diagrams & process flow diagrams

2. Heat Map Chart

   Tabular representation of complex data with user-defined color ranges

3. Multi-Axis Line Chart

   Advanced line chart with multiple axes for comparing multiple parameters

4. Interactive Candlestick Chart

   Highly interactive chart for plotting stock data and commodity prices

5. Waterfall Chart

   Shows the cumulative effect of positive and negative values on an initial value

6. Drag-able Charts

   Offers visual modification of the plotted data simply by dragging the data plots

7. Multi-Level Pie Chart

   Modern method for displaying hierarchical relationships

8. Box and Whisker Chart

   Display the spread of a batch of data using median, quartiles, limits, mean and deviations

9. Logarithmic Charts

   For plotting very large and very small values on the same chart on a logarithmic scale

10. Radar (Spider) Chart

    Effective tool for comparing multiple entities based on different features

11. Spline Charts

    Similar to a line chart except that it draws a fitted curve through the data points

12. Step Line Chart

    Specialized line chart with vertical and horizontal lines to connect data points

13. Select Scatter Chart

    Scatter Chart where data points can be visually selected & processed

14. Inverse Axis Charts

    Plot data on an inverted scale, like ranks and race timings

15. Error Charts

    Shows the extent of possible error (or deviation) in data using I-shaped bars

16. Kagi Chart

    For noise free analysis of equity/commodity prices

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0) (0)

Posted by 홍반장

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0) (0)

Posted by 홍반장

iPad Orientation CSS (Revised)

It doesn’t take much foresight to anticipate that with the rise of Natural User Interfaces (NUIs) like the iPhone and iPad, UI designers will have a greater responsibility to optimize for orientation-based contexts. As such, it’s quite prescient that today, the folks at Cloud Four demonstrated how to serve up stylesheets based on device orientation.

Since I have a feeling I’ll be using this quite a bit in the future, I wanted to build on Cloud Four’s work and find a way to alleviate the following issues:

1. Extra HTTP requests
2. Not iPad-specific
3. Lack of reusability

So, without further ado, here’s my proposed revision to the iPad orientation CSS:

<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .portrait { display: none; }
}

<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>

As you can see, I’ve also changed the markup in a predictable way. An explanation of the changes and the reasoning behind them can be found below.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0) (0)

Posted by 홍반장

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0) (0)

Posted by 홍반장

iPad CSS Layout with landscape / portrait orientation modes

The iPad has finally launched in Australia today, hooray! I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. But in the mean-time I will continue using the iPad emulator that comes with the iPhone SDK.

To celebrate the launch of the iPad I have built a special iPad optimised website layout that uses pure CSS to change layouts in the portrait and landscape orientation modes. The layout can be downloaded for free at the bottom of this article or from my iPad demo page. Here is a basic diagram of how the two orientations look:

In Landscape mode the layout is in two columns. The main content is in a wide left column and three side sections are stacked vertically in a narrow right column. When you rotate the iPad to the portrait orientation the layout changes to a single column design. In portrait mode the main content fills the full width of the screen and the three side content areas are positioned horizontally as three columns under the main content.

In both orientations there is a header at the top and a footer at the bottom. These both change in width from 1024 pixels wide in landscape, and 768 pixels wide in portrait. See my demo page for a more detailed diagram with pixel dimensions. Below are screenshots of my demo layout in the iPad emulator:

How does it work?

The first thing I do is lock the layout's resolution to a 1:1 ratio so that each pixel exactly lines up with the pixels in the iPad's screen. I do this with the following META tag:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

Locking the layout to a 1:1 ratio will prevent the zooming-in and out that normally occurs when the iPad is rotated (normally, landscape mode is more zoomed-in because the width of the webpage is displayed across 1024 pixels, as opposed to portrait mode when there are only 768 pixels available).

Next I combine this with some CSS rules that change the layout in portrait and landscape modes. I do this by writing all my landscape styles normally then overwriting some of them with the @media rule at the bottom of the CSS file when the device is in portrait mode. Here is a cut-down version of the CSS:

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}

The method above works beautifully for changing the layout for the two orientations without JavaScript. Check out my iPad layout demo or download the demo files and try it for yourself.

Demo Download (ipad-css-layout.zip - 41kb)

I hope you enjoyed this post. If you are reading this on your brand new iPad then... lucky you! :)

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0) (0)

Posted by 홍반장

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

(0) (0)

Posted by 홍반장