optimizer test

by marcme

HTML

<script src="http://elycharts.com/sites/elycharts.com/repo/dist/elycharts.min.js"></script>
<script src="http://elycharts.com/sites/elycharts.com/repo/lib/raphael.js"></script>
<div id="chart" style="width: 100%; height: 300px"></div>

CSS

/* style up the tooltips content */
.charlab { font-face: helvetica, arial; color: black; margin: 0; }
.date { font-size: 10px; font-weight: normal }
.visits { color: #5Af; font-weight: normal }
.hits { color: #F80; font-weight: normal }
.label { font-size: 12px; line-height: 14px; margin-left: 2px; font-weight: bold; padding: 0px }

JavaScript

$(function() {
    $("#chart").chart({
      template: "google_analytics",
      values: {
        serie1: [13, 83, 51, 57, 67],
        serie2: [3, 3, 1, 7, 7]
      },
      labels: ["2011-03-02", "2011-03-03", "2011-03-04", "2011-03-05", "2011-03-06" ]
    });

  



});

// this is a reausable template definition.
$.elycharts.templates['google_analytics'] = {
    type: "line",
    margins: [10, 15, 25, 15],
    /* Define how to draw tooltips starting from series data */
    /* this can be an array with the tooltips content or a function to generate them on the fly */
    tooltips: function(env, serie, index, value, label) {
        return "<div class='label'><p class='date'>" + label + "</p><p><span class='visits'>Visits:</span> " + env.opt.values['serie1'][index] + "</p><p><span class='hits'>Hits:</span> " + env.opt.values['serie2'][index] + "</p></div>";
    },
    defaultSeries: {
        plotProps: {
            "stroke-width": 4
        },
        dot: true,
        rounded: false,
        dotProps: {
            stroke: "white",
            size: 5,
            "stroke-width": 1,
            opacity: 0 // dots invisible until we hover it
        },
        startAnimation: { // use an animation to start plotting the chart
            active: false,
            type: "avg", // start from the average line.
            speed: 1000, // animate in 1 second.
            easing: ">"
        },
        stepAnimation: { // defines an animation for data updates
            speed: 2000,
            delay: 0,
            easing: '<>'
        },
        highlight: {
            scaleSpeed: 0, // do not animate the dot scaling. instant grow.
            scaleEasing: '',
            scale: 1.2, // enlarge the dot on hover
            newProps: {
                opacity: 1 // show dots on hover
            }
        },
        tooltip: {
            height: 45,
            width: 80,
            padding: [3, 3],
            offset: [-15, -10],
            frameProps: {
...