Flexmonster - Horizontal bar chart - update
by Iryna Kulchytska
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://s3.amazonaws.com/flexmonster/2.3-cust/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
var pivot = $("#pivot-container").flexmonster({
report: {
dataSource: {
dataSourceType: "json",
data: getData()
},
slice: {
rows: [
{uniqueName: "Category"},
{uniqueName: "Business Type"}
],
columns: [
{uniqueName: "[Measures]"}
],
measures: [
{uniqueName: "Price"}
]
},
options: {
viewType: "charts",
configuratorActive: false,
chart: {
type: "bar_horizontal"
}
}
},
width: "100%",
height: 430,
toolbar: true,
componentFolder: "https://s3.amazonaws.com/flexmonster/2.3-cust/"
});
function getData() {
return [
{
"Category": "Accessories",
"Color": "red",
"Business Type": "Specialty Bike Shop",
"Region": "Center",
"Price": 174,
"Quantity": 225,
"Discount": 23,
"Date": "1/12/2011"
},
{
"Category": "Accessories",
"Color": "yellow",
"Business Type": "Specialty Bike Shop",
"Region": "East",
"Price": 502,
"Quantity": 90,
"Discount": 17,
"Date": "1/13/2011"
},
{
"Category": "Accessories",
"Color": "white",
"Business Type": "Specialty Bike Shop",
"Region": "North",
"Price": 242,
"Quantity": 855,
"Discount": 37,
"Date": "1/14/2011"
},
{
"Category": "Accessories",
"Color": "yellow",
"Business Type": "Specialty Bike Shop",
"Region": "South",
"Price": 102,
"Quantity": 897,
"Discount": 42,
"Date": "1/15/2011"
},
{
"Category": "Accessories",
"Color": "red",
"Business Type": "Specialty Bike Shop",
"Region": "East",
"Price": 126,
"Quantity": 115,
"Discount": 44,
"Date": "1/16/2011"
},
{
"Category": "Accessories",
"Color": "yellow",
"Business Type": "Specialty Bike Shop",
"Region": "Center",
"Price": 1246,
"Quantity": 88,
"Discount": 47,
"Date": "1/17/2011"
},
{
"Category": "Accessories",
"Color": "green",
...