{"id":1663,"date":"2016-09-16T07:59:33","date_gmt":"2016-09-16T07:59:33","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=1663"},"modified":"2021-01-21T13:59:57","modified_gmt":"2021-01-21T13:59:57","slug":"js-chart-getting-started","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/js-chart-getting-started\/","title":{"rendered":"JS Chart: Getting Started"},"content":{"rendered":"

This is step-by-step tutorial on how to setup a JavaScript chart using MindFusion JS Chart library. In the sample here we will use a pie chart but the steps are applicable to any type of chart with small modifications.<\/p>\n

The video for this tutorial is uploaded on YouTube at https:\/\/www.youtube.com\/watch?v=kc1nNe4p770<\/a><\/p>\n

I. The Web Page<\/strong><\/p>\n

Basically, our sample consists of an HTML file and a Scripts folder, which will hold all used *.js files. In the web page that will hold the control we add two JS references.<\/p>\n

The first one is the config file:<\/p>\n

<script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"Scripts\/config.js<\/a>\"><\/pre>\n
We will define our chart in a PieChart.js file that we will place in the Scripts folder.<\/p>\n
In the body of the file we create a div that holds a canvas.<\/p>\n
<\/canvas><\/p>\n
<\/div>\n<\/div>\n
The canvas renders the chart and we will access and use it in the JavaScript file. That’s why it is important that the canvas has an id.<\/p>\n
II. Setup of the *.JS File<\/strong><\/p>\n
In the PieChart.js file we create a single method that will be responsible for building and customizing the chart:<\/p>\n
define([\"require\", \"exports\", 'MindFusion.Charting'], function (require, exports, m) {\n....\n}\n\n<\/pre>\n
The first few lines define variables used to reference various chart namespaces:<\/p>\n
var Charting = m.MindFusion.Charting;\nvar Controls = m.MindFusion.Charting.Controls;\nvar Collections = m.MindFusion.Charting.Collections;\nvar Drawing = m.MindFusion.Charting.Drawing;\n\n<\/pre>\n
III. General Chart Settings<\/strong><\/p>\n
We create the chart from the canvas in the HTML file.<\/p>\n
var pieChart = new Controls.PieChart( document.getElementById('pieChart'));\n\n<\/pre>\n
Then we set a title for the chart and we increase the font size for the title:<\/p>\n
pieChart.title = \"Corporate Sales\";\npieChart.theme.titleFontSize = 24;\t\n\n<\/pre>\n
IV. Series<\/strong><\/p>\n
The pie chart holds a single PieSeries.<\/a>. For it we need data, inner and outer labels.
\nThe data is a list with numbers:<\/p>\n
var values = new Collections.List([20, 30, 10, 40, 35]);\n\n<\/pre>\n
The labels are a list with strings. Here is how we create the series:<\/p>\n
pieChart.series = new Charting.PieSeries( values, null, new Collections.List([\"a\", \"b\", \"c\", \"d\", \"e\"]));\n\n<\/pre>\n
If you run the chart now you’ll see the pie with labels painted in a light green color.<\/p>\n
\"initial-js-chart\"<\/p>\n
So, we need<\/p>\n
V. Styling<\/strong><\/p>\n
The styling includes brushes for the pie pieces:<\/p>\n
var brushes = new Collections.List([\nnew Drawing.Brush(\"#081b67\"),\nnew Drawing.Brush(\"#cc2020\"),\nnew Drawing.Brush(\"#7D7D7D\"),\nnew Drawing.Brush(\"#67a6c7\"),\nnew Drawing.Brush(\"#d0d0d0\")\n    ]);\nvar seriesBrushes = new Collections.List();\n   seriesBrushes.add(brushes);\n\n<\/pre>\n
a single pie pen:<\/p>\n
var pens = new Collections.List([\n     new Drawing.Brush(\"#ffffff\")\n]);\nvar seriesPens = new Collections.List();\n seriesPens.add(pens);\n\n<\/pre>\n
a thickness for the pie pen:<\/p>\n
var thicknesses = new Collections.List([\n        15\n\t\t\n]);\n\nvar seriesThicknesses = new Collections.List();\nseriesThicknesses.add(thicknesses);\n\n<\/pre>\n
and a DashStyle for it:<\/p>\n
var dashStyles = new Collections.List([\n        Drawing.DashStyle.Solid\n]);\nvar seriesDashStyles = new Collections.List();\n  seriesDashStyles.add(dashStyles);\n\n<\/pre>\n
We could have set different pens, thicknesses and DashStyle<\/a> for each pie piece, but we want all the pieces to be outlined with a single pen.<\/p>\n
Note that those settings are of type array and are nested in another array. That is because the styling might apply to multi-series charts and each array is responsible for styling the elements of each series.<\/p>\n
In our sample we style the pie chart with a PerElementSeriesStyle<\/a> object, which we assign to the seriesStyle<\/a> property:<\/p>\n
pieChart.plot.seriesStyle = new Charting.PerElementSeriesStyle(seriesBrushes, seriesPens, seriesThicknesses, seriesDashStyles);\n\n<\/pre>\n
VI. Legend<\/strong><\/p>\n
The legend needs to be styled – the background, border and title need to be specified and customized to make it look better.<\/p>\n
The legend title is a property of the chart.<\/p>\n
pieChart.legendTitle = \"Period\";\n\n<\/pre>\n
The styling settings for a legend can be accessed through the theme property:<\/p>\n
pieChart.theme.legendBackground = new Drawing.Brush(\"#ffffff\");\npieChart.theme.legendBorderStroke = new Drawing.Brush(\"#cecece\");\npieChart.theme.legendBorderStrokeThickness = 1.0;\npieChart.theme.legendTitleFontSize = 16;\n\n<\/pre>\n
The legend label is read from the title of each series in the chart. In our case we use:<\/p>\n
pieChart.series.title = \"2016\";\n\n<\/pre>\n
With this our chart is complete. A hint: if you want to make the pie labels from inner to outer, you just need to change the position of the null value in the PieSeries constructor.<\/a><\/p>\n
\"JS
JS Pie Chart<\/p><\/div>\n
 Download Sample <\/a><\/p>\n
MindFusion JS Chart is an interactive library for charts and gauges written purely in JavaScript. It supports all common chart types, multiple series, custom data,financial charts, a large selection of gauges and rich styling capabilities. The elegant architecture of the library allows you to create dashboards, charts with multiple different types of series in a single plot, unlimited number of axes, reusable styling themes, various oval and linear gauges. The innovative approach to data lets you define your own data classes by implementing a single interface.
\nThe library also boasts a rich event set, zoom, pan, dragging of the legend and a set of many popular gauges. It is designed and implemented to provide JS developers with the perfect tool to create beautiful, interactive dashboards fast and easy. Download trial directly at http:\/\/mindfusion.dev\/JavaScript.Chart.zip<\/a> Get your license today at http:\/\/www.javascript-chart-buy.html<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
This is step-by-step tutorial on how to setup a JavaScript chart using MindFusion JS Chart library. In the sample here we will use a pie chart but the steps are applicable to any type of chart with small modifications. The … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[61,74],"tags":[425,427,424,426,428],"class_list":["post-1663","post","type-post","status-publish","format-standard","hentry","category-charting-2","category-sample-code","tag-javascript-chart","tag-javascript-dashboard","tag-js-chart","tag-js-dashboard","tag-js-pie-chart-tutorial"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-qP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=1663"}],"version-history":[{"count":10,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1663\/revisions"}],"predecessor-version":[{"id":2603,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1663\/revisions\/2603"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}