Archive for the Tips and Tricks

AnyChart JavaScript Charts: Integration Samples

December 25th, 2015 by Margaret Skomorokh

AnyChart JavaScript Charts: Integration with PHP, MySQL, iOS, SQLite, Clojure, Clojurescript, NodeJs, and MongoDB

AnyChart JavaScript charts run on any platform and with any database. To make integration of AnyChart into your application as easy as possible, we have created several samples demonstrating how to integrate our component into the most popular platforms and databases. With the help of these tutorials, you will be able to start developing a prototype of your application right now.

Below you will find the samples that are currently available. Please note that all of them are repositories on GitHub, distributed under an Apache 2.0 License, and you can fork and change them as you like. Do not hesitate to pull requests or raise issues if you want to suggest an improvement or think that there is a bug in the code. We are going to expand this list and improve the samples, but if right now you are interested in a particular integration not listed here, please contact us.

AnyChart JavaScript Charts Simple PHP Integration Sample

 Simple PHP Integration Sample
PHP is one of the most popular tools for creating web applications and web pages. If you are a beginner developer or you need the simplest base for your charting application, this sample will help you. It shows Bar, Column, and Pie JavaScript charts created with PHP and displayed on a web page using AnyChart.

AnyChart JavaScript Charts PHP Integration Sample, Based on Slim

 PHP Integration Sample, Based on Slim
If you are using the MySQL database (which is widely used with PHP applications) and the Slim PHP framework (a very convenient PHP microframework), this sample will help you to create a proof of concept of your charting application in a matter of minutes. You will see how to get data from MySQL, convert them into a format that can be used with AnyChart, and display as interactive JavaScript charts. You will also learn how to update your data without refreshing the page and how to customize different chart types, tooltips, labels, axes, and so on.

AnyChart JavaScript Charts iOS Objective-C Integration Sample

 iOS Objective-C Integration Sample
Nowadays iPhone and iPad are used not only for making phone calls and entertainment. Phones and tablet computers are the integral part of an entrepreneur’s everyday life, and iOS apps serve business. Though AnyChart is a JavaScript charting library, you can easily combine it with the native Objective-C code and make any iOS app display big or small data as charts, with all great big and small features of AnyChart: from continuous real-time updates and multi-level drill-downs to the ability to customize the color of a particular axis label. Run our sample charting application in XCode, and you will get an iOS project where data are stored in the SQLite database management system and displayed as HTML5 charts on the screens of mobile devices.

AnyChart JavaScript Charts Clojure and ClojureScript Integration Sample

 Clojure and ClojureScript Integration Sample
Clojure is a dialect of the Lisp programming language, which is a very popular choice for creating server/backend applications. ClojureScript and the Postgresql database together make an excellent combination of tools, suitable for the most wide range of applications including data visualization solutions of any kind. Today there is rarely just one or two charts in an application – usually you see a dashboard with many interrelated elements. In this sample you will find a sales dashboard with such common chart types as Line, Bar, and Pie, and you will be surprised to realize how well AnyChart’s ideology fit the principles of Closure: simple modules will allow you to quickly get all the things that users expect to see on an up-to-date HTML5 website.

AnyChart JavaScript Charts NodeJs and MongoDB Integration Sample

 NodeJs and MongoDB Integration Sample
The NoSQL database is an integral part of the modern world, and MongoDB is a good choice if you decide to go this way. And when MongoDB is in play, a Node.js server is a logical choice to go with. So, if you are breaking the ground with your scalable application where run-time performance is paramount, use our sample to see how AnyChart JavaScript charts fit into this environment (and they fit perfectly). We are confident that you will not be disappointed with AnyChart in this case – its client-side performance will compliment your server-side performance, and users will be glad to see their data seamlessly updated on-the-fly.

AnyChart charting library is a number one choice for anyone who is going into the world of data visualization and wants to excel in the fast-evolving world of BI solutions. When we develop our charts, one of our aims is providing users with the best result in any browser, but we also do our best to make the process of creating and supporting applications easier for developers.

We maintain a clear system of versions, each version being saved at AnyChart CDN. The API of each version is available at https://api.anychart.com/, and the documentation is available here: https://docs.anychart.com/. There are thousands of samples in our API and documentation, and you can see and try any method and any feature of AnyChart JavaScript charts on our website. Still, if there is no answer to your question neither in API, nor in our documentation, nor in the FAQ, just contact AnyChart Support Center, and our engineers will solve your problem.

We hope that these integration samples will help you to jump-start your project, and you will become one of the lucky ones who enjoy the power and flexibility of our JavaScript charts.

PS: If you are already convinced and none of the standard licenses fits your needs, our sales team is dying to hear from you and work out the best deal ever. You will be amazed to discover how fair our Support, OEM, and SaaS contracts are.

Read more »

AnyChart and Java Standard Widget Toolkit (SWT)

September 15th, 2015 by Timothy Loginov

Overview

The Standard Widget Toolkit (SWT) is a graphical widget toolkit for use with the Java platform. It was originally developed by Stephen Northover at IBM and is now maintained by the Eclipse Foundation in tandem with the Eclipse IDE. It is an alternative to the Abstract Window Toolkit (AWT) and Swing Java GUI toolkits provided by Oracle as part of the Java Platform.

We have created a basic sample to show how you can work with AnyChart in an SWT application.

Contents and Launching

The sample file (click to download) contains the ‘src’ folder with the source code and the ‘jar’ file. You can run the file using the java -jar <jar_file_name> command.

In Mac OS X you can launch the sample like this:
java -XstartOnFirstThread -jar anychart-java-example.jar

In Windows you can do that like this:
java -jar anychart-java-example.jar

Description

This sample shows a basic chart with five points. It listens for the chart draw and point hover events, and logs them into the textArea on the page; anychart.min.js is loaded from AnyChart CDN.

The ‘Add Random Point’ button keeps adding random points until the total point count is 20 and after then removes one point before adding a new one.

Source code is rather simple and self-descriptive, and there are only two things you should look at:
The static String myScript variable defines what script is executed when button is clicked;
The static String createHTML() method generates HTML and puts it into the browser window.

Summary

AnyChart and Java Standard Widget Toolkit (SWT) Sample: anychart-java-swt-example.zip
AnyChart Download: https://www.anychart.com/download/
AnyChart Documentation: https://docs.anychart.com/
AnyChart API: https://api.anychart.com/
AnyChart Overview: AnyChart Web Charts JavaScript Framework

Later we will extend the sample, add more features, and show how to achieve more with AnyChart in Java environment. We also have a number of other samples coming up.

If you created anything with AnyChart in Java applications and are ready to share – please drop us a line in comments, on Facebook, Twitter, or via email (support@anychart.com).

Saving AnyChart 6 Charts as Images in Oracle APEX

September 2nd, 2015 by Timothy Loginov

NOTE: This article tells how to set up the script in Oracle APEX and doesn’t affect AnyChart customers who use AnyChart outside of Oracle APEX.

Oracle Application Express is a web-based application development tool integrated with all editions of Oracle Database. It enables users with limited programming skills to easily develop secure web applications that run inside their Oracle Database, and scale to support tens, hundreds, or thousands of users.

Since Oracle Application Express Release 3.0, AnyChart is used as a charting engine (you can read about this in a success story: Oracle Chooses AnyChart Solution for Latest Release of Oracle® Application Express).

One of the nice features available in AnyChart since version 4.1.0 is the ability to save a Flash chart as an image – in order to make it possible, we have to use a server-side script, which is hosted on the AnyChart.Com site by default (read more about saving charts as images in AnyChart 6).

Federico Bonifazi from Geko Sistemi Informativi s.r.l. shared a solution that allows to save charts as images on the server side. We are very thankful for that and present it here for anyone who wants to do the same. This tutorial is very basic and is not a ready-to-go solution, but it gives the general idea, so you can use it to break ground on your project.

This configuration in based on Oracle Standard Edition on a Linux server, Oracle Rest and Tomcat are used.

Read more »

AnyChart JavaScript Charts in WordPress Posts

August 26th, 2015 by Margaret Skomorokh

Data visualization is a rapidly growing Internet industry rooted almost in any aspect of our life. As far as visualization is one of the most effective ways of presenting information, every presentation and every information dashboard requires visual information. Moreover, a well-designed dashboard makes any web page look even better, be it a personal blog or website of a big company.

AnyChart is a flexible JavaScript (HTML5) based solution which allows you to create interactive and great-looking charts, dashboards and visualizations. It is cross-browser and cross-platform, intended for everybody who deals with dashboards, reports, analytics and creates statistical, financial, or any other data visualizations. PCs, Macs, iPhones, iPads, Android devices – AnyChart works everywhere, and you will get the same experience across all devices and browsers.

This article highlights the basics of using AnyChart in WordPress – one of the most popular content management systems. You can easily add a dashboard or a chart in your post, making it more appealing and helping your storytelling.

Adding AnyChart to a WordPress Post

Adding AnyChart to a WordPress post is quite easy. You should open the page editor, switch into Text Editing Mode, insert link to an AnyChart JavaScript file, create a chart container, and add some data and settings, like this:

anychart in wordpress - no plugins - source

Note: A chart container may be of any size. However, if there are no style settings for the container and it has zero height and zero width, the chart will be added, but it will not be seen. So do not forget to set container size.

You can open your WordPress blog right now, copy paste the code below and try it yourself:

<!-- Step 1: link AnyChart from AnyChart CDN -->
<script src="//cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
<!-- Step 2: Create chart container -->
<div id="container" style="width:90%;height:600px;"></div>
<!-- Step 3: Write a script to create a chart -->
<script>
  anychart.onDocumentLoad(function() {
    var chart = anychart.pie([ // create an instance of a pie chart with data
    ["Chocolate", 5],
    ["Crêpe Suzette", 2],
    ["American blueberry", 2],
    ["Buttermilk", 1]
  ]);
  chart.title('Top 5 pancake fillings');
  chart.container('container'); //chart container id
  chart.draw(); // initiate chart display
  });
</script>

That’s basically all you need to to! Could it be easier? Now the page is ready to be published, but do not forget to preview it and make sure that everything looks fine and there are no mistakes in the data.

See below what you get if everything is done right – it actually is a live AnyChart JavaScript Pie Chart which is embedded in AnyChart WordPress Blog the way described above. Hover the slices to see tooltips, click to select them. If you don’t see anything – please check if JavaScript is enabled in your browser.



The <script> tag with data should not contain any empty lines! If there are any, WordPress will replace them with the <p> tag, and the data may be corrupted. Read below to learn how to avoid this.

Disabling Smart Insert

The way of integrating AnyChart from the sample above is quite convenient. But in most cases we may need a little bit more. Just dividing data into paragraphs may help in seeing what is right and what is not, and simple comments are very desirable in some cases. It doesn’t take much to achieve it: WordPress provides you with a number of plugins allowing to disable smart insert (which messes with your code in the first place). You can use, for example, the “Raw HTML” plugin or any other – it doesn’t matter which one you choose. After activating your plugin, wrap the script in the tags specified by the plugin developers (you will need the [raw]…[/raw] tag in case you choose the “Raw HTML” plugin). Then you are free to use any number of empty lines you want and insert comments and notes. It will make no difference in terms of visualization, but it may be of a great help in adjusting and debugging the chart.

Referencing the Script in the Head of a Page

AnyChart.js can be referenced in any part of a page, but we recommend to add the link to the head tag of your blog if you are going to use charts regularly. There are quite a few plugins (like this one) for inserting scripts into the head section, and in some themes you may need to work with wp_head.

Read More

All necessary information about AnyChart can be found in our extensive documentation, API, and Playground.

You can download the component at https://www.anychart.com/download/

Do not hesitate to contact our Support Team or Sales Team if something is still not quite clear.

9 Tips for AnyStock Best Performance

November 13th, 2012 by Margaret Skomorokh

AnyChart Stock and Financial Charts, our tool for visualizing time-based data, is sophisticated and fast at the same time – but with some simple tricks, you can improve its performance even more. Here are nine tips for AnyStock best peformance with the links to detailed instructions and samples in our documentation:

1. When you have thousands of points on the chart, it is a good idea to use data grouping. Ungrouped data always slows the chart due to the fact that you actually have thousands of objects added to the plot. Grouping limits the number of objects displayed and keeps the ability to zoom in and see actual data.

2. Ungrouped data is particularly slow when you have a lot of peaks (i.e. sets like (1,-1,1,-1,1,1…) with more than a thousand of points). The reason is Flash poor performance with drawing vertical lines. This problem can be solved by turning on grouping, but please do not forget that the scroller thumbnail series always shows ungrouped data, so it is better to turn it off. To learn how to do it, please see: Scroller without Data Provider.

If you operate “peaky” data sets, by the same reason a Stick series performs better than a Bar series, Line — even better than Stick, and the utmost performance can be reached with a Marker series.

3. Using live update options, you should be careful with the number of technical indicators – due to their nature they are recalculated when new data arrives and sometimes may slow things down. However, calculation takes only 10% of time, and 90% is consumed by redrawing, so you should note this only when data set has more than 10.000 points and you are using more than 10 indicators.

4. The best timestamp format is %T since it is not converted on a data set parsing stage and is used as is. The %u timestamp format is good too. All “normal” date/time formats slow the performance down because they need to be converted into %T before being used by the internal data storage. See more: Timestamps in Milliseconds.

5. If you are using live update with the appendData() method, it is better to do, for example, one update with 5 rows each 10 seconds, rather than five updates with 1 point each 2 seconds.

6. Annotations slow the rendering down when you have more than a hundred of them on a chart (this will be improved in the future versions).

7. In case of a bad mouse-over experience, you may consider dropping the use of the {%SeriesIcon} token in the legend and use either text coloring or a UTF full block (U+2588) symbol.

8. If the Scroller responsiveness is poor, try to use the former without a data provider. To learn how, see the sample XML: Scroller without Data Provider.

9. If you are using ungrouped data, and the mouse-over performance is poor, please check if markers are enabled and consider disabling them.

Circular and Linear Gauges in AnyChart

April 2nd, 2012 by Margaret Skomorokh

Today we are going to highlight another useful feature of our product. A Gauge (also known as Meter) is an instrument with a graduated scale or a dial for measuring or indicating quantity. As a rule, it is used to show business Key Performance Indicators (KPIs) and to reproduce barometers, thermometers or voltmeters. In AnyChart two types of gauges are available: Circular and Linear.

The Circular Gauge is like gauges on a car dashboard. It consists of a radial scale holding your data range and a pointer. Gauges can be not only circular, but also semi-circular. In fact, AnyChart supports any angle ranges.

Our component also provides the opportunity to implement color ranges, which are used for classifying data. You can set the desired number of different colors depending on the number of your conditions. For example, you may have only 2 colors for satisfactory and unsatisfactory results or a whole palette consisting of 10 colors indicating different temperature ranges.

You can use multiple pointers and even multiple data ranges, place them anywhere or invert data ranges direction. Circular ranges have an adjustable data scale, so you can define its length, minimum and maximum values, and so on.

Horizontal Linear Gauges and Vertical Linear Gauges are sliders or a wide lines (either vertical or horizontal). Their main idea is moving a pointer or pointers over a range of data to some point’s value or the difference between points.

AnyChart gives you the opportunity to use multiple pointers and multiple data ranges, set the width of the line and the number of pointers. Different color ranges for background coloring are available, being a significant and very informative element of your gauge.

With AnyChart you have the freedom to create unique gauges, because all elements are fully adjustable. You can create any gauges needed, make them look like in real life and perform any functions, even surpassing their real analogues.


Here is the list of main available features:

To learn more about Gauges, see our documentation and the following sections of our gallery:

For easy start we recommend you these tutorials:

Gauges can be a very suggestive and useful tool when all their potential is used, and in this post we have tried to give you some clues how to do it.

Also please feel free to ask our support team any questions about working with gauges. Thank you for being with us today.

Working with Event Markers in AnyStock

March 25th, 2012 by Margaret Skomorokh

One of the most exciting features of AnyChart Stock are Event Markers – a special type of chart markers that are designed to provide the best experience in showing various events on financial charts: Key Developments, Dividends, Splits, Insider Transactions, Analyst Opinion Changes and so on. This information is very important for financial analysis and have to be properly visualized. That is why our component has a very flexible and convenient set of tools for working with Event Markers.

Event Markers in AnyStock can be added to a chart series or to a timeline. Due to the stacking and merging systems, you can put as many markers as necessary and at the same time keep your chart clean and readable. Rich interactivity improves the perception of events by users, and the opportunity to bind Event Markers to additional data turns them into a highly informative tool.

Available options include:

  • complete control over all visual settings
  • rich interactivity and the opportunity for users to select Event Markers
  • grouping markers that hit the same date into stacks or into a single marker
  • binding additional data (e.g URL links) to each Event Marker
  • built-in elegant tooltip with the support of HTML formatting
  • full range of supported external events and methods for controlling Event Markers from the outside
  • four special marker shapes

and many, many more…


You can learn how to work with Event Markers from our documentation, gallery, and online demos, each of them containing a sample chart, its source code and description. Here is the full list of these demos:

We want you to pay special attention to the following three samples because they can be used in real applications as ready-made building blocks. These samples also demonstrate a number of important characteristics of Event Markers. For example, as it is clear from the two RSS examples, Event Markers can be loaded and removed during runtime, which means that they can be equally as dynamic as data thought not being a part of it.

We hope that we succeeded to throw some light on this useful feature and this article will help you to implement new functionality in your applications, but if anything is still not clear, do not hesitate to contact our support team. We will do our best to help you.

How to Choose Chart/Graph Type for Seeing Data Over Time

March 13th, 2012 by Margaret Skomorokh

We continue publishing tips for choosing between different types of charts. Last time we were talking about comparing data, and today we will focus on seeing data over time.

The most popular and adequate ways to visualize time-based data are bar graphs and line graphs. What is the difference between them? First, large sets of data are better visualized via line graphs since line graphs are good in showing trends, and bar graphs in this case just look overcomplicated. Second, bar graphs emphasize the magnitude of changes, so they are an excellent way to demonstrate data with sharp fluctuations.

Example 1.

The following graph shows the number of deaths per year in Cambodia between 1960 and 1990 according to UN estimates:

As you can see, there was a sharp increase of mortality in 1975-1980, which is almost the same period when Cambodia was under the Pol Pot regime (1975-1979). Our graph clearly shows the scale of the genocide this regime is responsible for.

Example 2.

And now we are going to demonstrate demographic data about Cambodia for a longer period: since 1950 and including modernity. A bar graph is not the best choice in this situation. Instead, we will use a line graph:

This visualization still shows the increase of mortality in 1975 quite well and at the same time comprehensively represents the long-term trend.

Example 3.

Sometimes a value we are interested in changes discreetly, i.e. stays constant between change points. For example, stamp prices change only in the rare moments when new stamps with new denominations are emitted. In this case we can choose a bar graph since it represents data discreetly, but what if our data covers a long period of time? A bar graph would be difficult to read, but a line graph should not be used either because to connect two points with a line would mean to distort the real picture.

Fortunately, there is one useful variation of line graphs – step line graphs. To connect data points they use only vertical and horizontal segments instead of straight lines. Here is such a graph demonstrating the US Postal Service prices for first class stamps from 1975 to 2008:

Step line graphs combine advantages of bar and line charts, being good at both showing trends and making the magnitude of changes explicit. And by omitting change points you can focus on the periods when the represented value is constant:

See also: Creating Step Line Chart with AnyChart and Line, Spline, Step Line Charts Gallery

That is all for today, more tips are coming soon.

Check the updated article on how to choose chart/graph type for seeing data over time published within the framework of the new 7-part Choose Chart Type feature on our blog.

How to Choose Chart/Graph Type for Comparing Data

January 27th, 2012 by Margaret Skomorokh

Today we start publishing basic tips for choosing between different types of graphs. Visualization can be a very powerful and convincing instrument to present your data – the only thing needed is to use it correctly. One should always clearly understand what exactly he or she wants to show and what is the best way to do it.

There are three main situations when visualizations are made: comparing data, seeing data over time, and breaking data into parts, plus some mixed cases. We will consider them one by one and figure out what type of graphs fits each case. The first post will be about comparing data.

Example 1.
The most common tool for comparing data are bar graphs. For example, here is an AnyChart visualization showing men unemployment rate in the Nordic countries:

As you can see, the difference in the height of bars represents the difference between values pretty clearly. Note that if you need to put long text labels, it is better to make a horizontal bar graph since the vertical axis gives more space for labeling.

See also our documentation and gallery: Creating Bar/Column Chart with AnyChart, Bar/Column Charts Gallery

Example 2.
What if we want to show not only men but also women unemployment rate? Now we have two sets of data for each country, and to distinguish them, we need to use different colors:

Such graphs are sometimes called double bar graphs. They can also be horizontal.

Example 3.
When one needs to represent the correlation between two related values (which can be viewed as a kind of comparison too), a scatter graph is used. Take a look at a chart showing the correlation between religiosity index and suicide rate in different countries:

The position of each point on the horizontal and vertical axes is determined by suicide rate and religiosity index correspondingly. Here, like in the previous case, we also have two sets of data for each country, but the countries themselves are no longer at focuse. The things we want to compare are the number of suicides and religiosity index in general.

While bar charts are good for emphasizing the difference between individual entities, scatter graphs are good for generalizing. The information about particular countries is hardly readable from our graph, but it perfectly shows that more religious countries tend to have lower suicide rates: the points group around an imaginary line that falls down from left to right (sometimes called line of best fit, or trend line). It is considered that the closer the points are to this line, the stronger the correlation is.

See also: Creating Scatter Chart with AnyChart, Scatter Charts Gallery

Check the updated article on how to choose chart/graph type for comparing data published within the framework of the new 7-part Choose Chart Type feature on our blog.

Building Google Dart on Mac OS X Lion with XCode 4

October 12th, 2011 by Margaret Skomorokh

We are developing the HTML5 version of AnyChart using JavaScript, but our team takes an active interest in web development news – and now, of course, one of the main events is the new language Dart.

Dart is a web programming language developed by Google. It was unveiled at the GOTO conference in Aarhus, 2011 October 10-12. The goal of Dart is to replace JavaScript as the main built-in scripting language in web browsers. Dart is intended to solve JavaScript’s problems while offering better performance, the ability “to be more easily tooled for large-scale projects” and better security features.

Our lead developer Alex Batsuev is eager to become one of the first evangelists of Dart. He has faced some problems with building Google Dart on Mac OS X Lion. Please, check out the instruction how to do that in his blog: batsuev.com

Categories
Archive