Made For Developers With

Basic Chart Customization

So far you have seen how Popily's powerful analytic engine frees you from having to invest the time and resources into building individual best practice analytics. Customizing Popily analytics’ look and feel is just as easy. Popily has dozens of well-documented options for making all your analytics follow your company's design guidelines.

Let us look at a quick example. Popily is visualizing the relationship between sales, product category, and type of customer who made the order.

var insightOptions = {
    source: 'sales-data',
    columns: ['Sales', 'Product Category', 'Customer Segment'],
    calculations: [
      {
        column: 'Sales',
        calculation: 'average'
      }
    ]
};

popily.chart.getAndRender('#chart-1', insightOptions);

By default, Popily's visualizations are designed to be functional as well as beautiful, and we can customize them right in Javascript using our customization options. Let us add just a few of these options and see what happens.

var insightOptions = {
    source: 'sales-data',
    columns: ['Sales', 'Product Category', 'Customer Segment'],
    calculations: [
      {
        column: 'Sales',
        calculation: 'average'
      }
    ],
    colors: ['#E7CD1F','#E79104','#E74C3C'],
    rotated: true,
    title: 'Sales By Product Category',
    barSize: .8,
    titleFontFamily:'Roboto Condensed',
    titleFontSize: '18px',
    titleFontColor: ['#ECF0F1'],
    chartFontFamily: 'Roboto Condensed',
    chartFontSize: '12px',
    chartFontColor: ['#ECF0F1'],
    cardBackgroundColor: '#2F302C',
    yGrid: false,
    yAxis: false,
    xOrder: 'asc'
};

popily.chart.getAndRender('#chart-2', insightOptions);

Boom! The two charts come from the same data, visualizing the same relationship, and with a few of Popily's many customization options we were able radically change the how the visualization was displayed.

However, even this is a simple example. Want to see what happens when we really put Popily's customization possibilities to the test? Check out this demo dashboard and with that, your product tour has come to an end. If you have any questions, want help with anything at all, or want to say hello, find us in our Slack Channel! To get started with a demo, signup here.