Welcome to Wijmo 5 FlexChart! In this video, we'll learn how to:
- Create a basic Wijmo 5 FlexChart control
- Bind it to an item source
- Add to your Wijmo5 application
- Include necessary references in your application
- Create a control host
- Instantiate a new FlexChart control
If you haven’t already downloaded Wijmo, get your fully-featured watermarked trial now.
Code Snips
var gettingStartedChart = new wijmo.chart.FlexChart('#gettingStartChart');
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
appData = [];
for (var i = 0; i < countries.length; i++) {
appData.push({
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
// initialize FlexChart's properties
gettingStartedChart.initialize({
itemsSource: appData,
bindingX: 'country',
series: [
{ name: 'Sales', binding: 'sales' },
{ name: 'Expenses', binding: 'expenses' },
{ name: 'Downloads', binding: 'downloads' }
]
});
Transcript
Intro
Hello, everyone. In this video I will show you the simple steps of adding a Wijmo5 FlexChart to your HTML5 web application.
Configure Project
To begin, we want to download Wijmo5 from Wijmo.com. Once we have the downloaded zip files, open it up. Inside the Dist folder, you will find the Wijmo5 controls collection, as well as our CSS and Angular and Knockout Interops. Let’s open up controls and copy our base class, Wijmo.js, and our chart modules, Wijmo.chart.js, and copy them into our project. Next, we need to include the base css library, Wijmo.css, as well as one of our professionally-made themes. Now that we have our project setup, let’s open it up in our favorite IDE.
Creating the App
To begin, I need to create a new file called index.html. Next, I need to copy the HTML and BODY tags into my application, and let’s give it a title. Under our title, we need to include the two Wijmo5 javascript files we copied into our project folder. After we have loaded the JS, we need to link our base CSS and the theme that we selected. Next, we want to add a control host to our application. For the chart, we can use a standard HTML div. We will assign it a unique ID--here, called gettingStartChart. Under our control host, add a place to add some JavaScript.
Configure The Control
We want to create some generic data. Here we have an array of countries, and we generate some random data to populate it. Next, we will declare a new instance of the FlexChart and call it gettingStartedChart so we can reference it later in the application. You will see we declare a new Chart, and pass it the ID of our control host from our markup. (This tells Wijmo5 where to place the control.) The last step is to initialize some properties of the Chart. You can find a list of all of the APIs on the website.
Run the application
If we run the application we should see a FlexChart on your screen.
You can learn more about FlexChart and other JavaScript controls at Wijmo.com.
GrapeCity