fruits.js

// Data to be plotted
var prices = polyjs.data({ // prices of fruits
  fruit: ['apple', 'banana', 'orange'],
  price: [99, 79, 139]
});
var sales = polyjs.data({ // sales of fruits
  fruit: ['apple', 'apple', 'apple', 'apple', 'apple', 'apple', 'apple', 'banana', 'banana', 'banana', 'banana', 'banana', 'banana', 'banana', 'orange', 'orange', 'orange', 'orange', 'orange', 'orange', 'orange'],
  date: ['2013-04-01', '2013-04-02', '2013-04-03', '2013-04-04', '2013-04-05', '2013-04-06', '2013-04-07', '2013-04-01', '2013-04-02', '2013-04-03', '2013-04-04', '2013-04-05', '2013-04-06', '2013-04-07', '2013-04-01', '2013-04-02', '2013-04-03', '2013-04-04', '2013-04-05', '2013-04-06', '2013-04-07'],
  sale: [20, 21, 26, 23, 19, 25, 15, 40, 52, 49, 43, 59, 41, 55, 30, 31, 33, 29, 25, 29, 35]
});

// Helper function to assign a colour to a fruit
var color_fn = function(fruit) {
  if (fruit == 'apple') {
    return 'red';
  } else if (fruit == 'banana') {
    return 'yellow'
  } else {
    return 'orange'
  }
}

// Creating the charts by first generating the JSON spec, then the chart itself
var spec_prices = {
  layer: { // bar chart of fruit prices
    data: prices,
    type: 'bar',
    x: 'fruit',
    y: 'price',
    color: 'fruit'
  },
  guide: { color: { scale: color_fn } }, // use the colour scale function defined earlier
  dom: 'chart_prices',
  width: 250,
  height: 250,
  title: 'Fruit Prices (Click on Bar)'
};
var chart_prices = polyjs.chart(spec_prices);

var spec_sales = {
  layer: { // line chart of sales of a particular fruit (default: apple)
    data: sales,
    type: 'line',
    x: 'date',
    y: 'sale',
    color: {const: color_fn('apple')}, // default colour
    size: {const: 3},
    filter: { fruit: { in: ['apple'] } } // filter the data so only apple sales are used
  },
  guide: {
    y: { min: 0, max: 6 }
  }, // fix the y-axis min/max
  dom: 'chart_sales',
  title: 'Apple Sales (Click on Bar to Change Fruit)',
  width: 400,
  height: 250
}
var chart_sales = polyjs.chart(spec_sales);

// Interaction!
chart_prices.addHandler(function(type, obj) {
  if (type =='click' && obj.evtData.fruit) {
    spec_sales.layer.filter.fruit = obj.evtData.fruit; // change the fruit (filter)
    spec_sales.layer.color.const = color_fn(obj.evtData.fruit.in[0]); // change the colour
    chart_sales.make(spec_sales); // re-render the chart (with default animations)
  }
})