[Answered] Discussion on data format

[rayluo]

Hi Rami,

It is me again, the author of the Charts.css.py, a Python chart framework built on top of Charts.css. I find some ambiguity on Charts.css's input data format, and I hope to hear your clarification.

The data source of charts.css comes from an html table, which contains rows of cells. The original data source could be:

1. one row of multiple cells:

<table>
<tr>
  <td>...</td> <td>...</td> <td>...</td>
</tr>
</table>

2. or it could be multiple rows of single-cell row:

<table>
  <tr>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
  </tr>
</table>

Q1: Currently, such two flavors of source data happen to be rendered as visually identical bar chart or column chart. Is the identical visual outcome a result of Charts.css internally transpose one input format into another? If so, we better officially document that as a design contract. The current docs does not seem to mention that, although most (if not all) samples use data format No.2.

Q2: Such two flavors are rendered as different line chart or area chart. For example, data format No.1 will be treated as a multi-datasets line chart but each dataset contains only one data point, visualized as multiple dots. Data format No.2 will be rendered as a one-dataset line chart which correctly contains one line. It makes sense to have diffferent outcome here, but was there any specific reason that Charts.css chose to interpret data format No.1 & No.2 in the way they currently are, but not the other way around?

In other words, do we consider render the following table as a one-line single dataset line chart, because it arguably has better conceptual match with the line chart which also uses horizontal axis to represent days?

<table class="line ...">
<tr>
  <th>Stock A's price</th><td>value of day 1</td> <td>...day 2</td> <td>...day 3</td>
</tr>
</table>

Besides, such a data format probably also better matches another programming language when the html table was generated programatically from an array [..., ..., ...].

Alternatively, can Charts.css provide some sort of css class names (e.g. dataset-per-row and dataset-per-column) to trigger an internal transpose behavior, so that the user/developer can opt in for the behavior they want?

I understand that changing data format is not a trivial decision. That's why I want to have this discussion.

[ramiy]

@rayluo

You need to read the "Multiple Datasets" tutorial: https://chartscss.org/components/datasets/

When you have a single <td> tag inside a <tr> tag, it's a single dataset structure.

With several <td> tags inside a <tr> you get multiple datasets or a multi-series data.

You need to use the .multiple class when you need to display multiple datasets. Check to link for code examples.

[ramiy]

Another note: you have to use <tbody>.

[rayluo]

Ah, OK, I did use .multiple in my single-row-with-multiple-cells table. That explains the behavior of my question 1. Consider that question 1 is now answered.

Regarding question 2, let me rephrase it this way. Was there any particular reason that Charts.css chose to use "single <td> tag inside each of the multiple <tr> tag" to represent a single dataset structure? Why was it not using "several <td> tag inside the only one <tr> tag" to represent a single dataset structure?

[ramiy]

Good question!

First of all, in some case people use a single <td> tag inside each <tr> in other case they use multiple <td> tags in a single <tr>.

In Charts.css, a single data set is single <td> tag inside each <tr>. The main reason for that is because after all those are HTML tables. If the CSS is not loaded you see a table. In addition, people using assistive technologies don't "see" charts, only tables with data.

Before writing code, I had to understand basic usage and develop concepts based on how people use regular data tables. In other words - what will happened if the CSS will not load or in case you remove the styling.

When you look at a table (Excel sheet for example), it seems more logical to add new data items in new rows. On large sets of data, it would be much easier to read a table with many rows than a table with many columns. In most cases people avoid a table going sideways.

Only when I understood that, I decided that for a single dataset structure Charts.css will use a single <td> tag inside each <tr>.

[rayluo]

Thanks for the detailed explanation! I already figured it would be that reason before even asking, but I just wanted to hear that from you to make sure. :-)

That choice was reasonable. But, by any chance, could we possibly consider to also support the other system, so that people could toggle a switch to opt in to use one system or another? This might require reimplement the entire core of Charts.css, though; if that is the case, then it is not worthy to pursue this, not until we have the more popular Charts.css v1.0 with pie chart ready. UPDATE: No need to pursue this from Charts.css. It would be trivial for any upper layer solution implemented in other language to implement a transpose(...) helper. We can close this discussion.

[rayluo]

_{Quoting Rami's earlier answer here, otherwise github won't let me to mark it as "chosen answer".}

Good question!

First of all, in some case people use a single <td> tag inside each <tr> in other case they use multiple <td> tags in a single <tr>.

In Charts.css, a single data set is single <td> tag inside each <tr>. The main reason for that is because after all those are HTML tables. If the CSS is not loaded you see a table. In addition, people using assistive technologies don't "see" charts, only tables with data.

Before writing code, I had to understand basic usage and develop concepts based on how people use regular data tables. In other words - what will happened if the CSS will not load or in case you remove the styling.

When you look at a table (Excel sheet for example), it seems more logical to add new data items in new rows. On large sets of data, it would be much easier to read a table with many rows than a table with many columns. In most cases people avoid a table going sideways.

Only when I understood that, I decided that for a single dataset structure Charts.css will use a single <td> tag inside each <tr>.