Thema: Charts einsetzen


Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Line Chart


<div class='flot-chart'>
    <div class='flot-chart-content' id='flot-line-chart'></div>
</div>
Hinweis: Für den Einsatz von Charts müssen Sie die Flot Charts JavaScript-Dateien (download) herunterladen und dann in Ihrer HTML-Datei einbinden bzw. integrieren.

  <!-- Flot Charts JavaScript integrate -->
  <script src='js/flot/excanvas.min.js'></script>
  <script src='js/flot/jquery.flot.js'></script>
  <script src='js/flot/jquery.flot.pie.js'></script>
  <script src='js/flot/jquery.flot.resize.js'></script>
  <script src='js/flot/jquery.flot.time.js'></script>
  <script src='js/flot/jquery.flot.tooltip.min.js'></script>
  <script src='js/flot-data.js'></script>

1. Ausgabe für Line Chart

Line Chart

2. Code für Pie Chart


<div class='flot-chart'>
    <div class='flot-chart-content' id='flot-pie-chart'></div>
</div>

2. Ausgabe für Pie Chart

Pie Chart

3. Code für Multiple Axes Line Chart


<div class='flot-chart'>
    <div class='flot-chart-content' id='flot-line-chart-multi'></div>
</div>

3. Ausgabe für Multiple Axes Line Chart

Multiple Axes Line Chart

4. Code für Moving Line Chart


<div class='flot-chart'>
    <div class='flot-chart-content' id='flot-line-chart-moving'></div>
</div>

4. Ausgabe für Moving Line Chart

Moving Line Chart

5. Code für Bar Chart


<div class='flot-chart'>
    <div class='flot-chart-content' id='flot-bar-chart'></div>
</div>

5. Ausgabe für Bar Chart

Bar Chart