Simple Bar Chart

The bar chart is a premium extension that comes with ProStyle Plus. Use it to animate a simple set of data as bars.

The first story’s chart is set up with 7 bars. That defines how many datums the chart will expect. If fewer data are provided, the chart will insert the value 0.

A domain is set so a datum equal to 7 will be rendered as 100%. The height of the bar equals value/domain. Numbers that exceed the domain will have the corresponding bars rendered higher than 100%. Negative numbers will have bars rendered in the opposite direction.

Background

The second story can be viewed by clicking the button labeled 2 under the editor. This story places the chart in a layer to add a background color. It also changes the data a few times with varying effects.

Two Series

The third story shows two separate series. This is achieved by laying one chart directly on top of another and use of congruent data.

The second chart has array data which demonstrates how the bar chart can show ranges.

story = {
	item: {
		itemType: "barChart",
		setup: { bars:7, domain:7, margin:7 },
		barsInit: { fill:"#567" },
		barActions: [
			{ anim:3, data:[1,2,3,4,5,6,7]	},
			{ anim:1, data:false }
		]
	}
};
story = {
	item: {
		itemType: "layer",
		init: {bg: "#EEE", size: [60,60], corners: 1, position: {z:-1}},
		items: [
			{
				itemType: "barChart",
				setup: {bars:10, domain:10, width:50, height:50, margin:1},
				barActions: [
					{
						anim: {dur:3, ease:"elastic", stagger:0.05},
						data: [1,2,3,4,5,6,7,8,9,10]
					},
					{
						anim: {dur:3, ease:"elastic", stagger:0.05},
						data: [1,-2,3,-4,5,-6,7,-8,9,-10],
						fill: "purple",
						opacity: 50
					},
					{
						anim: {dur:3, stagger:0.05},
						data: [8,5,4,3,2,2,3,4,5,8],
						fill: "orange",
						opacity: 100
					},
					{
						anim: {dur:3, ease:"bounce", stagger:0.05},
						data: [1,2,3,4,5,6,7,8,9,10]
					},
					{
						anim: 0.5,
						data: false,
						fill: "red"
					}
				]
			}
		]
	}
};
story = {
  items: [
    {
      itemType: "barChart",
      setup: {bars:30, domain:50, width:99, height:70, margin:0.3},
			init: {pos:{y:14}},
      barInit: {fill: "#557E8E"},
      barActions: [
        { 
          anim: {dur:3, stagger:0.05, ease:"elastic"},
          data: [34,33,32,27,31,35,36,33,39,34,26,32,45,39,33,37,29,36,22,31,37,36,44,42,35,36,39,33,45,38]
        },
        { 
          anim: {dur:0.3, stagger:0.01},
          data: [12,13,12,11,10,14,16,1,4,11,5,10,15,15,12,17,14,14,10,11,13,12,18,20,17,16,19,10,15,17]
        },
        { 
          delay: 2,
          anim:1,
          data:false
        }
    ]
  },
  {
    itemType: "barChart",
    setup: {bars:30, domain:50, width:99, height:70, margin:2},
		init: {pos:{y:14}},
    barInit: {fill:"#BE7467"},
    barActions: [
        { 
          anim: {dur:3, ease:"elastic", stagger:0.05},
          data: [[45,34],[42,33],[36,32],[33,27],[37,31],[40,35],[42,36],[34,33],[41,39],[39,34],[38,26],[46,32],[49,45],[50,39],[46,33],[47,37],[39,29],[38,36],[37,22],[45,31],[42,37],[41,36],[49,44],[46,42],[50,35],[41,36],[46,39],[38,33],[47,45],[42,38]]
        },
        { 
          anim: {dur:2, ease:"bounce", stagger:0.02},
          data: [[45,12],[42,13],[36,12],[33,11],[37,10],[40,14],[42,16],[34,1],[41,4],[39,11],[38,5],[46,10],[49,15],[50,15],[46,12],[47,17],[39,14],[38,14],[37,10],[45,11],[42,13],[41,12],[49,18],[46,20],[50,17],[41,16],[46,19],[38,10],[47,15],[42,17]],
          fill: "#F90"
        },
        {
          delay:0.5,
          anim:0.5,
          opacity:0
        }
      ]
    }
  ]
};