You are here

README.txt in Charts 8.4

Charts
======

The Charts module provides a unified format to build any kind of chart with any
chart provider.

Each chart solution found on internet, such as Google Charts or Highcharts,
has a specific data scheme. Its very hard and even impossible to build a unique
chart data scheme that would be used in more that one chart provider. Or users
get bound to a solution forever. Or they have to rewrite all exported data
again.

That's why Charts is so great. It uses a standard data scheme to describe charts
data, and through filters, it automatically converts to each solution. You can
change to another solution at anytime.

The Chart schema is very similar to Drupal's Form API schema.

Chart Providers
---------------

Out of the Box, you will be able to use 4 chart solutions. Each of them has
particular advantages and disadvantages.

* C3: This library is a D3-based reusable chart library makes it easy to
  generate D3-based charts by wrapping the code required to construct the
  entire chart. You don't need to write D3 code any more.

* Chart.js: This is a simple yet flexible JavaScript charting for designers
  & developers.

* Google Charts: This library does not require any external downloads. It
  generates interactive charts using SVG and VML.

* Highcharts: This library is one of the premier solutions for generating
  charts. Although it is very powerful and aesthetically pleasing with smooth
  animations, it requires a commercial license. It's free for non-commercial
  use. See http://www.highcharts.com

Installing Libraries
---------------------

Using Composer:

1: Ensure that you have the `composer/installers` package installed.
2: Ensure you have an installer-paths for the drupal-library type. Such as in
   the composer.json of
   https://github.com/drupal-composer/drupal-project/blob/8.x/composer.json
3: In each sub-module, there is a README.txt file that you can use to copy the
   info inside the composer.json of your project.
4: After updating your project's composer.json file, run the 'composer require'
   command specified in each sub-module's README.txt file. For example, if you
   are using Google Charts, step three would mean adding:

        {
            "type": "package",
            "package": {
                "name": "google/charts",
                "version": "45",
                "type": "drupal-library",
                "extra": {
                    "installer-name": "google_charts"
                },
                "dist": {
                    "url": "https://www.gstatic.com/charts/loader.js",
                    "type": "file"
                },
                "require": {
                    "composer/installers": "~1.0"
                }
            }
        }

   to your project's composer.json, and then running:

        composer require --prefer-dist google/charts:45


There are numerous tutorials on Drupal.org and elsewhere on the web if you are
looking for more information about how to use Composer with Drupal 8.


Using Composer and wikimedia/composer-merge-plugin:

1: Ensure that you have the 'wikimedia/composer-merge-plugin` package installed.
2: Ensure that you have the `oomphinc/composer-installers-extender` package
   installed.
3: Add an "installer-types" section in the "extra" of your project composer.json
   file, make sure you have "bower-asset" and "npm-asset" listed.
   For example:
     "installer-types": [
         "bower-asset",
         "npm-asset"
     ],
4: In the "installer-paths" section in the "extra" of your project composer.json
 file, ensure you have the types drupal-library, bower-asset, and npm-asset.
   For example:
     "web/libraries/{$name}": [
         "type:drupal-library",
         "type:bower-asset",
         "type:npm-asset"
     ],
5: Add a "merge-plugin" section in the "extra" of your project composer.json
   file, so that the composer.json file of the sub-modules you want is included.
   For example:
     "merge-plugin": {
         "include": [
             "web/modules/contrib/charts/modules/charts_highcharts/composer.json"
         ]
     },
6: Run the 'composer require' specified in the sub-module's README.txt file


Creating Charts in the UI
-------------------------

This module provides a configuration page at admin/config/content/charts. You
may set site-wide defaults on this page (for example set the default color
scheme).

In order to actually create a chart through the UI, you'll need to use Views
module.

- Create a new view:
  Visit admin/structure/views/add and select the display format of "Chart" for
  your new page or block.

- Add a label field:
  Under the "Fields" section, add a field you would like to be used as labels
  along one axis of the chart (or slices of the pie).

- Add data fields:
  Now a second field that will be used to determine the data values. If you
  are visualizing an Event content type, this field might be
  field_number_attendees. The label you give this field will be used in the
  chart's legend to represent this series. Do this again for
  each different quantity you would like to chart. Note that some charts
  (e.g. Pie) only support a single data column.

- Configure the chart display:
  Click on the "Settings" link in the Format section to configure the chart.
  Select your chart type. Some options may not be available to all chart types
  and will be adjusted based on the type selected.

- Save your view.

Tip: You may find it easier to start with a "Table" display and convert it to a
chart display after setting up the data. It can be easier to visualize what
the result of the chart will be if it's been laid out in a table first.

Creating Multiple Series and Combo Charts in the UI
---------------------------------------------------

A major difference between the Drupal 7 and Drupal 8 versions of this module is
that the Drupal 8 module uses a Chart Attachment plugin for creating a separate
chart series that can be attached to a parent display.

Using Charts with custom Views Fields
-------------------------------------

If you are using custom views fields (extended from
Drupal\views\Plugin\views\field\FieldPluginBase) to generate numbers or other
data, you will need to set the getValue() function in your custom field to
return your data. Data returned in render() is not used when building the chart.

You may look in src/Util/Util.php to see how the field data is extracted and
used by the Charts module.

Support
-------

For bug reports and feature requests please use the Drupal.org issue tracker:
http://drupal.org/project/issues/charts.

We welcome your support in improving code documentation, tests, and providing
example use-cases not addressed by the existing module.

If you are interested in creating your own sub-module for a library not
currently supported (for example, Flot), please contact @andileco

File

README.txt
View source
  1. Charts
  2. ======
  3. The Charts module provides a unified format to build any kind of chart with any
  4. chart provider.
  5. Each chart solution found on internet, such as Google Charts or Highcharts,
  6. has a specific data scheme. Its very hard and even impossible to build a unique
  7. chart data scheme that would be used in more that one chart provider. Or users
  8. get bound to a solution forever. Or they have to rewrite all exported data
  9. again.
  10. That's why Charts is so great. It uses a standard data scheme to describe charts
  11. data, and through filters, it automatically converts to each solution. You can
  12. change to another solution at anytime.
  13. The Chart schema is very similar to Drupal's Form API schema.
  14. Chart Providers
  15. ---------------
  16. Out of the Box, you will be able to use 4 chart solutions. Each of them has
  17. particular advantages and disadvantages.
  18. * C3: This library is a D3-based reusable chart library makes it easy to
  19. generate D3-based charts by wrapping the code required to construct the
  20. entire chart. You don't need to write D3 code any more.
  21. * Chart.js: This is a simple yet flexible JavaScript charting for designers
  22. & developers.
  23. * Google Charts: This library does not require any external downloads. It
  24. generates interactive charts using SVG and VML.
  25. * Highcharts: This library is one of the premier solutions for generating
  26. charts. Although it is very powerful and aesthetically pleasing with smooth
  27. animations, it requires a commercial license. It's free for non-commercial
  28. use. See http://www.highcharts.com
  29. Installing Libraries
  30. ---------------------
  31. Using Composer:
  32. 1: Ensure that you have the `composer/installers` package installed.
  33. 2: Ensure you have an installer-paths for the drupal-library type. Such as in
  34. the composer.json of
  35. https://github.com/drupal-composer/drupal-project/blob/8.x/composer.json
  36. 3: In each sub-module, there is a README.txt file that you can use to copy the
  37. info inside the composer.json of your project.
  38. 4: After updating your project's composer.json file, run the 'composer require'
  39. command specified in each sub-module's README.txt file. For example, if you
  40. are using Google Charts, step three would mean adding:
  41. {
  42. "type": "package",
  43. "package": {
  44. "name": "google/charts",
  45. "version": "45",
  46. "type": "drupal-library",
  47. "extra": {
  48. "installer-name": "google_charts"
  49. },
  50. "dist": {
  51. "url": "https://www.gstatic.com/charts/loader.js",
  52. "type": "file"
  53. },
  54. "require": {
  55. "composer/installers": "~1.0"
  56. }
  57. }
  58. }
  59. to your project's composer.json, and then running:
  60. composer require --prefer-dist google/charts:45
  61. There are numerous tutorials on Drupal.org and elsewhere on the web if you are
  62. looking for more information about how to use Composer with Drupal 8.
  63. Using Composer and wikimedia/composer-merge-plugin:
  64. 1: Ensure that you have the 'wikimedia/composer-merge-plugin` package installed.
  65. 2: Ensure that you have the `oomphinc/composer-installers-extender` package
  66. installed.
  67. 3: Add an "installer-types" section in the "extra" of your project composer.json
  68. file, make sure you have "bower-asset" and "npm-asset" listed.
  69. For example:
  70. "installer-types": [
  71. "bower-asset",
  72. "npm-asset"
  73. ],
  74. 4: In the "installer-paths" section in the "extra" of your project composer.json
  75. file, ensure you have the types drupal-library, bower-asset, and npm-asset.
  76. For example:
  77. "web/libraries/{$name}": [
  78. "type:drupal-library",
  79. "type:bower-asset",
  80. "type:npm-asset"
  81. ],
  82. 5: Add a "merge-plugin" section in the "extra" of your project composer.json
  83. file, so that the composer.json file of the sub-modules you want is included.
  84. For example:
  85. "merge-plugin": {
  86. "include": [
  87. "web/modules/contrib/charts/modules/charts_highcharts/composer.json"
  88. ]
  89. },
  90. 6: Run the 'composer require' specified in the sub-module's README.txt file
  91. Creating Charts in the UI
  92. -------------------------
  93. This module provides a configuration page at admin/config/content/charts. You
  94. may set site-wide defaults on this page (for example set the default color
  95. scheme).
  96. In order to actually create a chart through the UI, you'll need to use Views
  97. module.
  98. - Create a new view:
  99. Visit admin/structure/views/add and select the display format of "Chart" for
  100. your new page or block.
  101. - Add a label field:
  102. Under the "Fields" section, add a field you would like to be used as labels
  103. along one axis of the chart (or slices of the pie).
  104. - Add data fields:
  105. Now a second field that will be used to determine the data values. If you
  106. are visualizing an Event content type, this field might be
  107. field_number_attendees. The label you give this field will be used in the
  108. chart's legend to represent this series. Do this again for
  109. each different quantity you would like to chart. Note that some charts
  110. (e.g. Pie) only support a single data column.
  111. - Configure the chart display:
  112. Click on the "Settings" link in the Format section to configure the chart.
  113. Select your chart type. Some options may not be available to all chart types
  114. and will be adjusted based on the type selected.
  115. - Save your view.
  116. Tip: You may find it easier to start with a "Table" display and convert it to a
  117. chart display after setting up the data. It can be easier to visualize what
  118. the result of the chart will be if it's been laid out in a table first.
  119. Creating Multiple Series and Combo Charts in the UI
  120. ---------------------------------------------------
  121. A major difference between the Drupal 7 and Drupal 8 versions of this module is
  122. that the Drupal 8 module uses a Chart Attachment plugin for creating a separate
  123. chart series that can be attached to a parent display.
  124. Using Charts with custom Views Fields
  125. -------------------------------------
  126. If you are using custom views fields (extended from
  127. Drupal\views\Plugin\views\field\FieldPluginBase) to generate numbers or other
  128. data, you will need to set the getValue() function in your custom field to
  129. return your data. Data returned in render() is not used when building the chart.
  130. You may look in src/Util/Util.php to see how the field data is extracted and
  131. used by the Charts module.
  132. Support
  133. -------
  134. For bug reports and feature requests please use the Drupal.org issue tracker:
  135. http://drupal.org/project/issues/charts.
  136. We welcome your support in improving code documentation, tests, and providing
  137. example use-cases not addressed by the existing module.
  138. If you are interested in creating your own sub-module for a library not
  139. currently supported (for example, Flot), please contact @andileco