predixdesignsystem / px-simple-bar-chart Goto Github PK

View Code? Open in Web Editor NEW

1.0 772.0 6.0 2.22 MB

For a live demo of this predix UI component, visit

Home Page: https://www.predix-ui.com/#/modules/px-simple-bar-chart

License: Apache License 2.0

JavaScript 26.37% CSS 3.15% HTML 60.95% Shell 9.52%

predix-ui

px-simple-bar-chart's Introduction

px-simple-bar-chart

Overview

Px-simple-bar-chart is a Predix UI component used to visualize a series or multiple series of numeric values as a bar chart or stacked bar chart. Each series is represented by a sequence of horizontally aligned rectangle bars, the height of each proportionally representing a value. If multiple series are passed to the component then a stacked sequence of rectangle bars will be drawn using a different color to represent each series and a legend to identify them will be drawn above the bars.

The bar colors and legend labels are configurable. The width and height of the component are also configurable. We recommend viewing the demo page to see all the various configuration possibilities. We also recommend using the default settings as they are designed for proper performance.

Usage

Prerequisites

node.js
npm
bower
webcomponents-lite.js polyfill

Node, npm, and bower are necessary to install the component and dependencies. webcomponents.js adds support for web components and custom elements to your application.

Getting Started

First, install the component via bower on the command line:

bower install px-simple-bar-chart --save

Second, import the component in your application with the following tag in your head:

<link rel="import" href="/bower_components/px-simple-bar-chart/px-simple-bar-chart.html"/>

Finally, use the component in your application:

<px-simple-bar-chart chart-data="[ [1,2,3] ]">
</px-simple-bar-chart>

<px-simple-bar-chart chart-data="[ [1,2,3], [1,2,3], [1,2,3] ]">
</px-simple-bar-chart>

Documentation

Read the full API and view the demo here.

Local Development

From the component's directory...

$ npm install
$ bower install
$ gulp sass

From the component's directory, to start a local server run:

$ gulp serve

Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples.

GE Coding Style Guide

GE JS Developer's Guide

Known Issues

Please use Github Issues to submit any bugs you might find.

px-simple-bar-chart's People

Contributors

Stargazers

Watchers

Forkers

summisudhi raafee pehcao acn-predix-dev krenabeth murone

px-simple-bar-chart's Issues

Legends are not shown

Submit an Issue

Hi,

Thanks for helping us improve the Predix UI platform by submitting an issue.

Before you begin, please check the list of existing issues to avoid submitting a duplicate issue.

To help us solve this issue as fast as possible, please fill out the following sections:

Expected behavior and actual behavior:

Legends should be shown on chart. It works as expected for multi-series.

Steps to reproduce the problem:

See demo: https://www.predix-ui.com/#/components/px-simple-bar-chart/

Environment (component version number, Browser (including version), operating system, hardware, etc):

Chrome v.56 on Windows 7

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

    Once you've created your code example, you can save it under a new url.
    Please note that you should NOT use the same methods for production as the ones used in codepen - these methods are not production ready.

Multiseries bar line chart is not available

Steps to reproduce the problem: There is no multiseries bar option available only single bar/stacked bar options are available.

Environment (component version number, Browser (including version), operating system, hardware, etc): All

Screenshots (optional, but very helpful): Attached herewith screenshot representing multi series bar comparing the multiple X axis values. There is no feature as such in px-vis which allows me to plot this basic chart. Please let me know if you need more information.

Seed 3-up card bar chart throws width error

In the latest predix-seed live demo, the chart is throwing an error even though the width should be fine.

How to add seriesconfig to the chart?

Submit an Issue

Hi,

Thanks for helping us improve the Predix UI platform by submitting an issue.

Before you begin, please check the list of existing issues to avoid submitting a duplicate issue.

To help us solve this issue as fast as possible, please fill out the following sections:

Expected behavior and actual behavior:

Steps to reproduce the problem:

Environment (component version number, Browser (including version), operating system, hardware, etc):

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

    Once you've created your code example, you can save it under a new url.
    Please note that you should NOT use the same methods for production as the ones used in codepen - these methods are not production ready.

Legend lebels are not displaying even after adding as properties

Submit an Issue

Hi,

Thanks for helping us improve the Predix UI platform by submitting an issue.

Before you begin, please check the list of existing issues to avoid submitting a duplicate issue.

To help us solve this issue as fast as possible, please fill out the following sections:

Expected behavior and actual behavior:

Steps to reproduce the problem:

Environment (component version number, Browser (including version), operating system, hardware, etc):

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

    Once you've created your code example, you can save it under a new url.
    Please note that you should NOT use the same methods for production as the ones used in codepen - these methods are not production ready.

Display Y Axis rage, 'control' line and grid lines.

Hello,

3 quick questions / possible feature requests.

Is it possible to display data range on the Y axis ?
Is it possible to show a control line over the entire chart ( representing something like target/control or expected behavior) ?
Is it possible to display grid lines in the background ?

Please refer to attached screenshot for more info.

Thanks,
Udyan

predixdesignsystem / px-simple-bar-chart Goto Github PK

px-simple-bar-chart's Introduction

px-simple-bar-chart

Overview

Usage

Prerequisites

Getting Started

Documentation

Local Development

GE Coding Style Guide

Known Issues

px-simple-bar-chart's People

Contributors

Stargazers

Watchers

Forkers

px-simple-bar-chart's Issues

Submit an Issue

Expected behavior and actual behavior:

Steps to reproduce the problem:

Environment (component version number, Browser (including version), operating system, hardware, etc):

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

Steps to reproduce the problem: There is no multiseries bar option available only single bar/stacked bar options are available.

Environment (component version number, Browser (including version), operating system, hardware, etc): All

Screenshots (optional, but very helpful): Attached herewith screenshot representing multi series bar comparing the multiple X axis values. There is no feature as such in px-vis which allows me to plot this basic chart. Please let me know if you need more information.

Submit an Issue

Expected behavior and actual behavior:

Steps to reproduce the problem:

Environment (component version number, Browser (including version), operating system, hardware, etc):

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

Submit an Issue

Expected behavior and actual behavior:

Steps to reproduce the problem:

Environment (component version number, Browser (including version), operating system, hardware, etc):

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

Recommend Projects

Recommend Topics

Recommend Org