<div id="placeholder" class="rich-chart-responsive"></div>
<span id="clickdata"></span>
<br/>
<span id="hoverdata"></span>
Highlight:
<ul>
    <li><a href="#" onclick="$('#placeholder').chart('highlight',0,0); return false;">First point in the first series</a></li>
    <li><a href="#" onclick="$('#placeholder').chart('highlight',1,2); return false;">Second point in the third series</a></li>
</ul>
Unhighlight:
<ul>
    <li><a href="#" onclick="$('#placeholder').chart('unhighlight',0,0); return false;">First point in the first series</a></li>
    <li><a href="#" onclick="$('#placeholder').chart('unhighlight',1,2); return false;">Second point in the third series</a></li>
    <li><a href="#" onclick="$('#placeholder').chart('unhighlight'); return false;">all</a></li>
</ul>

$('#placeholder').chart({
  data: [
    {data:[[1990,19.1],[1991,18.9],[1992,18.6],[1993,19.5],[1994,19.5],[1995,19.3],[1996,19.4],[1997,19.7],[1998,19.5],[1999,19.5],[2000,20]],label:'USA'},
    {data:[[1990,2.2],[1991,2.2],[1992,2.3],[1993,2.4],[1994,2.6],[1995,2.7],[1996,2.8],[1997,2.8],[1998,2.7],[1999,2.6],[2000,2.7]],label:'China'},
    {data:[[1990,9.4],[1991,9.4],[1992,9.5],[1993,9.4],[1994,9.9],[1995,9.9],[1996,10.1],[1997,10.1],[1998,9.7],[1999,9.5],[2000,9.7]],label:'Japan'},
    {data:[[1992,14],[1993,12.8],[1994,10.9],[1995,10.5],[1996,10.4],[1997,10],[1998,9.6],[1999,9.7],[2000,9.8]],label:'Russia'}
  ],
  tooltipOpts:{content:'%s [%x,%y.1]'},
  yaxis:{axisLabel:'metric tons of CO2 per capita'},ytype:'number',
  xaxis:{axisLabel:'year'},zoom:false,xtype:'number',
  charttype:'line'
});

/*Flot style of event binding*/
$('#placeholder').on('plothover', function (event, pos, item) {
  if (item) {
    $('#hoverdata').text('hover point ' + item.dataIndex + ' in ' + item.series.label);
  }
});

$('#placeholder').on('mouseout',function(){$('#hoverdata').text('');});

<div id="pie" class="rich-chart-responsive"></div>

$('#pie').chart({
  data: [
          [
            {data: 12500746, label: 'Service sector'},
            {data: 188217,   label: 'Agricultural sector'},
            {data: 2995787, label:  'Industrial sector'}
          ]
        ],
  legend:{sorted:'ascending'},
  charttype:'pie'
});

<div id="bar" class="rich-chart-responsive"></div>

$('#bar').chart({
  data: [[[1,2],[3,5],[10,4]]],
  series:{
    bars:{show:true}
  },
  charttype: 'bar'
});

<div id="category" class="rich-chart-responsive"></div>

$('#category').chart(
  {
    data: [
      {
        bars: {show: true},
          data: {'United States': 797, 'San Marino': 1263, 'Croatia': 380, 'Denmark': 480, 'Vietnam': 13}
      }
          ],
    yaxis: {axisLabel: 'Motor vehicles per 1000 people'},
    ytype: 'number',
    xtype: 'string',
    charttype: 'bar'
  }

);

<div id="mulitplecategorybar" class="rich-chart-responsive"></div>

$('#mulitplecategorybar').chart({
  data: [
    {bars:{show:true}, data:{Service:12500746,Agricultural:188217,Industrial:2995787}, label:'United States'},
    {bars:{show:true}, data:{Service:3669259,Agricultural:830931,Industrial:3726848}, label:'China'},
    {bars:{show:true}, data:{Service:4258274,Agricultural:71568,Industrial:1640091}, label:'Japan'},
    {bars:{show:true}, data:{Service:2417812,Agricultural:27205,NotKnown:955563}, label:'Other'}
  ],
  ytype:'number',
  legend: {sorted:'ascending'},
  xtype:'string',
  charttype:'bar'
});

<div id="zoom" class="rich-chart-responsive"></div>
<a href="#" onclick="$('#zoom').chart('resetZoom'); return false;">Reset zoom</a>

$('#zoom').chart(
  {
    data: [
      {color:'darkcyan',data:[[1,8],[2,12],[3,13],[4,14],[5,16],[6,18],[7,15],[8,20],[9,21],[10,15],[12,16],[13,18],[14,20]],
       lines:{show:true},label:'A product',points:{symbol:'square' ,show:true}},
      {color:'chocolate',data:[[2,6],[3,10],[4,11],[5,12],[6,15],[7,16],[8,14],[9,14],[10,14]],
       lines:{show:true},label:'B product',points:{show:true}},
      {color:'coral',data:[[2,6],[3,8],[5,4],[10,6],[14,8],[15,4]],
       lines:{show:true},label:'C product',points:{symbol:'diamond',show:true}}
    ],
    ytype:'number',
    legend:{sorted:'ascending'},
    zoom:true,
    xtype:'number',
    charttype:'line'
  }
);