Home > Developer > Web Develop

A better jQuery UI component set for Wijmo: CompositeChart)

Source: Internet
Author: User
Tags macbook
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/13231L648-0.png "width =" 562 "height =" 364 "/>

Wijmo's CompositeChart control allows you to use a Chart to analyze and present complex data. Different visualization effects can be used for the same data, and different chart types are displayed in One chart, so that users can understand the content expressed by this data set from different perspectives.

This article describes how to use the Wijmo CompositeChart control to create a composite chart. CompositeChart API: http://wijmo.com/wiki/index.php/Compositechart,Wijmo CompositeChart to simplify, the traditional Excel like chart in the three areas: Plot Area, Legend Area, Label Area, separated into a simpler API: SeriesList, Legend, axis and Hint make it easier for developers to understand and use them.

Wijmo's CompositeChart relies on the following five core JavaScript libraries:

Raphael. js

Globalize. min. js

Jquery. ui. widget. js

Jquery. wijmo. raphael. js

Jquery. wijmo. wijchartcore. js

If you want to add other types of charts, you need to introduce JavaScript libraries of other Chart types. This allows developers to flexibly customize and crop JavaScript libraries suitable for their own use cases. For example, this example uses PieChart, BarChart, and LineChart. The introduced JavaScript library is as follows:

Jquery-1.7.1.min.js

Jquery-ui-1.8.18.custom.min.js

Globalize. min. js

Raphael-min.js

Jquery. wijmo. raphael. js

Jquery. wijmo. wijchartcore. js

Jquery. wijmo. wijbarchart. js

Jquery. wijmo. wijpiechart. js

Jquery. wijmo. wijlinechart. js

Jquery. wijmo. wijcompositechart. js

Write the code and set the Chart:

 

 
 
    
  
  
  1. $(document).ready(function () { 
    2. 
  
  
  2.  
    3. 
  
  
  3. $("#wijcompositechart").wijcompositechart({ 
    4. 
  
  
  4.  
    5. 
  
  
  5. axis: { 
    6. 
  
  
  6.  
    7. 
  
  
  7. y: { 
    8. 
  
  
  8.  
    9. 
  
  
  9. text: "Total Hardware" 
    10. 
  
  
  10.  
    11. 
  
  
  11. }, 
    12. 
  
  
  12.  
    13. 
  
  
  13. x: { 
    14. 
  
  
  14.  
    15. 
  
  
  15. text: "" 
    16. 
  
  
  16.  
    17. 
  
  
  17. } 
    18. 
  
  
  18.  
    19. 
  
  
  19. }, 
    20. 
  
  
  20.  
    21. 
  
  
  21. stacked: false, 
    22. 
  
  
  22.  
    23. 
  
  
  23. hint: { 
    24. 
  
  
  24.  
    25. 
  
  
  25. content: function () { 
    26. 
  
  
  26.  
    27. 
  
  
  27. return this.label + '\n ' + this.y + ''; 
    28. 
  
  
  28.  
    29. 
  
  
  29. } 
    30. 
  
  
  30.  
    31. 
  
  
  31. }, 
    32. 
  
  
  32.  
    33. 
  
  
  33. header: { 
    34. 
  
  
  34.  
    35. 
  
  
  35. text: "Hardware Distribution" 
    36. 
  
  
  36.  
    37. 
  
  
  37. }, 
    38. 
  
  
  38.  
    39. 
  
  
  39. seriesList: [{ 
    40. 
  
  
  40.  
    41. 
  
  
  41. type: "column", 
    42. 
  
  
  42.  
    43. 
  
  
  43. label: "West", 
    44. 
  
  
  44.  
    45. 
  
  
  45. legendEntry: true, 
    46. 
  
  
  46.  
    47. 
  
  
  47. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] } 
    48. 
  
  
  48.  
    49. 
  
  
  49. }, { 
    50. 
  
  
  50.  
    51. 
  
  
  51. type: "column", 
    52. 
  
  
  52.  
    53. 
  
  
  53. label: "Central", 
    54. 
  
  
  54.  
    55. 
  
  
  55. legendEntry: true, 
    56. 
  
  
  56.  
    57. 
  
  
  57. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] } 
    58. 
  
  
  58.  
    59. 
  
  
  59. }, { 
    60. 
  
  
  60.  
    61. 
  
  
  61. type: "column", 
    62. 
  
  
  62.  
    63. 
  
  
  63. label: "East", 
    64. 
  
  
  64.  
    65. 
  
  
  65. legendEntry: true, 
    66. 
  
  
  66.  
    67. 
  
  
  67. data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] } 
    68. 
  
  
  68.  
    69. 
  
  
  69. }, { 
    70. 
  
  
  70.  
    71. 
  
  
  71. type: "pie", 
    72. 
  
  
  72.  
    73. 
  
  
  73. label: "asdfdsfdsf", 
    74. 
  
  
  74.  
    75. 
  
  
  75. legendEntry: true, 
    76. 
  
  
  76.  
    77. 
  
  
  77. center: { x: 150, y: 150 }, 
    78. 
  
  
  78.  
    79. 
  
  
  79. radius: 60, 
    80. 
  
  
  80.  
    81. 
  
  
  81. data: [{ 
    82. 
  
  
  82.  
    83. 
  
  
  83. label: "MacBook Pro", 
    84. 
  
  
  84.  
    85. 
  
  
  85. legendEntry: true, 
    86. 
  
  
  86.  
    87. 
  
  
  87. data: 46.78, 
    88. 
  
  
  88.  
    89. 
  
  
  89. offset: 15 
    90. 
  
  
  90.  
    91. 
  
  
  91. }, { 
    92. 
  
  
  92.  
    93. 
  
  
  93. label: "iMac", 
    94. 
  
  
  94.  
    95. 
  
  
  95. legendEntry: true, 
    96. 
  
  
  96.  
    97. 
  
  
  97. data: 23.18, 
    98. 
  
  
  98.  
    99. 
  
  
  99. offset: 0 
    100. 
  
  
  100.  
    101. 
  
  
  101. }, { 
    102. 
  
  
  102.  
    103. 
  
  
  103. label: "MacBook", 
    104. 
  
  
  104.  
    105. 
  
  
  105. legendEntry: true, 
    106. 
  
  
  106.  
    107. 
  
  
  107. data: 20.25, 
    108. 
  
  
  108.  
    109. 
  
  
  109. offset: 0 
    110. 
  
  
  110.  
    111. 
  
  
  111. }] 
    112. 
  
  
  112.  
    113. 
  
  
  113. }, { 
    114. 
  
  
  114.  
    115. 
  
  
  115. type: "line", 
    116. 
  
  
  116.  
    117. 
  
  
  117. label: "Steam1", 
    118. 
  
  
  118.  
    119. 
  
  
  119. legendEntry: true, 
    120. 
  
  
  120.  
    121. 
  
  
  121. data: { 
    122. 
  
  
  122.  
    123. 
  
  
  123. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
    124. 
  
  
  124.  
    125. 
  
  
  125. y: [3, 6, 2, 9, 5] 
    126. 
  
  
  126.  
    127. 
  
  
  127. }, 
    128. 
  
  
  128.  
    129. 
  
  
  129. markers: { 
    130. 
  
  
  130.  
    131. 
  
  
  131. visible: true, 
    132. 
  
  
  132.  
    133. 
  
  
  133. type: "circle" 
    134. 
  
  
  134.  
    135. 
  
  
  135. } 
    136. 
  
  
  136.  
    137. 
  
  
  137. }, { 
    138. 
  
  
  138.  
    139. 
  
  
  139. type: "line", 
    140. 
  
  
  140.  
    141. 
  
  
  141. label: "Steam2", 
    142. 
  
  
  142.  
    143. 
  
  
  143. legendEntry: true, 
    144. 
  
  
  144.  
    145. 
  
  
  145. data: { 
    146. 
  
  
  146.  
    147. 
  
  
  147. x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], 
    148. 
  
  
  148.  
    149. 
  
  
  149. y: [1, 3, 4, 7, 2] 
    150. 
  
  
  150.  
    151. 
  
  
  151. }, 
    152. 
  
  
  152.  
    153. 
  
  
  153. markers: { 
    154. 
  
  
  154.  
    155. 
  
  
  155. visible: true, 
    156. 
  
  
  156.  
    157. 
  
  
  157. type: "tri" 
    158. 
  
  
  158.  
    159. 
  
  
  159. } 
    160. 
  
  
  160.  
    161. 
  
  
  161. } 
    162. 
  
  
  162.  
    163. 
  
  
  163. ] 
    164. 
  
  
  164.  
    165. 
  
  
  165. }); 
    166. 
  
  
  166.  
    167. 
  
  
  167. }); 
    168.

 

If there is not much code, it will have the following effect:

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" 1 "border =" 0 "alt =" 1 "src =" http://www.bkjia.com/uploads/allimg/131228/13231J617-1.png "width =" 768 "height =" 495 "/>

There are not many codes, so it is easy to analyze:

 

 
 
    
  
  
  1. --
    2. 
  
  
  2.  
    3. 
  
  
  3. Axis :{
    4. 
  
  
  4.  
    5. 
  
  
  5. Y :{
    6. 
  
  
  6.  
    7. 
  
  
  7. Text: "Total Hardware"
    8. 
  
  
  8.  
    9. 
  
  
  9. },
    10. 
  
  
  10.  
    11. 
  
  
  11. X :{
    12. 
  
  
  12.  
    13. 
  
  
  13. Text :""
    14. 
  
  
  14.  
    15. 
  
  
  15. }
    16. 
  
  
  16.  
    17. 
  
  
  17. --
    18. 
  
  
  18.  
    19. 
  
  
  19. Set the X and Y axes.
    20. 
  
  
  20.  
    21. 
  
  
  21. ---
    22. 
  
  
  22.  
    23. 
  
  
  23. Stacked: false
    24. 
  
  
  24.  
    25. 
  
  
  25. ---
    26. 
  
  
  26.  
    27. 
  
  
  27. Set Bar to non-stacked.
    28. 
  
  
  28.  
    29. 
  
  
  29. ---
    30. 
  
  
  30.  
    31. 
  
  
  31. Hint :{
    32. 
  
  
  32.  
    33. 
  
  
  33. Content: function (){
    34. 
  
  
  34.  
    35. 
  
  
  35. Return this. label + '\ n' + this. y + '';
    36. 
  
  
  36.  
    37. 
  
  
  37. }
    38. 
  
  
  38.  
    39. 
  
  
  39. },
    40. 
  
  
  40.  
    41. 
  
  
  41. ---
    42. 
  
  
  42.  
    43. 
  
  
  43. Set the mouse Tooltip.
    44. 
  
  
  44.  
    45. 
  
  
  45. ---
    46. 
  
  
  46.  
    47. 
  
  
  47. Header :{
    48. 
  
  
  48.  
    49. 
  
  
  49. Text: "Hardware Distribution"
    50. 
  
  
  50.  
    51. 
  
  
  51. },
    52. 
  
  
  52.  
    53. 
  
  
  53. ---
    54. 
  
  
  54.  
    55. 
  
  
  55. Set the chart header.
    56. 
  
  
  56.  
    57. 
  
  
  57. ----
    58. 
  
  
  58.  
    59. 
  
  
  59. SeriesList :[{
    60. 
  
  
  60.  
    61. 
  
  
  61. Type: "column ",
    62. 
  
  
  62.  
    63. 
  
  
  63. Label: "West ",
    64. 
  
  
  64.  
    65. 
  
  
  65. LegendEntry: true,
    66. 
  
  
  66.  
    67. 
  
  
  67. Data: {x: ['your tops', 'notebooks ', 'aio', 'tablets', 'phones'], y: [5, 3, 4, 7, 2]}
    68. 
  
  
  68.  
    69. 
  
  
  69. },{
    70. 
  
  
  70.  
    71. 
  
  
  71. Type: "column ",
    72. 
  
  
  72.  
    73. 
  
  
  73. Label: "Central ",
    74. 
  
  
  74.  
    75. 
  
  
  75. LegendEntry: true,
    76. 
  
  
  76.  
    77. 
  
  
  77. Data: {x: ['your tops', 'notebooks ', 'aio', 'tablets', 'phones'], y: [2, 2, 3, 2, 1]}
    78. 
  
  
  78.  
    79. 
  
  
  79. },{
    80. 
  
  
  80.  
    81. 
  
  
  81. Type: "column ",
    82. 
  
  
  82.  
    83. 
  
  
  83. Label: "East ",
    84. 
  
  
  84.  
    85. 
  
  
  85. LegendEntry: true,
    86. 
  
  
  86.  
    87. 
  
  
  87. Data: {x: ['your tops', 'notebooks ', 'aio', 'tablets', 'phones'], y: [3, 4, 4, 2, 5]}
    88. 
  
  
  88.  
    89. 
  
  
  89. },{
    90. 
  
  
  90.  
    91. 
  
  
  91. Type: "pie ",
    92. 
  
  
  92.  
    93. 
  
  
  93. Label: "asdfdsfdsf ",
    94. 
  
  
  94.  
    95. 
  
  
  95. LegendEntry: true,
    96. 
  
  
  96.  
    97. 
  
  
  97. Center: {x: 150, y: 150 },
    98. 
  
  
  98.  
    99. 
  
  
  99. Radius: 60,
    100. 
  
  
  100.  
    101. 
  
  
  101. Data :[{
    102. 
  
  
  102.  
    103. 
  
  
  103. Label: "MacBook Pro ",
    104. 
  
  
  104.  
    105. 
  
  
  105. LegendEntry: true,
    106. 
  
  
  106.  
    107. 
  
  
  107. Data: 46.78,
    108. 
  
  
  108.  
    109. 
  
  
  109. Offset: 15
    110. 
  
  
  110.  
    111. 
  
  
  111. },{
    112. 
  
  
  112.  
    113. 
  
  
  113. Label: "iMac ",
    114. 
  
  
  114.  
    115. 
  
  
  115. LegendEntry: true,
    116. 
  
  
  116.  
    117. 
  
  
  117. Data: 23.18,
    118. 
  
  
  118.  
    119. 
  
  
  119. Offset: 0
    120. 
  
  
  120.  
    121. 
  
  
  121. },{
    122. 
  
  
  122.  
    123. 
  
  
  123. Label: "MacBook ",
    124. 
  
  
  124.  
    125. 
  
  
  125. LegendEntry: true,
    126. 
  
  
  126.  
    127. 
  
  
  127. Data: 20.25,
    128. 
  
  
  128.  
    129. 
  
  
  129. Offset: 0
    130. 
  
  
  130.  
    131. 
  
  
  131. }]
    132. 
  
  
  132.  
    133. 
  
  
  133. },{
    134. 
  
  
  134.  
    135. 
  
  
  135. Type: "line ",
    136. 
  
  
  136.  
    137. 
  
  
  137. Label: "Steam1 ",
    138. 
  
  
  138.  
    139. 
  
  
  139. LegendEntry: true,
    140. 
  
  
  140.  
    141. 
  
  
  141. Data :{
    142. 
  
  
  142.  
    143. 
  
  
  143. X: ['users' tops ', 'notebooks', 'aio ', 'tablets', 'phones'],
    144. 
  
  
  144.  
    145. 
  
  
  145. Y: [3, 6, 2, 9, 5]
    146. 
  
  
  146.  
    147. 
  
  
  147. },
    148. 
  
  
  148.  
    149. 
  
  
  149. Markers :{
    150. 
  
  
  150.  
    151. 
  
  
  151. Visible: true,
    152. 
  
  
  152.  
    153. 
  
  
  153. Type: "circle"
    154. 
  
  
  154.  
    155. 
  
  
  155. }
    156. 
  
  
  156.  
    157. 
  
  
  157. },{
    158. 
  
  
  158.  
    159. 
  
  
  159. Type: "line ",
    160. 
  
  
  160.  
    161. 
  
  
  161. Label: "Steam2 ",
    162. 
  
  
  162.  
    163. 
  
  
  163. LegendEntry: true,
    164. 
  
  
  164.  
    165. 
  
  
  165. Data :{
    166. 
  
  
  166.  
    167. 
  
  
  167. X: ['users' tops ', 'notebooks', 'aio ', 'tablets', 'phones'],
    168. 
  
  
  168.  
    169. 
  
  
  169. Y: [1, 3, 4, 7, 2]
    170. 
  
  
  170.  
    171. 
  
  
  171. },
    172. 
  
  
  172.  
    173. 
  
  
  173. Markers :{
    174. 
  
  
  174.  
    175. 
  
  
  175. Visible: true,
    176. 
  
  
  176.  
    177. 
  
  
  177. Type: "tri"
    178. 
  
  
  178.  
    179. 
  
  
  179. }
    180. 
  
  
  180.  
    181. 
  
  
  181. }
    182. 
  
  
  182.  
    183. 
  
  
  183. ]
    184.

 

----

Set the SeriesList. For each Series, you can set its type, label, legendEntry, data, and other attributes. SeriesStyles and SeriesHoverStyles can be set for Series, such:

 

 
 
    
  
  
  1. seriesStyles: [{ 
    2. 
  
  
  2.  
    3. 
  
  
  3. fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8 
    4. 
  
  
  4.  
    5. 
  
  
  5. }], 
    6. 
  
  
  6.  
    7. 
  
  
  7. seriesHoverStyles: [{ 
    8. 
  
  
  8.  
    9. 
  
  
  9. "stroke-width": "1.5", opacity: 1 
    10. 
  
  
  10.  
    11. 
  
  
  11. }] 
    12.

 

After the above settings, this CompositeChart is set. You can also dynamically bind the Json data returned by the Server to generate a Chart.

 

Click here to download the instance code in this article.

 

Download Wijmo. Please goStudio for ASP. NET Wijmo 2012 v1 officially released 2012.03.22 )!

This article from the "grape city control blog" blog, please be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/857471

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
angular ui component library ui component library wijmo jquery ui cdn link jquery ui cdn google jquery ui flat theme jquery ui autocomplete widget

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More