SoFunction
Updated on 2025-04-14

Data Chart

Now let’s take a look at some VML applications. Data charts can be said to be VML's specialty. Draw a chart,The most important step is to convert the data into coordinates. Since VML is vector, there is a lot of freedom to give the data value range, because you can use coordinate values ​​with decimals or very large data as coordinate values.
Before making a chart, you must clarify something and regard the chart as a whole, which means using Group to include VML; the x and y axis is within the fourth image limit; the size of the VML is determined by width,height, not by coordsize. Next, let's take a look at a few classic charts.
    Curve chart (trend chart): It looks like a curve, but in fact it is divided into small polylines. So we can choose PolyLine to do it. First, let’s draw the coordinate axis:
<v:group ID="group1" style="WIDTH:500pt;HEIGHT:300pt" coordsize="5000,3000">
  <v:line from="200,100" to="200,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
    <v:stroke StartArrow="classic"/>
  </v:line>
  <v:line from="200,2800" to="4800,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
    <v:stroke EndArrow="classic"/>
  </v:line>
  <v:rect style="WIDTH:4900px;HEIGHT:3000px" coordsize="21600,21600" fillcolor="white" strokecolor="black" />
</group>

Maybe you want to display the scale on the coordinate axis, which is also easy to implement. We can use an absolute positioning P as the coordinates. In the Group, using absolute is actually relative to the Group. The coordinate value needs to be adjusted by yourself. Because we use px=200+73*i; (where 200 is the distance from the left) The vertical coordinate is py=2800-73*i; (because the total height is 2800, you need to use subtraction) Now, it is easy to convert data into coordinates. Of course, the i here is 0,1,2..7, which can also be your specific data. When converting, you only need to get the coordinate value according to the proportion. For example, the value of your vertical coordinate is from 100, 200, 300, ..700. The corresponding reaction to the coordinate is px=200+73*i*1/100(where i is the data value, 1/100 is the ratio of coordinate value and data)


The preparations for drawing charts have been done, and now the data is missing. With data, instill the data into PolyLine and the curve is displayed. Now let’s use some fake data to see how the above effect is!
There are many examples in this section, please visit the next page.