WD Data Adapter HTML Table 02 | samples | Documentation

HTMLcopy

 
<div id="container"></div>
<div class="table">
  <div class="heading">
    <div class="cell">
      <p>Date</p>
    </div>
    <div class="cell">
      <p>ILS (₪)</p>
    </div>
    <div class="cell">
      <p>CNY (¥)</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>01/01</p>
    </div>
    <div class="cell">
      <p>2</p>
    </div>
    <div class="cell">
      <p>3</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>01/02</p>
    </div>
    <div class="cell">
      <p>2</p>
    </div>
    <div class="cell">
      <p>3</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>01/03</p>
    </div>
    <div class="cell">
      <p>2</p>
    </div>
    <div class="cell">
      <p>3</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>01/04</p>
    </div>
    <div class="cell">
      <p>2</p>
    </div>
    <div class="cell">
      <p>3</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <p>01/05</p>
    </div>
    <div class="cell">
      <p>2</p>
    </div>
    <div class="cell">
      <p>3</p>
    </div>
  </div>
</div>

CSScopy

​x
 
* {
    margin: 0;
    padding: 0;
  }
​
html, body {
    height: 100%;
}
​
#container {
    width: 50%;
    height: 100%;
    float: left;
}
​
.heading {
    display: table-row;
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
    font-weight: bold;
}
​
.row {
    display: table-row;
}
​
.cell {
    display: table-cell;
    border: 1px solid #dddddd;
    padding: 5px 3px;
    text-align: center;
}
​
.row:nth-of-type(odd){
    background: #dddddd;
}

JavaScriptAutocompletecopy

 
anychart.onDocumentLoad(function() {
  // create a chart and set the data
  var chart = anychart.column();
  
  var tableData = anychart.data.parseHtmlTable(".table",
                                               ".row",
                                               ".cell p",
                                               ".heading .cell p",
                                               ".title");
​
  chart.data(tableData);
​
  chart.legend(true);
​
  // set chart container and draw
  chart.container("container").draw();
   
});

Sample meta

AnyChart Documentation

Individual Legend Items (Legend)

Basic Settings (Legend)

Column Chart (Basic Charts)

Column Chart (Error Chart)

Column Chart (Polar Plot)

Data From JSON (Working with Data)

Data From XML (Working with Data)

Data Manipulation (Working with Data)

Data Sets (Working with Data)

Drawing (Drawing Tools and Annotations)

Pareto Chart (Basic Charts)

Range Column Chart (Basic Charts)

Series Manipulation (Working with Data)

Statistics (Common Settings)

Stick Chart (Error Chart)

Themes (Appearance Settings)