0

I want to make my bottom axis labels beautiful when I draw lines.The data is probably like this:

[0.75,1.5,2.25,3,3.75,4.5,5.25,6,6.75]

But I want to see the labels show like this :

1 2 3 4 5 6

Thank you!

<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Line Series Example</title>

<!--[if lt IE 9]>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/excanvas/excanvas_text.js"></script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>

<script type="text/javascript">
var Chart1;
function draw() {
  Chart1=new Tee.Chart("canvas");
  var series = Chart1.addSeries(new Tee.Line());

var data = {
      "xvalues" : [ 0.5, 1.5, 2.5, 3.5, 4.5, 5.5, 6.5, 7.5, 8.5, 9.5, 10.5, 11.5, 12.5, 13.5, 14.5, 15.5,
          16.5, 17.5, 18.5, 19.5, 20.5, 21.5, 22.5, 23.5, 24.5, 25.5, 26.5, 27.5, 28.5, 29.5, 30.5,
          31.5, 32.5, 33.5, 34.5, 35.5, 36.5, 37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.5, 44.5, 45.5,
          46.5, 47.5, 48.5, 49.5, 50.5, 51.5, 52.5, 53.5, 54.5, 55.5, 56.5, 57.5, 58.5, 59.5, 60.5,
          61.5, 62.5, 63.5, 64.5, 65.5, 66.5, 67.5, 68.5, 69.5, 70.5, 71.5, 72.5, 73.5, 74.5, 75.5,
          76.5, 77.5, 78.5, 79.5, 80.5, 81.5, 82.5, 83.5, 84.5, 85.5, 86.5, 87.5, 88.5, 89.5, 90.5,
          91.5, 92.5, 93.5, 94.5, 95.5, 96.5, 97.5, 98.5, 99.5, 100.5, 101.5, 102.5, 103.5,
          104.5, 105.5, 106.5, 107.5, 108.5, 109.5, 110.5, 111.5, 112.5, 113.5, 114.5, 115.5,
          116.5, 117.5, 118.5, 119.5, 120.5, 121.5, 122.5, 123.5, 124.5, 125.5, 126.5, 127.5,
          128.5, 129.5, 130.5, 131.5, 132.5, 133.5, 134.5, 135.5, 136.5, 137.5, 138.5, 139.5,
          140.5, 141.5, 142.5, 143.5, 144.5, 145.5, 146.5, 147.5, 148.5, 149.5, 150.5, 151.5,
          152.5, 153.5, 154.5, 155.5, 156.5, 157.5, 158.5, 159.5, 160.5, 161.5, 162.5, 163.5,
          164.5, 165.5, 166.5, 167.5, 168.5, 169.5, 170.5, 171.5, 172.5, 173.5, 174.5, 175.5,
          176.5, 177.5, 178.5, 179.5, 180.5, 181.5, 182.5, 183.5, 184.5, 185.5, 186.5, 187.5,
          188.5, 189.5, 190.5, 191.5, 192.5, 193.5, 194.5, 195.5, 196.5, 197.5, 198.5, 199.5,
          200.5, 201.5, 202.5, 203.5, 204.5, 205.5, 206.5, 207.5, 208.5, 209.5, 210.5, 211.5,
          212.5, 213.5, 214.5, 215.5, 216.5, 217.5, 218.5, 219.5, 220.5, 221.5, 222.5, 223.5,
          224.5, 225.5, 226.5, 227.5, 228.5, 229.5, 230.5, 231.5, 232.5, 233.5, 234.5, 235.5,
          236.5, 237.5, 238.5, 239.5, 240.5, 241.5, 242.5, 243.5, 244.5, 245.5, 246.5, 247.5,
          248.5, 249.5, 250.5, 251.5, 252.5, 253.5, 254.5, 255 ],
      "yvalues" : [ 2.098175287246704, 2.098175287246704,
          2.1077122688293457, 2.0409531593322754, 1.7548420429229736,
          1.2970644235610962, 1.5927125215530396, 1.812064290046692,
          -0.39099061489105225, -2.1744160652160645,
          -3.3856191635131836, -3.8433966636657715,
          0.4768794775009155, 1.1921570301055908,
          -1.8310829401016235, 0.03817594051361084,
          1.1063237190246582, -0.34330546855926514,
          -0.8201571702957153, -0.15256476402282715,
          0.20984256267547607, -0.9536756277084351,
          -0.9632126092910767, -1.6308048963546753,
          -1.7833975553512573, 0.2861388325691223,
          -0.3623795509338379, -0.07626843452453613,
          0.4387313723564148, -0.9822865724563599,
          1.1921570301055908, 3.0518786907196045, 2.451045513153076,
          3.36660099029541, 4.329841136932373, 3.3761377334594727,
          2.489193916320801, 2.7753047943115234, 2.2412309646606445,
          0.08586108684539795, -1.4209903478622437,
          -3.1376562118530273, -3.2044153213500977,
          0.8488238453865051, 0.2861388325691223, -2.002749443054199,
          0.61039799451828, 0.5531758069992065, -1.1444164514541626,
          -1.106268286705017, -0.7343238592147827,
          -0.3146944046020508, -1.2207127809524536,
          -1.993212342262268, -2.0981197357177734,
          -1.9073792695999146, -1.3160828351974487,
          -1.411453366279602, -0.8201571702957153,
          -1.182564616203308, -2.0218234062194824,
          0.31474989652633667, 1.9932680130004883,
          1.5354902744293213, 2.584564208984375, 3.395212173461914,
          2.00280499458313, 1.8502124547958374, 3.166323184967041,
          2.0600271224975586, -0.5626572370529175,
          -1.5354348421096802, -3.757563591003418,
          -2.8896937370300293, 1.5354902744293213,
          -0.8201571702957153, -2.0504345893859863,
          1.1540089845657349, -0.6484905481338501,
          -1.7643235921859741, -0.7820090055465698,
          -0.9822865724563599, -0.5149720907211304,
          -1.4400643110275269, -2.1553421020507812,
          -2.307934284210205, -1.6212679147720337,
          -0.1716388463973999, -0.2574721574783325,
          -0.028583407402038574, -0.6389535665512085,
          -1.8883050680160522, 0.13354623317718506,
          1.5450273752212524, 1.087249755859375, 2.7657675743103027,
          3.519193649291992, 1.8025271892547607, 2.231693744659424,
          2.9565083980560303, 1.173082947731018,
          -0.24793505668640137, -1.2683979272842407,
          -3.194878578186035, -0.3242313861846924,
          2.8802120685577393, -0.3528425693511963,
          -0.14302778244018555, 2.155397415161133,
          0.5722498297691345, 0.0953981876373291, 0.4005832076072693,
          0.7916016578674316, -0.1621018648147583,
          -1.411453366279602, -0.9346016645431519,
          -1.4496015310287476, -0.42913877964019775,
          0.2003055214881897, -0.7724720239639282,
          0.18123137950897217, -1.1158052682876587,
          -1.7261754274368286, 1.2303051948547363,
          1.2970644235610962, 0.8488238453865051, 2.679934501647949,
          2.1077122688293457, 0.4005832076072693, 1.087249755859375,
          1.7643791437149048, 0.6962312459945679,
          -1.0490459203720093, -2.8801565170288086,
          -4.701729774475098, -1.5163606405258179, 1.430582880973816,
          -1.8310829401016235, -1.2207127809524536,
          1.5354902744293213, -0.2670091390609741,
          -1.4305273294448853, -0.486361026763916,
          0.2956758737564087, -0.6103423833847046,
          -1.8024717569351196, -2.0408973693847656,
          -2.441452980041504, -1.3446940183639526,
          -0.7343238592147827, -0.5149720907211304,
          0.3528980612754822, -1.1730273962020874,
          -0.219323992729187, 2.7180824279785156, 2.47965669631958,
          2.1935458183288574, 3.318915843963623, 3.0995640754699707,
          2.1077122688293457, 2.660860538482666, 3.0232677459716797,
          0.3338239789009094, -1.8978420495986938,
          -3.1376562118530273, -4.453766822814941,
          -0.5435832738876343, 0.6199350357055664,
          -3.1376562118530273, -0.8869165182113647,
          0.5436387658119202, -1.640342116355896,
          -1.0490459203720093, -0.38145363330841064,
          -0.3623795509338379, -0.8487683534622192,
          -1.3446940183639526, -1.3733052015304565,
          -1.5163606405258179, -0.5531201362609863,
          -0.410064697265625, -0.5912683010101318,
          -0.5149720907211304, -1.4782124757766724,
          -0.37191665172576904, 2.2889161109924316,
          2.2126197814941406, 1.8883605003356934, 3.8434524536132812,
          2.8706750869750977, 1.1635459661483765, 2.9469714164733887,
          2.9755825996398926, 0.6294720768928528,
          -0.23839807510375977, -2.317471504211426,
          -2.9278416633605957, 1.669008731842041, 1.3447495698928833,
          -1.0108977556228638, 1.6785458326339722,
          1.4591940641403198, -0.1621018648147583,
          -0.40052759647369385, -0.3146944046020508,
          0.6008609533309937, -0.9250646829605103,
          -1.6308048963546753, -1.6784902811050415,
          -2.508212089538574, -1.3542309999465942,
          -1.106268286705017, -0.46728694438934326,
          -0.23839807510375977, -2.6035823822021484,
          -0.6389535665512085, 1.974193811416626, 0.6580831408500671,
          1.9074347019195557, 2.8706750869750977, 0.8106757402420044,
          1.0204904079437256, 2.250767707824707, 1.2589162588119507,
          -0.9727495908737183, -2.6989526748657227,
          -4.58728551864624, -3.7194151878356934,
          0.22891658544540405, -1.2588609457015991,
          -2.8610825538635254, 0.0953981876373291,
          -1.0013607740402222, -2.918304920196533,
          -1.5449718236923218, -0.6389535665512085,
          -0.5245091915130615, -1.0776571035385132,
          -1.6784902811050415, -2.031360626220703,
          -1.3637679815292358, -0.30515730381011963,
          -0.2574721574783325, 0.8297497630119324,
          0.14308321475982666, -1.1730273962020874,
          1.3256754875183105, 2.7562308311462402, 2.098175287246704,
          3.2330822944641113, 3.748082160949707, 2.584564208984375,
          2.861138105392456, 3.137712001800537, 1.440119981765747,
          -0.1334906816482544 ]};

  series.data = {
    labels : data.xvalues,
    values : data.yvalues
  };

  Chart1.axes.left.title.text="Y";

  //Chart1.series.items[0].marks.drawEvery=120;

  Chart1.title.text="TeeChart for JavaScript";
  Chart1.title.format.font.style="18px Verdana";

  Chart1.title.format.font.gradient.visible=true;
  Chart1.legend.visible=false;

  Chart1.draw();
}
</script>
</head>
<body onload="draw()">

<center>
<br><canvas id="canvas" width="600" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>
</body>
</html>

2 Answers 2

2

Try setting an axis increment of 1:

Chart1.axes.bottom.increment = 1;
5
  • I have tried this ,but it did not work .Maybe I don't have data like this:[1,2,3,4,5,6]?
    – Brian.Xia
    May 5, 2016 at 8:09
  • Try this data,the axis labels is not so beautiful.
    – Brian.Xia
    May 13, 2016 at 7:35
  • In that example you are using an array of values [ 0.5, 1.5, 2.5, 3.5,...] as labels. That's why these strings are shown in the bottom axis. You can change it to series.data = { labels: [], x : data.xvalues, values : data.yvalues };
    – Yeray
    May 17, 2016 at 11:37
  • I try labels : [0.0,20.0,40.0,60.0,80.0,100.0,120.0,140.0,160.0,180.0,200.0,220.0,240.0,260.0], but no labels shown
    – Brian.Xia
    May 18, 2016 at 3:51
  • I just want to see labels like : [0,20,40,60,80,100,120,140,160,180,200,220,240,260]
    – Brian.Xia
    May 18, 2016 at 3:59
1

I have solved this problem.

1.change the data to series.data = { labels: [], x : data.xvalues, values : data.yvalues };

2.set: Chart1.axes.bottom.increment = 1;

3.rewrite ongetlabel function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.