I am using Charts.js - obviously for creating charts.
I want to have a horizontal bar chart in my app, but it seems that Chart.js does not have it, therefore I resorted to a fork of that repo called ChartNew.js.
ChartNew.js however is not at all responsive, and the thing that attracted me the most to Chart.js is the ability to have responsive charts.
I am aware that Charts.js allows easy extension or 'hacking' of the existing chart objects.
Is it possible to 'extend' Chart.js regular bar chart into
becoming a horizontal bar chart?
Chart.js does not come with horizontal bar charts by default.
However it is built in a very modular fashion. This allows third party plugins to be developed that do not mess with the core code.
As I needed horizontal bar charts for a project I was working on I took the liberty of creating one which you can find here.
https://github.com/tomsouthall/Chart.HorizontalBar.js
You can install it using bower:
$ bower install chart.horizontalbar
The syntax for creating a chart is exactly the same as for creating a standard (vertical) bar chart:
var myChart = new Chart(ctx).HorizontalBar(data, options);
It's a pretty quickly hacked together project but it worked great for what I needed! Hope it helps.
I know it might be not helpful to you but might help someone else, google charts are really good take a look at it https://developers.google.com/chart/
Related
I have been trying to customize Superset as much as possible and have succeeded to some extent. What I want to do now is create a custom chart based on my requirements, I have combined two big numbers to look like this using CSS properties but it's interfering with a lot of other properties of the charts in a given dashboard.
This is nothing but a set of two "big number" chart combined together with custom CSS. What I want to achieve is a customized widget having some special design or formatting. In simpler words to achieve the same below but with some word in between like:
30% Budget is providing me 70% output. Has anyone tried any hack to do that?
as an update, recently Preset has released a tutorial of just how to do that. Basically with the new viz plugin architecture you can use any js library and do any customization you want, and integrate it to Superset. They also talked about the new architecture and did a live demo, the video is here.
Yes, you can create a custom chart in Superset.
You can follow some existing chart additions for example:
https://github.com/apache/incubator-superset/pull/3013
to see how a new chart is developed and integrated in superset.
my english is bad, apologise in advice.
I've to add a chart to the project addpear opensource ember charts.
I built the chart, and it works. Anyway i need to add it to the getting started page and at my version of library. how I can do that? wich (and where) files I have to add?
I have already the code of the component and it works, but is in another project. I would like to import that component in the library.
You can use http://emberjs.jsbin.com as a sandbox for developing it (you just need to add addepar's libraries).
For example the just below is the standard line chart
Though I want to see on the reports the chart like this:
Though I want to see on the reports the chart like this, so the series looks like a steps.
Is it possible to do it with google charts? I spent whole day to figure out if it is possible or not, though I didn't find any good solution.
Google charts currently doesn't support strings on the Y-Axis. We're looking at adding this feature in a later release of the charting API, so please stay tuned.
Firstly, This may look like a duplicate question but trust me I have searched all these questions, but couldn't find a suitable answer, yes it is frustrating. Still if you vote to close as duplicate please post comment so that I can learn, few of the similar questions are:-
1. ActionBar pre HoneyComb
2. Another similar question
What I want ?
In my Application I want to support the ActionBar like Google Play ( with few more buttons ). As shown below,
I want to use all three Action bars 1. Main Action Bar 2. Tab Action Bar and 3. Bottom Action Bar mentioned in this design page.
What I did ? I knew that ActionBar is not supported by default in pre-HoneyComb devices. so I started with searching for Alternatives, so I did following things:-
Downloaded the v4 support library and tried to get a working example, but couldn't.
Downloaded ActionBarShelock and created an example for that.
Downloaded this popular library (here on SO) from gitHub.
I have working examples of 2 and 3, but even they are far from what I desire. However I will prefer not using any prebuild library. Since it is a big Application which requires a lot of dynamic customization.
Please help me by providing any step by step guide to implement ActionBar using support library.
After considering that I decided using ActionBarSherlock, It is really easy to implement and to extend as well...
Does anybody please have an advise on what to do with the too close values in different series, which overlap - like in the right bar below?
My chart URL - please click to see the parameters
I can't find a good chm parameter for all of the data I have.
Shouldn't overlapping be handled by the Google charts automatically in this case? Is this a bug?
Yes, this is a bug in Google's API. But unfortunately, it is a deprecated API...