A better jQuery UI component set for Wijmo: CompositeChart)

Source: Internet
Author: User
Tags macbook

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

 

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

 

----

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.  
  3. fill: "#8ede43", stroke: "#7fc73c", opacity: 0.8 
  4.  
  5. }], 
  6.  
  7. seriesHoverStyles: [{ 
  8.  
  9. "stroke-width": "1.5", opacity: 1 
  10.  
  11. }] 

 

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

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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