Use chart (Chart) performance data in the web page

xiaoxiao2021-03-06  76

Use chart (Chart) performance data in the web page

One thing that often needs to be done in web program is to show the data (numbers) Isolated by the database using the chart (chart) in the page in the page. Below we will summarize several common practices.

1. If the style of the chart only needs the column chart (BAR), there is a very simple, lazy way, that is, it is possible to use some TAG's width properties. For example, as follows:

SRC = "small square .gif">

With this idea, if you are not too ugly, you simply use the number of contributions to control *. ;-) If you want to be more beautiful, you can combine the CSS design, and then DHTML.

A complete example of this method see: http://www.microsoft.com/Workshop/Database/DataVis/Datavis.asp

2. Some old brothers like to put the picture directly in the database, then let's see how to transfer them. (If these pictures are just chart, I don't count the issue .;-)) IIS's online help has such an example: http://localhost/iissample/sdk/asp/docs/codebrws.asp? Source = / Iissamples / SDK / ASP / DATABASE / BLOB_VBScript.asp Its core code: <% 'declared back to the GIF file, not the usual html response.buffer = true response.contenttype = "image / gif"' connected database set oponn = Server.createObject ("adodb.connection") Oconn.open "DSN = localserver; uid = sa; pwd =; database = pubs" Isors = Oconn.execute ("SELECT logo from pub_info where pub_id = '0736' ") 'Take the value to look professional ;-) picsize = ics (" logo "). Actualsize Pic = ORS (" logo "). Getchunk (picsize)' Emphasically emphasizes the GIF picture, View Source is a response.binarywrite pic response.end%>

Ok, read the old brother who carefully commented (I have no habit ;-)) will ask: This program mypic.asp is equivalent to http://host/foo/mypic.gif, I think What should I do if I have a text? Very simple, write a web page plus is not over. ;-)

3. There are also some old brothers, more than half of these heroes, is 8 CPU P III, they use Server-Side software, such as Excel, now a Chart image, then pass to the browser in GIF format. More common in CGI masters. ;-) Let's look at a such cool demo. Core code: <% set excel = getObject ("" "" "" "" "" Err.Description ") Err.Number <") Err. Create Excel Document. " Err.Description " "Err.clear End If excel.DisplayAlerts = False Set workbooks = excel.Workbooks Set wb = workbooks.Add Set sheets = wb.Sheets Set wsTotal = sheets.Add (,,, - 4167) wsTotal.Name = "Total_Expenses" Set range = wsTotal.Range ("B1") Range.formular1c1 = "1" set Range = Wstotal.Range ("c1") Range.formular1c1 = "2" set ranging = wstotal.Range ("D1") Range.formular1c1 = "3" wstotal. Activate wstotal.select

Set range = wstotal.Range ("B1: D1") Excel.Charts.add Excel.activechart.charttype = 51 Excel.ActiveChart.setSourceData Range, 2

Excel.activeChart.Export "D: / Test / Exceltest" ". GIF", "GIF"

Response.write ""%>

The real lazy man uses Excel's VBA (:-P) when writing this code, absolute code fast gunner, but the operation efficiency ---- 呸! ;-)

4. Ok, I should see a professional athlete's practice ---- use Chart Control. Which control is better for everyone, (like some old brothers like java applets ;-) There are some old brothers like to use C / C development) to simplify, here I recommend Microsoft (;-)) ---- Office 2000 Web COMPONENT. ;-)

In the previous article, I introduced several ways to combine the control and data, and we come to an analysis of how the Excel 2000 CHART Control is implemented.

A. Parallel assignment method Excel 2000 Chart Control has two assignment methods: arrays, strings. Array Method: Code Example: ---------------------------------

'Preparing ;-) chartspace1.clear chartspace1.charts.add set c = chartspace1.constants

'Add three series of value chartspace1.Charts (0) .seriescollection.add chartspace1.charts (0) .seriescollection.add chartspace1.charts (0) .seriescollection.add

'Jinzhu ;-) chartspace1.charts (0) .seriescollection (0) .caption = "peot"

'Set chartspace1.charts (0) .seriescollection (0) .SetData C.chdimcategories, C.chdataral, Categories

Values ​​(0) = 0.2 'The White Value. Values ​​(1) = 0.06' The Black Value. Values ​​(2) = 0.17 'The Asian Value. Values ​​(3) = 0.13' The latino value.

ChartSpace1.Charts (0) .SeriesCollection (0) .Caption = "Perot" ChartSpace1.Charts (0) .SeriesCollection (0) .SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts (0) .SeriesCollection (0) .SetData C.chdimvalues, C.chdataliteral, Values

'Series Two Contains Electrory Data for Clinton.' Update The Values ​​Array, The Set The Chart Data. Values ​​(0) = 0.38 'The White Value. VALUES (1) = 0.82' The Black Value. Values ​​(2) = 0.28 ' The Asian Value. Values ​​(3) = 0.62 'The latino value.

ChartSpace1.Charts (0) .SeriesCollection (1) .Caption = "Clinton" ChartSpace1.Charts (0) .SeriesCollection (1) .SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts (0) .SeriesCollection (1) .SetData C.chdimvalues, C.chdataliteral, Values' Series Two Contains Election Data For Bush. 'Update The VALUES ARRAY, AND THEN SET The Chart Data. Values ​​(0) = 0.42' The White Value. VALUES (1) = 0.12 'The Black Value. Values ​​(2) = 0.55' The asian value. Values ​​(3) = 0.25 'The latino value.

ChartSpace1.Charts (0) .SeriesCollection (2) .Caption = "Bush" ChartSpace1.Charts (0) .SeriesCollection (2) .SetData c.chDimCategories, c.chDataLiteral, categories ChartSpace1.Charts (0) .SeriesCollection (2) .SetData C.chdimvalues, C.chdataliteral, Values

'Make the chart legend visible, format the left value axis as percentage,' and specify that value gridlines are at 10% intervals. ChartSpace1.Charts (0) .HasLegend = True ChartSpace1.Charts (0) .Axes (c.chAxisPositionLeft) .Numberformat = "0%" chartspace1.Charts (0) .axes (c.chaxispositionLes) .majorunit = 0.1END SUB

String method: code example: --------------------------