Tip:
Highlight text to annotate it
X
In this video weíll look at how to include the dxChart widget from the ChartJS library
onto a web page. Iíve already created a simple web page and added references to the following
libraries: chartjs, globalize and jQuery. I have also referenced the JavaScript file
where Iím going to set configuration options for the dxChart widget. As any widget from
the ChartJS library, the dxChart widget can be added using the JQuery or Knockout approach.
Here Iím using the jQuery approach and adding the dxChart widget using the dxChart plugin.
First of all, we need to set a data source for the chart. Iíve prepared an array of
objects representing points to be displayed on my chart. Letís assign it to the chartís
ëdataSourceí configuration option. Now, letís define a series. I set the ëargumentí
data source field as a field that provides arguments for the series, and the ëvalueí
field as a field that provides values for the series. Thatís all. Letís see how the
chart looks with the specified data. As you can see, the ëlineí series type is used
by default. We can easily change the series type to ëbarí by specifying the seriesí
ëtypeí option. Letís see the result. Letís add more series. To write less code, Iíll
locate common series settings in one place and Iíll set individual series settings within
the ëseriesí objects. As you can see, ëseriesí is an array of series objects now. See the
result. Letís change the common series type to ëstackedbarí. In addition, letís make
bar labels visible and connect the labels to the corresponding bars using connectors.
Letís see the result. Ok, Assume our data can be divided into two categories (for instance,
men and women). In this instance, we can group bars into two stacks. Now we have two stacks
of stacked bars per each argument. Since there are a lot of labels, itís better to hide
them, but enable tooltips. Now the chart looks better. Finally, letís add a new series that
will represent summary values of all the series to our chart. For this purpose, letís set
the ëfullstackedbarí series type for our bar series, and set the ëlineí type for
the summary series. The ëfullstackedbarí series are displayed with a percentage value
axis, and this axis is not appropriate for the summary ëlineí series. So, letís define
two value axes and assign them to the series. Thatís all. Letís see the result. The dxChart
widget comes with a lot of other series types ñ simple, stacked, and full-stacked areas
and lines, splines, range bars and areas, finance ñ choose ones that are the most appropriate
for your tasks. In addition, when publishing a project on the server, you may wish to use
a link to the ChartJS library from the Content Delivery Network (CDN). Letís copy this link
from our documentation to see how it works. To learn about the series, ways of customizing
them and other chart elements, refer to the dxChart documentation that is located on our
site. Thanks for watching and thank you for choosing DevExpress.