Experience in using amchart

Source: Internet
Author: User
Plato Tag: amcharts, configuration file, object structure, data file

Amchart Related Materials

In general:

Amcharts needs a "configuration file" (setting. XML), a data file (amile_data.xml), and a swfobject. js. A corresponding SWF can generate a beautiful statistical report.

1 swfobject v1.5 object structure

View plaincopy to clipboardprint?

  1. Deconcept
  2. Util
  3. Getrequestparameter (_ 2b) // obtain the URL parameter value. _ 2B is the URL key.
  4. Swfobjectutil
  5. Getplayerversion () // gets the version number object. Major. Minor. Rev.
  6. Cleanupswfs () // clear all <Object> elements on the page.
  7. Swfobject (_ 1, ID, W, H, _ 5, C, _ 7, _ 8, _ 9, _)
  8. // _ 1: SwF, specify the SWF file path.
  9. // _ ID: ID, the ID of the <embed> or <Object> label.
  10. // W: width, attribute width.
  11. // H: height, attribute height.
  12. // _ 5: version, Flash version. By default, the local flash plug-in version is automatically read.
  13. // C: bgcolor, background color.
  14. // _ 7: Quality (low, high, autolow, autohigh, best ).
  15. // _ 8: xiredirecturl
  16. // _ 9: redirecturl
  17. // _ A: URL parameter key
  18. Useexpressinstall (_ d) // set the xiswfpath and useexpressinstall attributes
  19. Setattribute (_ e, _ f) // sets the attribute attributes. _ E is the key, and _ f is the value.
  20. Getattribute (_ 10) // gets the value of attribute attributes. _ 10 is the key.
  21. Addparam (_ L1, _ l2) // set the Params parameter. _ L1 is the key and _ L2 is the value.
  22. Getparams () // get Params.
  23. Addvariable (_ L3, _ L4) // sets the variable variables. _ 13 is the key, and _ 14 is the value.
  24. Getvariable (_ l5) // obtain the value in the variable variables.
  25. Getvariables () // get the variable variables.
  26. Getvariablepairs () // get the key = value pair array of the variable variables.
  27. Getswfhtml () // return the HTML embedded in Flash
  28. // Example:
  29. // <Embed type = "application/X-Shockwave-flash"
  30. // Src = "/amchart/amcolumn/amcolumn.swf" mce_src = "amchart/amcolumn/amcolumn.swf"
  31. // Width = "520" Height = "380"
  32. // Style = "undefined" mce_style = "undefined"
  33. // Id = "amcolumn" name = "amcolumn"
  34. // Bgcolor = "# ffffff"
  35. // Quality = "high"
  36. // Flashvars = "Path =/amchar/amcolumn/&settings_file=amcolumn_settings.xml&data_file=amcolumn_data.txt & preloader_color = #000000"/>
  37. Write (_ 20) // the position where the flash is inserted. _ 20 can be the ID or a DOM node.
  38. Playerversion (_ 29) // create a version number object.
  39. Versionisvalid (Fv) // verify that the current flash plug-in version is compatible with the FV version number (greater than or equal ).
  40. Getqueryparamvalue = deconcept. util. getrequestparameter;
  41. Flashobject = deconcept. swfobject;
  42. Swfobject = deconcept. swfobject;

2. Data Files
Supports CSV and XML formats.
CSV is actually a text file, not an Excel file. Therefore, you can directly use a text file to name it.
Data in each column can be separated by ";" or.
For example:
// Amcolumn_data.txt
2003; 2.5
2004; 4.6
2005; 5.8
2006; 3.8
2007; 4.8
2008; 6.8
2009; 7.8

3. Configuration File
For example:

View plaincopy to clipboardprint?

  1. // Amcolumn_settings.xml
  2. <? XML version = "1.0" encoding = "UTF-8"?>
  3. <Settings>
  4. <! -- Chart config -->
  5. <Data_type> CSV </data_type> <! -- [XML] (XML/CSV) -->
  6. <Digits_after_decimal> 2 </digits_after_decimal>
  7. <Legend>
  8. <Enabled> false </enabled>
  9. </Legend>
  10. <! -- Plugin config -->
  11. <Plugins>
  12. <! -- Value indicator plugin is suitable for line chart, column chart & XY chart -->
  13. <Plugin file = "/amchart/amcolumn/plugins/value_indicator.swf" position = "abve"> <! -- File shoshould be located in "path" folder. position can be "behind" or "above". "behind" means that the plugin will be loaded behind graphs -->
  14. <Chart_type> column </chart_type> <! -- [Line] (line/column/XY) This plugin can be used with line or with column chart -->
  15. <Axis> </axis> <! -- [Left] (left/right/x/y) if used with line chat use left or right, if used with XY chart, use X or Y -->
  16. <Line_color >#000000 </line_color> <! -- [# Bbbb00] (hex color code) -->
  17. <Line_alpha> </line_alpha> <! -- [100] (0-100) -->
  18. <Text_color> #000000 </text_color> <! -- [Settings. text_color] -->
  19. <Text_size> 13 </text_size> <! -- [Settings. tex_size] -->
  20. <Precision> 2 </precision> <! -- [0] (number) How to specify numbers after comma shocould be shown -->
  21. </Plugin>
  22. </Plugins>
  23. </Settings>

4. display on html

View plaincopy to clipboardprint?

  1. <Body>
  2. <! -- Save from url = (0013) about: Internet -->
  3. <! -- Amcolumn script -->
  4. <Div id = "flashcontent">
  5. <Strong> you need to upgrade your Flash Player </strong>
  6. </Div>
  7. <MCE: Script Type = "text/JavaScript"> <! --
  8. VaR so = new swfobject ("/amchart/amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "# ffffff "); // create a swfobject object
  9. So. addvariable ("path", "/amchart/amcolumn/"); // This attribute is used for cracking. Now, we have written the example.
  10. So. addvariable ("settings_file", encodeuricomponent ("amcolumn_settings.xml"); // configuration file
  11. So. addvariable ("data_file", encodeuricomponent ("amcolumn_data.txt"); // data file
  12. So. addvariable ("preloader_color", "#000000"); // The color displayed during loading
  13. So. Write ("flashcontent"); // write the HTML inserted by flash into the Flash content location
  14. // --> </MCE: SCRIPT>
  15. <! -- End of amcolumn script -->
  16. </Body>

5. Crack amchart
The "chart by amcharts.com" link will appear in the upper left corner when the uncracked amchart is displayed, which indicates that it is an unregistered version and is very annoying.
Principle: What you see on the Internet.
Use the SWF decompiler software to load the SWF file and find mainmoive in action under resources. The Code contains the following section:

View plaincopy to clipboardprint?

  1. Function checkkey (Serial)
  2. {
  3. VaR _ L1 = com. amcharts. utils. stripsymbols (serial ,"");
  4. _ L1 = com. amcharts. utils. stripsymbols (_ L1, "\ n ");
  5. _ L1 = com. amcharts. utils. stripsymbols (_ L1, "\ r ");
  6. _ L1 = com. amcharts. utils. stripsymbols (_ L1, "\ r \ n ");
  7. Arr = _ l1.split ("-");
  8. If (number (ARR [2]) + number (ARR [3])! = 8645 | Number (ARR [2]. substr (1, 1)-number (ARR [3]. substr (2, 1 ))! = 2)
  9. {
  10. Attachmovie ("copyright_mc", "copyright_mc", 1001 );
  11. } // End if
  12. } // End of the Function

This is the serial number code.
Key_loader.loadvars (path + "amcharts_key.txt", this, "checkkey", false, "checkkey ");
Cracking:
Create amcharts_key.txt In the SWF directory.
The Input Serial number is as follows: 0000-0000-1422-7223.
Save and pass the test! I did not expect that they would adopt such a simple encryption method!
Note: During the test, the problem is found. When amcharts_key.txt is correctly placed in the SWF file directory, the cracking may fail.
1) amcolumn, amline, and ampie are related to so. addvariable ("path. The Property setting error cannot be cracked.
2) amstock seems unable to crack!

The above are posted online.

The following are some special attributes of the Setting. xml file.

View plaincopy to clipboardprint?

  1. <Graphs> <! -- Graphs settings. these settings can also be specified in data file, as attributes of <graph>, in this case you can delete everything from <graphs> to </graphs> (including) -->
  2. <Graph gid = "registerall"> <! -- If you are using XML data file, graph "gid" must match graph "gid" in data file -->
  3. <Axis> </axis> <! -- [Left] (left/right) indicates which y axis shocould be used -->
  4. <Title> registerall </title> <! -- [] (Graph title) -->
  5. <Color> # 0000ff </color> <! -- [] Line color (hex Color Code) if not defined, uses colors from this array: # ff0000, # 0000ff, #00ff00, # ff9900, # cc00cc, #00 CCCC, #33ff00, #990000, #000066 -->
  6. <Color_hover> # ff0000 </color_hover> <! -- [# Bbbb00] link color (hex color code) -->
  7. <Line_alpha> 100 </line_alpha> <! -- [100] (0-100) Whether to display lines. The greater the value is, the clearer the line is. The concentration of 0 is 0. -->
  8. <Line_width> 0 </line_width> <! -- [0] line width, not length .. (number) 0 for hairline -->
  9. <Fill_alpha> </fill_alpha> <! -- [0] fill in the line (0-100) If you want the chart to be Area Chart, use bigger than 0 value -->
  10. <Fill_color> </fill_color> <! -- [GRPA. Color] fill color gradient (hex color code) separate color codes with comas for gradient -->
  11. <Balloon_color> </balloon_color> <! -- [Graph color] specifies the line color. For example, if you place the cursor on a node, a hex color code (hex color code) leave empty to use the same color as graph is displayed. -->
  12. <Balloon_alpha> 90 </balloon_alpha> <! -- [100] indicates a gradient of the background color (0-100) -->
  13. <Balloon_text_color> </balloon_text_color> <! -- [# Ffffff] prompt text color (hex color code) -->
  14. <Bullet> round </bullet> <! -- [] Node display method, for example, square, round (circle) (square, round, square_outlined, round_outlined, filename.swf) can be used predefined bullets or loaded custom bullets. leave empty if you don't want to have bullets at all. outlined bullets use Plot area color for outline color -->
  15. <! -- The chart will look for this file in amline_path folder (amline_path is set in HTML) -->
  16. <Bullet_size> 0 </bullet_size> <! -- [6] node display mode size gradient (number) affects only predefined (square and round) bullets, does not change size of custom loaded bullets -->
  17. <Bullet_color> # 0000ff </bullet_color> <! -- [Graph color] hex color code affects only predefined (square and round) bullets, does not change color of custom loaded bullets. leave empty to use the same color as graph -->
  18. <Bullet_alpha> 100 </bullet_alpha> <! -- [Graph Alpha] the node displays the size gradient, which is similar to the above (hex color code) leave empty to use the same Alpha as graph -->
  19. <Hidden>
  20. <Selected> true </selected> <! -- [True] (true/false) if true, balloon indicating value will be visible then roll over Plot Area -->
  21. <Balloon_text>
  22. <! -- [CDATA [<B >{value} </B> (count) User Registration <B >{description} </B>] --> <! -- [<B> {value} </B> <br> {description}] ({Title} {value} {series} {description} {percents }) you can format any balloon text: {Title} will be replaced with real title, {value}-with value and so on. you can add your own text or HTML code too. -->
  23. </Balloon_text> <! -- Prompt information: Any prompt information you want can be displayed, provided that registergenre. php puts the value in! Dynamic Data Acquisition -->
  24. <Data_labels>
  25. <! -- [] Information displayed at the node ({Title} {value} {series} {description} {percents}) data labels can display value (and more) near your point on the plot area. -->
  26. <! -- To avoid overlapping, data labels, the same as bullets are not visible if there are more then hide_bullets_count data points on Plot area. -->
  27. </Data_labels>
  28. <Data_labels_text_color> </data_labels_text_color> <! -- [Text_color] node color (hex color code) -->
  29. <Data_labels_text_size> 10 </data_labels_text_size> <! -- [Text_size] node font size (number) -->
  30. <Data_labels_position> </data_labels_position> <! -- [Above] How to show that below is under the X axis when the number of nodes is 0; abve is above the X axis (below/above) -->
  31. <Vertical_lines> </vertical_lines> <! -- [False] whether to display the vertical line of a node (true/false) Whether to draw vertical lines or not. If you want to show vertical lines only (without the graph, set line_alpha to 0 -->
  32. <Visible_in_legend> </visible_in_legend> <! -- [True] (true/false) Whether to show legend entry for this graph or not -->
  33. </Graph>

This is the setting of the chart display style...

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.