Charts

Bar

Source Code:

<div class="plotly-chart" data-type="bar" data-fixed-height="500" data-title="Test Bar Chart" data-color="#046B99" data-x-label="Test X Label" data-y-label="Test Y Label" data-y-values="5|7|8|2" data-x-values="1|2|3|4" > <img src="/sample/images/charts/bar_chart_fallback.png" alt="Bar Chart Example"> </div>

Line

Source Code:

<!-- <div class="plotly-chart" data-type="line" data-title="Test Line Chart" data-config-url="configs/line.json"> --> <div class="plotly-chart" data-type="line" data-title="Test Line Chart" data-x-label="Test X Label" data-y-label="Test Y Label" data-x-values="1|2|3|4|5" data-y-values="1|3|4|7|6" data-color="#49BBF8" > <img src="/sample/images/charts/line_chart_fallback.png" alt="Line Chart Example"> </div>

Pie

Source Code:

<!-- <div class="plotly-chart" data-type="pie" data-title="Test Pie Chart" data-config-url="configs/pie.json"> --> <div class="plotly-chart" data-type="pie" data-title="Test Pie Chart" data-color="#FDB81E" data-x-label="Test X label" data-y-label="Test Y Label" data-x-values="0.5|0.7|0.9" data-y-values="alpha|bravo|charlie" > <img src="/sample/images/charts/pie_chart_fallback.png" alt="Bar Chart Example"> </div>

Dashboard Arch

Source Code:

<div class="stats-highlight" data-direction="left" data-percentfill="50" data-colorfill="#EF6462"> <img src="/sample/images/charts/half_donut_fallback.png" alt="Bar Chart Example"> <div class="half-gauge-chart"></div> <span class="small-goal-text">20% Goal</span> <span class="info"> <span class="big-number"><span class="number-counter">20</span>%</span> <span class="percent-detail">Reduction</span> <span class="service">Air Resources Board</span> </span> </div>