Commit 04abbfdf authored by Paul Asmuth's avatar Paul Asmuth
Browse files

add area chart y1 and y2 properties, update area chart examples

parent 7de0ba21

README.md

+1 −1
Original line number Diff line number Diff line
@@ -111,7 +111,7 @@ Here are some more examples of plots generated by PlotFX: 
      <img src="./examples/linecharts/lines_with_labels.svg">

    </td>

    <td width="50%">

      <img src="./examples/areacharts/examples_area_ranges.png?raw=true">

      <img src="./examples/areacharts/area_ranges.svg">

    </td>

  </tr>

</table>

examples/areacharts/area_ranges.ptx

0 → 100644
+18 −0
Original line number Diff line number Diff line 
width: 1200px;

height: 480px;



plot {

  axis-x-format: datetime("%H:%M:%S");



  data: csv('examples/data/areadata2.csv', time);

  x: x;

  group: series;



  grid-x: geom;



  layer {

    type: area;

    y1: y;

    y2: z;

  }

}

examples/areacharts/area_ranges.sql

deleted100644 → 0
+0 −16
Original line number Diff line number Diff line 
IMPORT TABLE example_data

   FROM 'csv:examples/data/areadata2.csv?headers=true';



DRAW AREACHART WITH

   AXIS TOP

   AXIS BOTTOM

   AXIS RIGHT

   AXIS LEFT;



SELECT

      series AS series,

      x AS x,

      y AS y,

      z AS z

   FROM example_data

   WHERE series = "series2" or series = "series1";

examples/areacharts/area_ranges.svg

0 → 100644
+81 −0
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" width="1200.000000" height="480.000000" viewBox="0 0 1200.0 480.0">

  <rect width="1200.000000" height="480.000000" fill="#ffffff"/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 44.4 L1140.1625 44.4 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 44.4 L59.8375 49.733333 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M214.16965 44.4 L214.16965 49.733333 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M368.5018 44.4 L368.5018 49.733333 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M522.833965 44.4 L522.833965 49.733333 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M677.166099 44.4 L677.166099 49.733333 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M831.498233 44.4 L831.498233 49.733333 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M985.830431 44.4 L985.830431 49.733333 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 44.4 L1140.1625 49.733333 "/>

  <text x="31.290625" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:10</text>

  <text x="185.622775" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:15</text>

  <text x="339.954925" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:21</text>

  <text x="494.287090" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:27</text>

  <text x="648.619224" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:32</text>

  <text x="802.951358" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:38</text>

  <text x="957.283556" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:44</text>

  <text x="1111.615625" y="28.666667" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:50</text>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 44.4 L1140.1625 435.6 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 435.6 L1134.829167 435.6 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 379.714283 L1134.829167 379.714283 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 323.828566 L1134.829167 323.828566 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 267.942844 L1134.829167 267.942844 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 212.057133 L1134.829167 212.057133 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 156.171422 L1134.829167 156.171422 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 100.285688 L1134.829167 100.285688 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 44.4 L1134.829167 44.4 "/>

  <text x="1151.895833" y="440.600000" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-41.7</text>

  <text x="1151.895833" y="384.714283" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-28.5</text>

  <text x="1151.895833" y="328.828566" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-15.3</text>

  <text x="1151.895833" y="272.942844" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-2.1</text>

  <text x="1151.895833" y="217.057133" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">11.1</text>

  <text x="1151.895833" y="161.171422" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">24.3</text>

  <text x="1151.895833" y="105.285688" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">37.5</text>

  <text x="1151.895833" y="49.400000" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">50.7</text>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 435.6 L1140.1625 435.6 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 435.6 L59.8375 430.266667 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M214.16965 435.6 L214.16965 430.266667 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M368.5018 435.6 L368.5018 430.266667 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M522.833965 435.6 L522.833965 430.266667 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M677.166099 435.6 L677.166099 430.266667 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M831.498233 435.6 L831.498233 430.266667 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M985.830431 435.6 L985.830431 430.266667 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M1140.1625 435.6 L1140.1625 430.266667 "/>

  <text x="31.290625" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:10</text>

  <text x="185.622775" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:15</text>

  <text x="339.954925" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:21</text>

  <text x="494.287090" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:27</text>

  <text x="648.619224" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:32</text>

  <text x="802.951358" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:38</text>

  <text x="957.283556" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:44</text>

  <text x="1111.615625" y="461.333333" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">00:00:50</text>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 44.4 L59.8375 435.6 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 435.6 L65.170833 435.6 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 379.714283 L65.170833 379.714283 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 323.828566 L65.170833 323.828566 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 267.942844 L65.170833 267.942844 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 212.057133 L65.170833 212.057133 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 156.171422 L65.170833 156.171422 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 100.285688 L65.170833 100.285688 "/>

  <path stroke-width="1.333333" stroke="#a8a8a8" fill="none" d="M59.8375 44.4 L65.170833 44.4 "/>

  <text x="14.666667" y="440.600000" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-41.7</text>

  <text x="14.666667" y="384.714283" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-28.5</text>

  <text x="14.666667" y="328.828566" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-15.3</text>

  <text x="22.822917" y="272.942844" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">-2.1</text>

  <text x="20.651042" y="217.057133" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">11.1</text>

  <text x="19.557292" y="161.171422" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">24.3</text>

  <text x="19.557292" y="105.285688" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">37.5</text>

  <text x="19.557292" y="49.400000" fill="#333333" font-size="14.666667" font-family="Arial,Helvetica,'Helvetica Neue',sans-serif">50.7</text>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 435.6 L1140.1625 435.6 "/>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 379.714283 L1140.1625 379.714283 "/>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 323.828566 L1140.1625 323.828566 "/>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 267.942844 L1140.1625 267.942844 "/>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 212.057133 L1140.1625 212.057133 "/>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 156.171422 L1140.1625 156.171422 "/>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 100.285688 L1140.1625 100.285688 "/>

  <path stroke-width="1.333333" stroke="#e5e5e5" fill="none" d="M59.8375 44.4 L1140.1625 44.4 "/>

  <path fill="#4572a7" d="M59.8375 403.0 L194.878125 386.064935 L329.91875 343.727272 L600.0 360.662337 L870.08125 335.25974 L1140.1625 394.532467 L1140.1625 119.337663 L870.08125 170.142857 L600.0 119.337663 L329.91875 77.0 L194.878125 98.168832 L59.8375 115.103896 "/>

  <path fill="#aa4643" d="M59.8375 360.662337 L194.878125 343.727272 L329.91875 322.558441 L600.0 343.727272 L870.08125 288.688312 L1140.1625 335.25974 L1140.1625 132.038961 L870.08125 204.012987 L600.0 144.74026 L329.91875 98.168832 L194.878125 119.337663 L59.8375 127.805195 "/>

</svg>
 
 No newline at end of file

examples/areacharts/area_ranges.svg.html

deleted100644 → 0
+0 −254
Original line number Diff line number Diff line 
<svg viewBox='0 0 800 320' class='fm-chart'>

  <style type='text/css'>

  <![CDATA[

  .fm-chart text, .fm-tooltip {

    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

    font: 10px sans-serif;

  }



  .fm-chart .axis .stroke {

    stroke: #aaa;

    stroke-width: 1px;

  }



  .fm-chart .axis .tick {

    stroke: #aaa;

    stroke-width: 1px;

  }



  .fm-chart .axis .label, .axis .title {

    fill: #666;

  }



  .fm-chart .axis .label {

    font-size: 10px;

  }



  .fm-chart .axis .title {

    font-size: 10px;

  }



  .fm-chart .chart-title {

    font-size: 12px;

    font-weight: bold;

  }



  .fm-chart .chart-subtitle {

    font-size: 10px;

  }



  .fm-chart text.label {

    fill: #666;

  }



  .fm-chart .legend text {

    font-size: 10px;

    fill: #333;

  }



  .fm-chart .legend text.title {

    fill: #666;

  }



  .fm-chart .line {

    fill: none;

    stroke: #000;

  }



  .fm-chart .area {

    opacity: 0.8;

  }



  .fm-chart .grid .gridline {

    stroke: #ddd;

    stroke-width: 0.02em;

  }



  .fm-chart .bar,

  .fm-chart .point,

  .fm-chart .area {

    fill: #000;

  }



  .fm-chart .bar.color6,

  .fm-chart .point.color6,

  .fm-chart .area.color6 {

    fill: #db843d;

  }



  .fm-chart .lines .line.color6 {

    strok: #db843d;

  }



  .fm-chart .bar.color5,

  .fm-chart .point.color5,

  .fm-chart .area.color5 {

    fill: #3d96ae;

  }



  .fm-chart .lines .line.color5 {

    stroke: #3d96ae;

  }



  .fm-chart .bar.color4,

  .fm-chart .point.color4,

  .fm-chart .area.color4 {

    fill: #80699b;

  }



  .fm-chart .line.color4 {

    stroke: #80699b;

  }



  .fm-chart .bar.color3,

  .fm-chart .point.color3,

  .fm-chart .area.color3 {

    fill: #89a54e;

  }



  .fm-chart .line.color3 {

    stroke: #89a54e;

  }



  .fm-chart .bar.color2,

  .fm-chart .point.color2,

  .fm-chart .area.color2 {

    fill: #aa4643;

  }



  .fm-chart .line.color2 {

    stroke: #aa4643;

  }



  .fm-chart .bar.color1,

  .fm-chart .point.color1,

  .fm-chart .area.color1 {

    fill: #4572a7;

  }



  .fm-chart .line.color1 {

    stroke: #4572a7;

  }



  .fm-chart.bar.vertical .axis.left .stroke,

  .fm-chart.bar.vertical .axis.left .tick,

  .fm-chart.bar.vertical .axis.right .stroke,

  .fm-chart.bar.vertical .axis.right .tick {

    display: none;

  }



  .fm-tooltip {

    text-align: center;

    padding: 5px 7px;

    color: #fff;

    background: #333;

    border-radius: 3px;

    font-size: 13px;

  }

  ]]>

  </style>

  <g class='axis bottom'>

    <text x='50.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >10.0</text>

    <text x='150.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >15.7</text>

    <text x='250.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >21.4</text>

    <text x='350.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >27.1</text>

    <text x='450.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >32.9</text>

    <text x='550.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >38.6</text>

    <text x='650.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >44.3</text>

    <text x='750.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >50.0</text>

    <line x1='50.000000' y1='25.000000' x2='50.000000' y2='30.000000' class='tick' />

    <line x1='150.000000' y1='25.000000' x2='150.000000' y2='30.000000' class='tick' />

    <line x1='250.000000' y1='25.000000' x2='250.000000' y2='30.000000' class='tick' />

    <line x1='350.000000' y1='25.000000' x2='350.000000' y2='30.000000' class='tick' />

    <line x1='450.000000' y1='25.000000' x2='450.000000' y2='30.000000' class='tick' />

    <line x1='550.000000' y1='25.000000' x2='550.000000' y2='30.000000' class='tick' />

    <line x1='650.000000' y1='25.000000' x2='650.000000' y2='30.000000' class='tick' />

    <line x1='750.000000' y1='25.000000' x2='750.000000' y2='30.000000' class='tick' />

    <line x1='50.000000' y1='25.000000' x2='750.000000' y2='25.000000' class='stroke' />

  </g>

  <g class='axis right'>

    <text x='760.000000' y='295.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >-41.7</text>

    <text x='760.000000' y='256.428571' style='text-anchor:start; dominant-baseline:middle;' class='label' >-28.5</text>

    <text x='760.000000' y='217.857143' style='text-anchor:start; dominant-baseline:middle;' class='label' >-15.3</text>

    <text x='760.000000' y='179.285714' style='text-anchor:start; dominant-baseline:middle;' class='label' >-2.10</text>

    <text x='760.000000' y='140.714286' style='text-anchor:start; dominant-baseline:middle;' class='label' >11.1</text>

    <text x='760.000000' y='102.142857' style='text-anchor:start; dominant-baseline:middle;' class='label' >24.3</text>

    <text x='760.000000' y='63.571429' style='text-anchor:start; dominant-baseline:middle;' class='label' >37.5</text>

    <text x='760.000000' y='25.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >50.7</text>

    <line x1='750.000000' y1='295.000000' x2='745.000000' y2='295.000000' class='tick' />

    <line x1='750.000000' y1='256.428571' x2='745.000000' y2='256.428571' class='tick' />

    <line x1='750.000000' y1='217.857143' x2='745.000000' y2='217.857143' class='tick' />

    <line x1='750.000000' y1='179.285714' x2='745.000000' y2='179.285714' class='tick' />

    <line x1='750.000000' y1='140.714286' x2='745.000000' y2='140.714286' class='tick' />

    <line x1='750.000000' y1='102.142857' x2='745.000000' y2='102.142857' class='tick' />

    <line x1='750.000000' y1='63.571429' x2='745.000000' y2='63.571429' class='tick' />

    <line x1='750.000000' y1='25.000000' x2='745.000000' y2='25.000000' class='tick' />

    <line x1='750.000000' y1='25.000000' x2='750.000000' y2='295.000000' class='stroke' />

  </g>

  <g class='axis bottom'>

    <text x='50.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >10.0</text>

    <text x='150.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >15.7</text>

    <text x='250.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >21.4</text>

    <text x='350.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >27.1</text>

    <text x='450.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >32.9</text>

    <text x='550.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >38.6</text>

    <text x='650.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >44.3</text>

    <text x='750.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >50.0</text>

    <line x1='50.000000' y1='295.000000' x2='50.000000' y2='290.000000' class='tick' />

    <line x1='150.000000' y1='295.000000' x2='150.000000' y2='290.000000' class='tick' />

    <line x1='250.000000' y1='295.000000' x2='250.000000' y2='290.000000' class='tick' />

    <line x1='350.000000' y1='295.000000' x2='350.000000' y2='290.000000' class='tick' />

    <line x1='450.000000' y1='295.000000' x2='450.000000' y2='290.000000' class='tick' />

    <line x1='550.000000' y1='295.000000' x2='550.000000' y2='290.000000' class='tick' />

    <line x1='650.000000' y1='295.000000' x2='650.000000' y2='290.000000' class='tick' />

    <line x1='750.000000' y1='295.000000' x2='750.000000' y2='290.000000' class='tick' />

    <line x1='50.000000' y1='295.000000' x2='750.000000' y2='295.000000' class='stroke' />

  </g>

  <g class='axis left'>

    <text x='40.000000' y='295.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >-41.7</text>

    <text x='40.000000' y='256.428571' style='text-anchor:end; dominant-baseline:middle;' class='label' >-28.5</text>

    <text x='40.000000' y='217.857143' style='text-anchor:end; dominant-baseline:middle;' class='label' >-15.3</text>

    <text x='40.000000' y='179.285714' style='text-anchor:end; dominant-baseline:middle;' class='label' >-2.10</text>

    <text x='40.000000' y='140.714286' style='text-anchor:end; dominant-baseline:middle;' class='label' >11.1</text>

    <text x='40.000000' y='102.142857' style='text-anchor:end; dominant-baseline:middle;' class='label' >24.3</text>

    <text x='40.000000' y='63.571429' style='text-anchor:end; dominant-baseline:middle;' class='label' >37.5</text>

    <text x='40.000000' y='25.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >50.7</text>

    <line x1='50.000000' y1='295.000000' x2='55.000000' y2='295.000000' class='tick' />

    <line x1='50.000000' y1='256.428571' x2='55.000000' y2='256.428571' class='tick' />

    <line x1='50.000000' y1='217.857143' x2='55.000000' y2='217.857143' class='tick' />

    <line x1='50.000000' y1='179.285714' x2='55.000000' y2='179.285714' class='tick' />

    <line x1='50.000000' y1='140.714286' x2='55.000000' y2='140.714286' class='tick' />

    <line x1='50.000000' y1='102.142857' x2='55.000000' y2='102.142857' class='tick' />

    <line x1='50.000000' y1='63.571429' x2='55.000000' y2='63.571429' class='tick' />

    <line x1='50.000000' y1='25.000000' x2='55.000000' y2='25.000000' class='tick' />

    <line x1='50.000000' y1='25.000000' x2='50.000000' y2='295.000000' class='stroke' />

  </g>

  <g class='areas'>

    <circle cx='50.000000' cy='73.798701' r='0.000000' class='point color1' fm:label='10.000000: -34.000000, 34.000000' fm:series='series1', style=''></circle>

    <circle cx='137.500000' cy='62.110390' r='0.000000' class='point color1' fm:label='15.000000: -30.000000, 38.000000' fm:series='series1', style=''></circle>

    <circle cx='225.000000' cy='47.500000' r='0.000000' class='point color1' fm:label='20.000000: -20.000000, 43.000000' fm:series='series1', style=''></circle>

    <circle cx='400.000000' cy='76.720779' r='0.000000' class='point color1' fm:label='30.000000: -24.000000, 33.000000' fm:series='series1', style=''></circle>

    <circle cx='575.000000' cy='111.785714' r='0.000000' class='point color1' fm:label='40.000000: -18.000000, 21.000000' fm:series='series1', style=''></circle>

    <circle cx='750.000000' cy='76.720779' r='0.000000' class='point color1' fm:label='50.000000: -32.000000, 33.000000' fm:series='series1', style=''></circle>

    <circle cx='750.000000' cy='266.655844' r='0.000000' class='point color1' fm:label='50.000000: -32.000000, 33.000000' fm:series='series1', style=''></circle>

    <circle cx='575.000000' cy='225.746753' r='0.000000' class='point color1' fm:label='40.000000: -18.000000, 21.000000' fm:series='series1', style=''></circle>

    <circle cx='400.000000' cy='243.279221' r='0.000000' class='point color1' fm:label='30.000000: -24.000000, 33.000000' fm:series='series1', style=''></circle>

    <circle cx='225.000000' cy='231.590909' r='0.000000' class='point color1' fm:label='20.000000: -20.000000, 43.000000' fm:series='series1', style=''></circle>

    <circle cx='137.500000' cy='260.811688' r='0.000000' class='point color1' fm:label='15.000000: -30.000000, 38.000000' fm:series='series1', style=''></circle>

    <circle cx='50.000000' cy='272.500000' r='0.000000' class='point color1' fm:label='10.000000: -34.000000, 34.000000' fm:series='series1', style=''></circle>

    <path stroke-width='0.000000' class='area color1' style='' d='M50.000000 73.798701 L137.500000 62.110390 L225.000000 47.500000 L400.000000 76.720779 L575.000000 111.785714 L750.000000 76.720779 L750.000000 266.655844 L575.000000 225.746753 L400.000000 243.279221 L225.000000 231.590909 L137.500000 260.811688 L50.000000 272.500000 ' />

    <circle cx='50.000000' cy='82.564935' r='0.000000' class='point color2' fm:label='10.000000: -24.000000, 31.000000' fm:series='series2', style=''></circle>

    <circle cx='137.500000' cy='76.720779' r='0.000000' class='point color2' fm:label='15.000000: -20.000000, 33.000000' fm:series='series2', style=''></circle>

    <circle cx='225.000000' cy='62.110390' r='0.000000' class='point color2' fm:label='20.000000: -15.000000, 38.000000' fm:series='series2', style=''></circle>

    <circle cx='400.000000' cy='94.253247' r='0.000000' class='point color2' fm:label='30.000000: -20.000000, 27.000000' fm:series='series2', style=''></circle>

    <circle cx='575.000000' cy='135.162338' r='0.000000' class='point color2' fm:label='40.000000: -7.000000, 13.000000' fm:series='series2', style=''></circle>

    <circle cx='750.000000' cy='85.487013' r='0.000000' class='point color2' fm:label='50.000000: -18.000000, 30.000000' fm:series='series2', style=''></circle>

    <circle cx='750.000000' cy='225.746753' r='0.000000' class='point color2' fm:label='50.000000: -18.000000, 30.000000' fm:series='series2', style=''></circle>

    <circle cx='575.000000' cy='193.603896' r='0.000000' class='point color2' fm:label='40.000000: -7.000000, 13.000000' fm:series='series2', style=''></circle>

    <circle cx='400.000000' cy='231.590909' r='0.000000' class='point color2' fm:label='30.000000: -20.000000, 27.000000' fm:series='series2', style=''></circle>

    <circle cx='225.000000' cy='216.980519' r='0.000000' class='point color2' fm:label='20.000000: -15.000000, 38.000000' fm:series='series2', style=''></circle>

    <circle cx='137.500000' cy='231.590909' r='0.000000' class='point color2' fm:label='15.000000: -20.000000, 33.000000' fm:series='series2', style=''></circle>

    <circle cx='50.000000' cy='243.279221' r='0.000000' class='point color2' fm:label='10.000000: -24.000000, 31.000000' fm:series='series2', style=''></circle>

    <path stroke-width='0.000000' class='area color2' style='' d='M50.000000 82.564935 L137.500000 76.720779 L225.000000 62.110390 L400.000000 94.253247 L575.000000 135.162338 L750.000000 85.487013 L750.000000 225.746753 L575.000000 193.603896 L400.000000 231.590909 L225.000000 216.980519 L137.500000 231.590909 L50.000000 243.279221 ' />

  </g>

</svg>

CRA Git | Maintained and supported by SUSTech CRA and CCSE