Product Name

Graph Cards

Graph Cards are useful for showing users quick data about their funnels including how that funnel compares to previous dates.

Graph Cards will automatically stack on top of each other in narrow columns.

Standard/Basic Cards

The standard cards are very easy to develop requiring a single div and the jQuery code to initialize it: $('#my-graph').cfGraphCard(myGraphData);

Show Code 
      <div class="ui graphs cards">
        <!-- Super-basic examples using built-in template //-->
        <div class="ui graph card shadow" id="graphCardDay"></div>

        <div class="ui graph card shadow" id="graphCardWeek"></div>

        <div class="ui graph card shadow" id="graphCardMonth"></div>
      </div>

Advanced Cards

In addition to creating the basic Graph Cards, you can supply your own HTML template (and selectors) if you need to further customize the Card for your display purposes.

This can be achieved by simply providing the HTML inside of the .ui.graph.card.shadow element and passing the necessary selectors in the jQuery call.

If it's more convenient, you can also pass the HTML template using the template setting in the jQuery call.

Successful Purcahse (Year)


Show Code 
    <div class="ui graphs cards">
      <!-- Advanced example using custom template and CSS selectors //-->
      <div class="ui graph card shadow" id="graphCardYear">
        <div class="title">
          <h4>
            <span class="my-custom-title">Successful Purcahse (Year)</span>
            <span class="my-custom-date"></span>
          </h4>
          <h3 class="stats">
            <span class="value"></span>
            <br>
            <span class="percent"></span>
          </h3>
        </div>
        <div class="content">
          <canvas class="graph"></canvas>
        </div>
      </div>
    </div>

Funnel Graph

Basic Funnel Graphs can be created with a minimal amount of code. Simply give your <canvas> tag an ID and wrap with with a .ui.graph container and pass the JavaScript outlined below.



Example:
Show Code 
$('#my-graph-id').cfGraph({
  labels: ["", "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
  datasets: [
    [15, 19, 16, 24, 25, 40, 32, 21],
    [25, 29, 26, 34, 35, 50, 42, 31],
    [35, 39, 36, 44, 45, 60, 52, 41],
    [45, 49, 46, 54, 55, 70, 62, 51],
    [55, 59, 56, 64, 65, 80, 72, 61]
  ]
});

Highlighted Graph Blue

Once you have a reference to a graph, you can then interact with the graph to highlight() a specific set of data or dehighlight() to reset the graph back to normal.

Try it now by running window.funnelGraph2[0].highlight(2); in the JavaScript console of your browser. The red graph will move to the top.

Custom Graph

In addition to the easy graphs, rather than passing the datasets option, you can instead use the data option which provides full customization of the graph.

See the Chart.js documentation for more information on the options available.