Javascript chart Library: dojo charting

Document directory

• Import charting class
• Two declaration Methods
• Build a Website access statistics chart by hand
• Animations, legends, and tags
• Zooming and panning)
• Event binding
• Theme)
• Other charts

 

Dojo charting is a chart project under the dojox directory. It provides many chart types, custom options, and various themes. As one of the most powerful functional libraries of dojo, the chart Library (charting) may not be widely used, which is a pity. Therefore, this article mainly recommends a powerful dojo chart library, it also describes how to use the dojo chart library to convert boring datasets into beautiful and practical charts.

Import charting class

Unlike many other dojo function libraries, charting does not need to import a large number of classes. This is due to the loose coupling design of the charting library. You only need to add the chart control library you need. In this example, three chart control classes are added: Two-Dimensional chart classes, legend classes, and appearance theme classes.

/* Required modules for the basic chart */<br/> // main 2D chart class <br/> dojo. require ("dojox. charting. widget. chart2d "); <br/> // class to create a legend for our chart <br/> dojo. require ("dojox. charting. widget. legend "); <br/> // a theme for our chart <br/> dojo. require ("dojox. charting. themes. tom ");

Two declaration Methods

Similar to the vast majority of other widgets in Dojo, charting also supports "tag Declaration" and "code creation" to create a chart. Next, let's take a look at the two examples.

 

The JSON data used in the example is as follows:

VaR piedata = [{"X": "1", "Y": "9420" },{ "X": "2", "Y": "10126 "}, {"X": "3", "Y": "9803" },{ "X": "4", "Y": "15965 "}, {"X": "5", "Y": "17290" },{ "X": "6", "Y": "15667 "}, {"X": "7", "Y": "17762"}];

Create a chart using label Declaration

You can directly create charts using HTML tags. in the newly created chart tags, HTML Tag declarations can be used for chart types (bar charts, pie charts, line charts, etc.) and rulers. The following is an example of a pie chart declaration:

<! -Create the chart-> <br/> <Div dojotype = "dojox. charting. widget. chart2d "id =" viewschart "theme =" dojox. charting. themes. plotkit. green "style =" width: 550px; Height: 550px; "> </P> <p> <! -Add the plot-> <br/> <Div class = "plot" name = "default" type = "pie" radius = "200" fontcolor = "black" labeloffset =" -20 "> </div> </P> <p> <! -Piedata is the data source-> <br/> <Div class = "series" name = "January" array = "piedata"> </div> </P> <p> <! -Tooltips! -> <Br/> <Div class = "action" type = "tooltip"> </div> </P> <p> <! -Slice animation! -> <Br/> <Div class = "action" type = "moveslice" shift = "2"> </div> </P> <p> </div>

 

 

Use code programming to create charts

It is also very easy to create charts by programming. The following JavaScript code creates a pie chart that is exactly the same as that in the preceding example.

 

<Div id = "piechart" style = "height: 550px; width: 550px;"> </div>

Dojo. addonload (function () {<br/> ...... <br/> var piedata = [{"X": "1", "Y": "9420" },{ "X": "2", "Y ": "10126" },{ "X": "3", "Y": "9803" },{ "X": "4", "Y ": "15965" },{ "X": "5", "Y": "17290" },{ "X": "6", "Y ": "15667" },{ "X": "7", "Y": "17762"}]; <br/> // create the chart <br/> var piechart = new dojox. charting. chart2d ("piechart"); <br/> // set the theme <br/> piechart. settheme (dojox. charting. theme S. tom); <br/> // Add plot <br/> piechart. addplot ("default", {<br/> type: "pie", <br/> radius: 200, <br/> fontcolor: "black ", <br/> labeloffset: "-20" <br/>}); <br/> // Add the data series <br/> piechart. addseries ("January", piedata); <br/> // slice animation! <Br/> New dojox. charting. action2d. moveslice (piechart, "default"); <br/> // tooltips! <Br/> New dojox. charting. action2d. tooltip (piechart, "default"); <br/> // render the chart <br/> piechart. render (); <br/> ...... <br/> });

Looking back at the two creation methods, we can find that the two structures are very similar. In the next example, we will use the programming method to create a chart. In actual development, developers are free to choose the creation method.

Build a Website access statistics chart by hand

Now we have a preliminary understanding of dojo charting. Next we will create a simple chart to further understand various functions in charting. In this example, we use stackedareas to compare the website traffic in three months.

First, you need to have three months of website traffic, which is represented by JSON data, and the data for the same month is represented by data:

VaR JSON = {<br/> January: [9420,10126, 9803,15965, 17290 ,/*... */13165, 12390], <br/> February: [23990,32975, 23477,22513, 18069 ,/*... */12956,12815], <br/> March: [22477,24014, 21116,20404, 19142 ,/*... */22077,20263] <br/> };

 

Second, create a stacked block chart:

// We have a div element with an ID of "chart1"; that's the argument <br/> var chart1 = new dojox. charting. chart2d ('chart1'); <br/> // Add the default plot <br/> chart1.addplot ("default ", {<br/> // type of chart <br/> type: "stackedareas", <br/> // show markers at number points? <Br/> markers: True, <br/> // curve the lines on the plot? <Br/> tension: "S", <br/> // show lines? <Br/> lines: True, <br/> // fill in areas? <Br/> areas: True, <br/> // offset position for label <br/> labeloffset:-30, <br/> // Add shadows to lines <br/> shadows: {DX: 2, DY: 2, DW: 2} <br/> });

 

 

Because the specific numbers are extremely important to website traffic, we need to add a ruler (axis). The X axis ruler represents the date, and the Y axis ruler represents the traffic.

Chart1.addaxis ("X"); <br/> chart1.addaxis ("Y", {vertical: true });

 

 

Now the chart framework (type and ruler) has been set up. The next step is to bind the data of each month. In addition, we can use the stroke and fill variables to directly declare the color of each month.

Chart1.addseries ("January visits", JSON ["January"], {stroke: "red", fill: "pink"}); <br/> chart1.addseries ("February visits ", JSON ["February"], {stroke: "green", fill: "lightgreen"}); <br/> chart1.addseries ("March visits", JSON ["March"], {stroke: "blue", fill: "lightblue "});

 

Well, the basic elements are all in place. Finally, you only need to call the render Function Chart to generate it.

Chart1.render ();

 

 

Animations, legends, and tags

In addition to basic chart functions, charting also provides many practical functions.

Legend

Legends are also essential for charts. It is also easy to add a legend to dojo charting.

// This legend is created within an element with a "legend1" Id. <br/> var legend1 = new dojox. charting. widget. legend ({chart: chart1}, "legend1 ");

Animation

You can add animation interaction effects (such as highlight, zoom in, and slide out) to a static chart so that you can see the details more clearly. Different chart types support their own set of animation interaction effects. The following code adds an animation effect of "zoom in" to the chart. When you hover the mouse over the chart node, you can zoom in the node.

// Add the magnification animation to our chart for the default plot <br/> var magnify = new dojox. charting. action2d. Magnify (chart1, "default ");

 

Mark

Although there is a data ruler on the X and Y axes, we still cannot confirm the value of each node, so we need to introduce the mark. Adding a tag is also very simple.

VaR tip = new dojox. charting. action2d. tooltip (chart1, "default ");

 

 

Note that the theme CSS file of dijit needs to be introduced for the tooltip function. The tundra topic is used here.

Zooming and panning)

Dojo charting also provides functions that support chart scaling and movement. For relevant examples, see zooming, scrolling, and panning in Dojo charting.
Or view a great example of panning, scrolling, And zooming!

Event binding

Dojo charting has its own event binding method: connecttoplot. With this method, you can trigger your own events. For more information about the connecttoplot function, see the dojo charting reference guide.

Chart1.connecttoplot ("default", function (e) {<br/>/* Do something */<br/> });

 

Theme)

The dojo charting Library provides over 30 different theme styles. You can see these topic previews, and I will also translate an article about how to customize the dojo charting topic dive into dojo chart theming

Other charts

The example above describes a chart with basic functions. dojo charting also has many advanced features.

• Two-dimensional chart (example
  )
• 3D chart (example
  )
• Charts bound to dynamic data sources (simple example
  , Stock chart
  , Tutorial
  )

 

Http://www.sitepen.com/blog/2010/07/13/dive-into-dojo-charting/