Below you will find word-by-word transcriptions of MindFusion video tutorials.
Hello and welcome to this MindFusion tutorial where we will show you how to build a bar chart that binds to a data source and updates dynamically when the user chooses a different data period.
We start by creating an empty project in Visual Studio. We will use Visual Studio for its support of Intellisense. We choose "New Project" then "Web" than "ASP.NET Application" and then "Empty Application". We use the ASP.NET project type because it starts a web server without which we wouldn't be able to access the JSON file that we use as a data source from the local computer. The access shall be blocked by the browser.
Next we open the solution folder in file explorer and create a folder called Scripts. There we will copy the JavaScript files that we will need for the project.
We have downloaded the MindFusion Chart library from its webpage and we have unpacked it. Now we copy the Charting, Common and Gauges files as well the intellisense vsdoc file. We place them in the Scripts folder. Then in Visual Studio we right click on the folder name and choose "Add existing item". We point to the three JavaScript files.
Next, we create a web page that we call BarChart. In it we add references to the two JS files that we need - Charting and Common. We place the reference tags at the end of the web page, right before the closing body tag.
Then we add a canvas element. It is needed by the chart library to render itself onto. It is important that we give it an id so we can access it later in code. We will need a JavaScript file that will contain the programming logic of this chart. We add an empty JavaScript file that we call BarChart and save it in the directory of the solution, at the same level as the web page.
Next, we add a reference to the Intellisense file and mappings to the namespaces that we'll use in the project. We need to get now the HTML Element for the canvas with id "barChart" that we created in the web page. We set its width and height respectively to the clientWidth and clientHeight of the offsetParent of the canvas element.
It is time that we create the bar chart. It is an instance of the BarChart control and takes the HTML Element of the canvas as an argument.
Our chart will use data binding to take its data from a JSON file. I copy the JSON file, which is called data in the directory of the project. Next, I add it to the project solution and open it. It is a file that contains data for 6 consecutive months from January to June. The data for each month consists of 5 entries. Each entry has an id, a name and a value. The entries represent items that are being sold in a coffee shop for instance. They are called cakes, coffee, juice, salads and sandwiches.
We will read the json data by using an XMLHttp Get request to the data json file. We use a method called loadJson that takes as an argument a callback function. In the callback function we make the request, check if the HttpRequest object is ready and accessible and if yes, we return the data we have read as a string. The method that calls the loadJson function is in another method called readData.
We get the DOM element that corresponds to the period select HTML element. We use it to get the selected value of the combo box. We assign its data as value to the dataSource property of the bar chart. Then we will assign the values of the index and value fields in the json as data for the x and y data fields. The property values are of type ObservableCollection because you can provide data for more than one series as we will see later. We also want to bind the data for labels at the X-axis and the inner labels. Finally we call the updateLayout method to make the bar chart refresh its view with the new data.
Let's check what we've done so far. We refresh the web page with the chart - the data for the first month is visible. When we change months the bar chart renders the data of the selected month. What happens if we select two months? Nothing, the data for just one of them is rendered. Let's change that.
In order to render the data for more than one month we need to create more than one DataBoundSeries. Let's look it up in the online documentation of the chart library. Its constructor needs a data source object. So, we get the names of all selected months in an array called selectedOptions. Then, for each month we get its JSON data from the data file and create a DataBoundSeries with this data as an argument.
Let's look at the members of the DataBoundSeries class. There are properties for the data on all chart axes, for the inner labels and the labels at the exes. We use the xDataFields, yDataFields, innerLabelsDataField properties to set the data fields in the json file that will provide the data. The xAxisLabelsDataField is set just once because we need to set the labels for the xAxis only once. We add all DataBoundSeries that we create to a series collection, which we assign to the series collection of the bar chart. We must not forget the invalidate the layout of the bar chart by calling invalidateLayout.
Now let's see what we've done. We select one month, more months - it works as it should.
It is time to do some appearance settings. First, we show tooltips and hide the legend, which we won't use for this chart. Then we do some customization for the axes. The data for the y Axis reaches to 132. So, we set its max value to 140, min value to 0 and the interval to 20. We set the same properties but with different value for the xAxis and we hide its coordinates. We add a title to the yAxis.
Let's refresh the chart. It looks ok. The font is small but we will fix that. The chart has a theme property, which holds most of the appearance settings that you'll need to customize any type of chart. Let's look at its members. We see here axisTitleFontSize and axisLabelsFontSize that we will use to change the font at the axes. There is also dataLabelsFontSize that changes the font of the labels drawn at chart elements. We set these properties.
Now the chart looks better. Here is the tooltip. Let's customize it. We use the static properties of the ToolTip class for horizontal and vertical padding and offset. We also set a custom pen and brush for the labels and change their font. Let's refresh the page and see what we've done.
It looks better.
Now we will add a grid. This is done by setting the gridType property to a value different than "None", which is its default. We set it to GridType Horizontal and use the gridLineColor and gridLineStyle properties to specify how the grid will look. Then we set two colors for the grid lines - the first is white and the second is pale gray.
Let's look at the chart. It is nice but we need to change the brushes for the series. We will do this by setting arrays with brushes for the fills and strokes of the chart.
We create two arrays with brushes - one for the fills and the other for the strokes. The brushes for the strokes are slightly darker than the series fills. We add them to other lists and assign those lists to the seriesFills and seriesStrokes properties of the theme. The theme uses nested arrays as brush and stroke properties to allow better customization of charts that render multiple series - you can add a unique brush for each element in each series.
Let's refresh the chart. It looks much better now. The font can be lighter and the highlight pen in a more contrasting color. Let's set that.
We use the datalabelsBrush, datalabelsFontSize, datalabelsFontStyle and datalabelsFontName properties to customize the way data labels are drawn. Next, we use the highlightStroke property to set an orange brush as a highlight.
We refresh the chart. Now it looks perfect. With that our tutorial is finished.
Thank you for watching and thank you for your interest in MindFusion developer tools.
Hello and welcome to this video tutorial where we will build a map for a hotel, which shows the guests the locations of useful places around the hotel. We have organized to places in two layers - one for places that could be of use like pharmacy, library etc. and the other for locations relating to transport nearby the hotel. We use MindFusion map library for JavaScript in this example.
We go to the MindFusion website - the JavaScript pack page. The mapping library is part of the JavaScript pack and once we download and unzip the file we will see a directory with all component scripts. We copy the two that we'll need - MindFusion Common and MindFusion Mapping in a scripts subfolder of our project folder, which we call LocationMarkers. There we also have created a folder called images, which holds all images used in the sample in png format.
We will also need to provide a theme class for our map to look well. Though it is not important in terms of map functionality, the theme sets how default symbols like map pins will look. In our map we use the standard theme, which is the default so we don't need event to set it. You can choose any of the other color themes or customize them.
The next thing to do is to create a simple web page, we use Notepad++ for that but you can use any other editor. In the head section we add a reference to the theme CSS file.
We need to add now a div element that will render the map. We must set an id for it. Then we need to reference the two JavaScript libraries that we've added in the script folder - MindFusion Mapping and MindFusion Common. We will place the programming code in a separate file, let's name it LocalPlaces.js. It will be in the same directory as the web page. Let's create this file.
In it we add mappings to the two namespaces that we'll use - Mapping and Drawing, which is location in the Common JavaScript file. We create an instance of the MapView class, which renders the tiles of the chosen Tile Map Server. We get the element with id mapView, which is how we identified our div element. Then we set its theme property to standard, which was the name of our CSS theme.
Let's save the file as Local Places.js and set a map to be rendered by the map view. We will use a street map by a free Tile Map Service called MapBox. Their maps are free to use, you need a registration key, which is very easy and fast to get. Here you can see on their page the available map styles. We create a new MapLayer called Streets. This is the name that will appear on the layer control in the web page. We assign the street style of a mapbox map to the url template property of this map layer. We must credit the map authors and we use the attribution property to render the text that is required by MapBox, if you use their free service. Next, we add the layer to the layers collection of the map view.
Now we will add the location of the hotel, which will use this map. We will get the geographical coordinates of its location from a sample of the Mapping library. We navigate to the tree of online samples of MindFusion maps and click on Coordinates. The hotel location is in the combo box we select it and the map centers according to its coordinates. We then right-click the place where we assume, for the purpose of this tutorial, the hotel to be located. The sample copies automatically the coordinates in the clipboard. Now we create a variable with that location. Then we load the map view with this location as a parameter and the number of 15, which indicates the zoom ratio.
Time to see the map. We open the web page in a browser and here is the map. It would be nice if we add a pin for the location of the hotel. We create a DecorationLayer, which is a layer that draws markers. We call it Hotel Location. We create a new marker, which is at the place of the hotel. Then we edit its text property to show the name of the hotel. We add this layer to the layers collection of the view. Let's refresh the page. Here is the pin of the hotel.
Now we will create a new layer with the useful places around the hotel. This time we create a new Decoration layer, which will render the icons of the useful places. Here are the icons, let's take the pharmacy. We go the coordinates sample and check the map. Here is the location of the pharmacy. We create a new Marker in the point with latitude and longitude that were copied to the clipboard. We set the text property and the imageSrc. Then we add the marker to the decorations list of the layer.
Let's refresh the page. The "Useful" layer is visible. When we check it we see where the pharmacy is. Let's add one more decoration. There is a nice restaurant nearby, called Yummy Food. We get its location, save the file. Refresh the page. Here it is. I will simply copy the code for the two more useful locations - the shopping center and the library - and we'll go on with the second layer - transport.
We create the transport layer and add it to the layers collection. Then we add a new Marker, this time for taxis. We want to add the location of a taxi stand. Let's get it - it is located here, in this garden. We save it and refresh the page. Here it is.
Let's add one more location - a bicycle lane. The bicycle lane is here, let's get its coordinates. We edit the marker and refresh the page. Here is the bicycle lane. Now the hotel guests can switch between layers and choose which locations they want to see.
That's all for today. Check the link under this video for a download of the sample and an online demo. Thank you for watching and thank you for your interest in MindFusion developer tools.
Hello and welcome to this video tutorial where we will use MindFusion's Java profiler called HyperDebug. The application that we will trace and optimize is a simple one. It goes rough the records on the file that you see at the screen. Each line in it is the name, age and profession of a person. The program writes each record in a separate file based on the profession of the person. To make the program slower we have duplicated a few lines in the file. The program first searches if th given record is already written in the file with the profession and adds a new record only if no record is found.
We use FileInputStream to open the initial file called data.txt. We cycle through all lines and parse the words on each line. After that we write the name of the person in a file that has the name of their profession and note how many times a record for them is found. Most people are found just once.
All the process is slow and inefficient and we start HyperDebug to gather initial information about the execution time of each method, number of calls and more. We start the profiler by double clicking on its executable jar and open the config dialog. There we browse to the Main class of the file parser application. In this case we don't have to select a Main class because the only class is the main class. We check the Trace Parameters check box to make the tool gather info about the parameters of each method. Then we hit Run. HyperDebug executes the program now and here it is. It opens the gathered log files and visualizes the traced information.
Let's take a look at the JVM total info data. Here we see the name of each method together with the type of its parameters as well how many times it was called and the total execution time for all calls. We see that 3 methods get called a lot with the replaceSelected method being by far the most time consuming one.
The Time Monitor step confirms this information - replaceSelected calls took a lot of time, surpassed only by the main method call. As for the count of calls - all methods, except Main, were called an equal number of times.
Knowing all this information let's get back to our file parser. We delete the parsed files and leave only the initial data file. Let's start HyperDebug once again this time from scratch and see the outcome. Now the method that gets called the most is the Main method. Both the Time Monitor and Method Data methods confirm this. Let's see what happens in the program methods.
The main method calls replaceSelected, which searches for a line in a file and replaces it with another line, if found. The other method is searchInFile, which returns 1 if a given string is found among the file records. All this is a very slow IO operation, which we will change.
Let's start our optimization by introducing a HashMap. The key will be the profession. The value will be another hash table. It will contain the name of the person, together with the number of records for them. This way any record in the outer hash table represents the data in a single file.
Let's edit the main method and make it use the hash map. In the part where we cycle through all records we check if a key value pair for the given profession is already present. If so, we get the hash map that contains the records.
In it we check if the name of the person is contained. If yes, we increment its value with one to show that we have found another record for them. If a key for this person is not found, we add a record with their name and the value of 1 - it's first occurrence. Then we finish the check for the main hash table - if a record for the profession is not present, we add a new key value pair. The key is the profession and the value is a new hash table that will hold all people with this profession and the number of records we've found for them. Let's add the name of the current person to that map. We can comment the old code now. Now we need to implement the part where we write the records in a file. Let's do it in cycle where we go through all records in the main hash table. We write each one with the help of a new method called writeToFile. This method takes as an argument the name of the file and the HashMap with the file data - that is a key value pair from the main hash table.
Let's use a PrintWriter the way we did until now to write the data into the file. In the comments for the PrintWriter constructor we see that if the file does not exist, it will be created, which is exactly what we need. Then we cycle though all values in the data hash table and write the information. Note that we prefer to use foreach cycles to traditional for cycles.
Now let's delete all files with professions and start the program anew. The time log shows us that execution time has been cut significantly. Before we run the program let's correct the file name with the path to the directory.
Let's run the program. Here are the new files with the records. Let's delete them.
Let's also delete the current log files for HypeDebug and start the application again. We load the main class and tick trace parameters. The program executes faster and the performance progress is easy to spot. We have now only two methods, both of which take far less time than the previous set of methods. The method data step show us that the writeToFile method was called 53 times, which is far less than the previous method counts. The call graph shows us that main calls writeToFile, which takes 127 milliseconds to compete. Main takes 163 milliseconds to execute, which means that beside the writeToFile method, other code does not take much. Here we see the subsequent recordings of the files with the professions.
And that's all for now. Thank you for watching and thank you for your interest in MindFusion developer tools.
Hello and welcome to this video tutorial where we present you MindFusion WordPress org plugin. The plugin is used to build organization charts of any size. You can edit the data on each node - name, title, comments. When you right click on a node, a new node is automatically created beneath it, that is - a direct subordiante. The image of the employees are set by giving their URL. When you want to change the position of an employee you need to delete the link to its current boss. The node moves to the top of the chart and becomes red. Now you can drag and drop it over the node that will be its new boss. It moves beneath it and gets colored accordingly.
The plugin supports a Save function that exports the newly created org chart as a json file. It also has a Load button that reloads the diagram so you don't have to reload the whole page. There is also a print function and a search function. Let's try it and search for ann. The node with an employee named Ann is selected. Let's search for something else - developer. We have 3 three developers as the search result text informs us. Their nodes are rendered with dotted frame.
So, how do we install and use the plugin in order to build a chart like this? We go to MindFusion company website and from the product menu navigate to the Org Chart plugin page. We click the download button and open the location where the archive was saved. We copy the path. On the dashboard of our WordPress blog we navigate to the Plugins menu and select Upload File. We point to the directory where we have saved the archive, select it and click install now. Then we activate the plugin. The plugin now appears in the plugins list and we click the settings link. Here we have the two text boxes where you can put the path to the json file the chart will load from and a link to the license file. Here you can also control, which buttons show and turn the read only mode on or off.
Now lets create a new post and name it Org Chart. Now we need to initialize the plugin. We go back to the plugin website and click the user guide. Here we look at the how to use paragraph and check the shortcode for the plugin. We see we need to type mindfusion_org_chart and omit the part with the json file - we don't have one yet. Now let's publish the page and see how it looks. Here it is - an empty diagram where we can start creating nodes.
We right click on the blank space and an empty node is created. When we click on it - a new one is created. This way we can create all nodes we want. Let's look at these pictures here - we have uploaded them on the web server of the blog in a directory wp-content/images. Let's check the images are here. We have an image called ceo.png , here it is. we paste the image URL in the image box. Then we edit the name by double clicking on it. We set the title and double click in the comments section to add a comment.
Let's edit another node. We know there is an image for a CFO. Let's edit the node. Note how the nodes resize automatically to fit the new text. We create one more guy, the IT boss.
Let's delete the fourth node, we won't create any more employees for now. Time to save the chart. We click the save button and the diagram gets downloaded as a json file.
We have uploaded the diagram dot json file in a directory called org-chart in wp-content. Here it is. In the user guide of the plugin we check the syntax of the short code. We can use the json_url attribute to point to the location of a json file that describes the data of an org chart to be loaded initially by the plugin. We edit the shortcode of the plugin and add the json_url attribute. We set the path to point to the json file and upload the change. Here it is.
The nice thing about the shortcode syntax is that you can create multiple org chart instances, each one using a different json file. Let's simply copy the syntax of our first instance. Here it is - you can see that now we have two org chart instances. Of course, you can create the instances on different pages.
Now let's set the path to the json file from the global settings. We delete the json_url attribute and upload the changed post. Then we go to the Settings menu of WordPress and choose MindFusion org chart settings. We paste the path to the json file and save the settings. Let's reload the page. The same org chart is rendered. The difference now is that if we create more instances of the plugin and do not use the json_url attribute to set path to a different json file, all of them will render the same chart.
That's all for today. Thank you for watching and thank you for your interest in MindFusion developer tools.
We will use Visual Studio for its support for Intellisense and we create an empty web page. The chart library needs a canvas to draw the chart, so we create a canvas element. It is very important that we give the canvas an id. Then we save the file.
Next we browse to the directory where we've saved the chart HTML page and create a new folder called Scripts. There we copy the two JavaScript files that represent the charting library - Charting and Common. We also copy the vsdoc file that represents the Intellisense type definitions.
Now let's reference the JavaScript files. We add references to them at the end of the HTML web page, right before the closing body tag. We also add a reference to one more file called StackedBarChart. This is the code behind file for this chart. Let's create it now.
We create an empty JS file and save it in the main directory where the chart web page is.
Next, we add a reference to the Intellisense file and mappings to the namespace definitions that we will use: Charting, Controls, Collections, Drawing and the ToolTip class.
Now we get the HTML element that corresponds to the canvas with id chart and set its width and height to be the same as the client with and height of its offset parent. Finally, we create the bar chart control using this HTML chart element and specifying the layout of the bars - stack.
A good way to provide data to a bar chart is through the BarSeries class. Let's check it in the online documentation. We can see that its constructor accepts a list with the data values and different labels - inner, top or labels for the x axis. That's good but we want to use tooltips. We can easily make the BarSeries use one of its label lists for tooltips by overriding it. Here is how we do it:
We define a new variable called BarSeriesWithToolTip and we assign to it a method that calls the constructor of the BarSeries with three parameters - a data array and two arrays with labels.
Then we override the getLabel method, which is responsible for returning the right string for the label of the given type and index. In it we check if we are asked for a tooltip and if so, we return the top label at the given index. In all other cases we call the standard getLabel method of the BarSeries class. That's how we will get for a tooltip the respective label from the top labels list.
Let's create an instance from the new BarSeriesWithToolTip class and see our chart.
The stacked bar chart renders each data value as one portion of the stacked bar at the adjacent position. This means that for a single stacked bar with 5 parts we need 5 BarSeriesWithToolTip instances with one data value.
We initialize first the lists with the inner labels and then the tooltips. Each list holds just one string.
Now let's create a collection with the 5 bar series. We create the data arrays in the constructor call and provide one list with labels and one list with tooltips. We assign this series collection to the series property of the bar chart and then call the draw method. It is the draw method that renders the chart.
Let's inspect the first version of our chart. The data is rendered as it should, let's start to customize the appearance.
We make the chart horizontal by setting horizontalBars to true and hide the legend with showLegend equals false.
The stacked bar is horizontal now and the legend is gone. Now we'll make some customization of the axes. We make the y axis to have just one interval - its min value is -0.6 and its max value is 0.6. The interval is 1. The chart library renders bars in the middle of the axis value that corresponds to the bar. In our case the first bar has an axis value of 0 and is drawn half under the zero and half above the zero. That's why we make the Y-axis start from -0.6.
Let's tell the chart that we want the labels that we've provided to be used for inner labels and tooltips. We do this by setting the supportedLabels property. We use another property called barSpacingRatio to make the chart wide enough.
Now we will use some of the theme properties to adjust the appearance of the chart. The theme class exposes many properties that let you control how your chart looks. We use transparent brush for the axes so they will not be visible. Then we set a bigger font for the labels and make them bold.
Here it is. The tooltip is drawn at the edge of the bar by default but we can adjust its location easily. The static Tooltip class ofers various properties for customizing the appearance of the tooltip.
We use the brush property to set transparent background of the tooltip and pen to specify a white border pen. Then we move the tooltip inside the bar by using horizontalOffset and verticalOffset properties. We increase the text padding and set a bigger font. Let's check the result.
Looks much better. Let's make the stacked bar smaller. The size of the chart depends on the size of the canvas element. It is now 100% high, let's set it to a fixed size, say 220 pixels.
Looks better now. Let's color the chart. The chart library has numerous style classes that provide different ways of applying the provided brushes and strokes to the chart elements. We will use the PerSeriesStyle class that colors all elements of the adjacent series with the brush at the corresponding index in the brushes list of the series.
We have chosen 5 complementary colors for the bars and create 5 solid brushes with them and one white brush for the outline. We create an instance of the PerSeriesStyle class with a list of the 5 brushes as fills, the white brush as stroke and a list with the number 3 as a single stroke thickness. The white outline and the stroke thickness will be applied repeatedly to all series. We assign the new style to the seriesStyle property of the chart plot.
Let's refresh the chart. It is almost done. What we need to add now is the title and subtitle. We use the title and subtitle properties to set the desired text. Let's refresh the page. The chart now is complete. You can apply standard CSS styling to add some margin around the chart or place the canvas anywhere else on the page.
With this our tutorial is complete. Thank you or watching and thank you for your interest in MindFusion developer tools.
