What is Reddit's opinion of
Chart.js?
From 3.5 billion Reddit comments
➔ Chart.js website
By popularity on Reddit, this Service is:
72 reviews of this app found across Reddit:
Meteor application I created using ChartJS and Quran API to show the number of tweetable verses in the Holy Quran before and after the new 280 character limit on twitter. Here's the public repo with the code if you want to mess with it!
Thanks to u/ELFAHBEHT_SOOP for the data which he scraped from r/place and uploaded here. I was interested how my contributions to the final canvas compared with other people out there. I then spent the next couple of days learning HTML, JavaScript, PHP and SQL to throw this website together. It's still not very elegant on mobile unless you view it in landscape mode, but not bad for a day or two's work starting with no knowledge of website coding. The package I used for the graphs themselves was Chart.js which seemed to me to be a pretty elegant way to go about it. I'd been keen for feedback and advice on how to improve the way the data is set out!
It's a shame it depends on Highcharts. This is a CC-BY-NC licensed library that is at least $390 to use in a commercial webapp. It's $90 if it's not a "webapp".
Honestly the money isn't the biggest issue here. It's that you have to pick through Highsoft's ridiculous definitions (wtf is and isn't a webapp?!) and license garbage to work out how much money you need to give them to be covered. And God help you if you upgrade, that's a whole new level of licensing hell.
It's not a drop-in replacement by any means but switching to Chart.js or something similar would benefit the whole project in terms of simplifying deployment. Perhaps making Highcharts available as an optional thing.
I ran into this problem a couple times where I needed to have some styling junk in my scripts (e.g. colors when using ChartJS, which is canvas-rendered). So I wrote this to give access to LESS variables, to remove duplication of style constants.
Still a bleeding edge release. Let me know what you think!
Chart.js is pretty easy to use as well. Here's an example. Add the following dependency in project.clj
[cljsjs/chartjs "2.5.0-0"]
Then use it as follows:
(ns myapp.chart (:require [cljsjs.chartjs] [reagent.core :as r]))
(defn bar-chart [data] (fn [component] (let [node (r/dom-node component)] (js/Chart. node (clj->js {:type "bar" :data {:labels (map :title data) :datasets [{:label "data label" :data (map :value data)}]} :options {:scales {:xAxes [{:display false}]}}})))))
(defn chart-component [data] (when (not-empty @data) (r/create-class {:component-did-mount (bar-chart @data) :component-did-update (bar-chart @data) :render (fn [] [:canvas {:width "400px" :height "200px"}])})))
[chart-component (r/atom [{:title "foo" :value 10} {:title "bar" :value 20} {:title "baz" :value 30}])]
Sorry about the axis label shittiness - I set this up last night for a separate project, and noticed a huge drop as soon as the testimony started.
(Source)
I analyze the titles and self-text-posts returned by the reddit Hot API for a subreddit every five minutes. Positivity is measured in float values from -20 to +20.
(Tool) Libraries used:
The "characters on a spectrum" idea made me think of a chart like this: http://www.chartjs.org/samples/latest/charts/area/radar.html
Instead of months the chart would display concepts, and each point reflects the colonist's opinions (positive or negative) on the concept. This would drastically change the game though since things wouldn't be so black and white. Instead of traits like prosthophile and prosthophobe, your colonists have a range under which they can fall. Same would go for cannibalism.
I'd use it for sure! The data could be integrated in the website for easy access.
One thing that I'd love to see is support for charts and visualizations. Once you have the data of your plant you need to make the most sense of it. Having charts with the progress of the grow would be insightful. Visualization libraries are pretty straightforward, we could use something like Google Charts or Chart.js.
Cheers and keep us posted!
I'm not sure I agree with that discussion. I do agree that bar charts or line charts work as well (or better?), but I like the unique look of radar charts. If we group the stats by their offensive/defensive nature, then the areas can have meaning as well.
This wiki entry shows an example of 15 cars plotted by unrelated features and mentions radar charts being used in sports to chart players' strengths and weaknesses: https://en.wikipedia.org/wiki/Radar_chart#Application
Oh, btw, the chart is drawn with the Chart.js library, so I bet I can easily make the type of chart selectable.
For the most part you are not going to find one, or its going to be so tightly coupled with a specific technology it wont help you. Nearly all dashboards are are a built to suit solution and not just something that comes out of box. You will need to extract the data from your database(s) and build the required data to construct these charts or graphs.
If your just looking for a theme i'd suggest looking at foundation or twitter bootstrap theme sites, here is an example.
Next your going to need some charting libraries to display your data. Chart.js is a good solution for simple charts. Highcharts if you need more options.
good luck on your endeavor.
d3 is just the part for the visualization, it brings a ton of utility functions to read json, csv, tsv etc. files
but you would have to handle the user input independently, if you go with d3 its just some html forms and a little bit of js to read the values + use d3 on them
if its just for charts you could use something like http://www.chartjs.org/
Instead of a doughnut, you could use a pie with a second dataset (like in the example) or an absolutely positioned pie div for the used/available (perhaps with other colors).
Which one? the spider/radar graph, or the moving bubbles one?
http://www.chartjs.org/samples/latest/ has radar
d3 can do it as well https://www.visualcinnamon.com/2013/09/making-d3-radar-chart-look-bit-better.html
and there's more if you search
I know the visuals need work. I'm using [http://www.chartjs.org] for charting, so I can do a lot to clean up the visuals if I have some ideas. Look at their graphs and let me know what data you'd like to see populating them :)
I can add categories to the heroes pretty easily. I'll look into doing that. I guess just letting people slice and dice the data more is a plus.
I just added the hero colors to the graph. That makes it more visually appealing.
http://www.chartjs.org/ https://developers.google.com/chart/
Those are two javascript charting libraries that would be pretty useful for what you're wanting to do. Might be easier to get into JS if you've already messed with HTML.
> its hard to connect Accounting with front-end dev stuff.
Correct, you need to be a full-stack dev at least (start using databases) if you want to leverage both your accounting and your web dev credentials effectively, which is the step you take after you've been in front-end for long enough :
https://github.com/kamranahmedse/developer-roadmap
However it's not impossible to get some value out of front-end in itself. For example lets say you need a specific kind of chart or custom way to view financials / analytics / etc.
If you can get the hard data into a json format you can then reference it in a webpage and pipe it into something like chartJS or D3 and programmatically generate the kind of chart you need.
Although i would also be remiss not to mention this technique is best utilized when integrated into a full-stack solution (i.e. have the server side generate that pages and inject the data dynamically).
Grabbed it! I found ChartJS (http://www.chartjs.org) to be super easy and friendly. Here's a quick crack at it:
(your data file linked above requires downloading so I couldn't get it directly - cached a local version of it)
AFAIK Signalr Core exists, you can find it here
While for rendering charts or similar things on the web page I believe the proper approach would be to leverage Javascript and render them client side, you can use, for example, chart.js
For charts by email I'm sure someone can point you to the right library. Your requirements are not tightly related to ASP .NET (apart from Signalr) so I believe it is just a matter of preferences and libraries.
For the most recent project I've done I've used Chart.js it's rather pretty, to use it I send JSON data from a view where I do the calculations for the data then parse the data client side and show it, the drawback is if you're trying to show a lot of data it can be a bit slow, so keep database transactions to a minimum, but for one or two graphs it's perfectly fast enough.
Sounds like you're just getting started with Javascript. It's important to understand how Javascript works with HTML and CSS. When it comes to interacting with SharePoint using JavaScript you have 2 options. CSOM or REST. In my honest opinion REST is easier to learn and will help you moving forward
- Here are some examples of using REST and jQuery to add,update,delete items in SharePoint. https://social.technet.microsoft.com/wiki/contents/articles/31995.sharepoint-2013-working-with-rest-api-using-jquery-ajax.aspx
the "Content Editor" web part will be your friend. This will allow you to add HTML, CSS, and Javascript to any page. You can also add a reference to jquery from here using
<script src="yoursiteurl/SiteAssets/js/jquery-1.10.2.js"></script>
You can use ChartJS for graphs. It's free and looks pretty nice. To summarize, you'll need to use REST to get data, simple javascript to transform that data, simple javascript to render the chart. http://www.chartjs.org/
You could use literally any graphing library:
ChartJS, Google Charts or Chartist would be the ones I'd look at for a simple chart like this. You could go the D3 route, but then you'd have to create the charting logic yourself.
Some places let you embed their charts onto your site like this. I just started learning Google chart and chart.js but you need to know javascript. They have good code examples if you want to give it a shot.
I don't know where you would get the data from but there is probably an api you could use. This would also require a programmer to integrate it with your site.
More of a backend guy myself (so feel free to hit me up if you want to bounce ideas!) but one cool thing that would be nice to see is chart the Ur-Dragon's HP over time via something like this:
Reports around the same period which have conflicting values can be plotted and averages (or whatever methodology worthwhile) graphed. If more people get involved in reporting it may even be possible to predict an approximate ETA of grace (potentially adjusting for peak/troughs of player concurrency/activity)
Yeah I just ended up getting a free html5 template and throwing chart.js at it. Wrapped everything in Python's django and got something that is at least not repulsive.
I haven't done any HTML5 coding in a while but I think something like an interactive chart should be pretty easy to do.
These libraries look alright:
http://canvasjs.com/docs/charts/chart-types/html5-pie-chart/
Howdy peeps!
I bring you something cool that I've been working on. I've been playing around with Chart.js. The idea is to have individual statistics for post views, letting you see the popularity trend for each bucket. I think this is meta-awesome, it will let us see information in a novel way. For the moment the dataset has 7 weekly points, I'll probably change this to monthly intervals as the year progresses. In some time this could become a valuable source of info on the bucket movement.
There are two extra bucket stats that you can visit, I'm working on them now. For the moment this is desktop and tablet only.
www.spacebuckets.com/u/Experiment627/stats
www.spacebuckets.com/u/SuperAngryGuy/stats
I would love some feedback on this! I think it opens up many possibilities for the future. I will probably add the stats to the top 20 most popular buckets, as a way of distinguishing our Hall of Fame.
Pretty much every list is exposed as a webservice. Pick your visualization package and render the data.
Ive used http://www.chartjs.org/ before.
> What's the best way to do this? I want users to be able to choose data ranges and categories of content and then a graph to be rendered.
Hire a programmer... and a UX designer.
> I like http://www.chartjs.org/[1] but I don't how to incorporate my spreadsheet data into it's syntax without doing it manually
Export the spreadsheets into CSV, then import into a database. MySQL, not Access. Then use any number of libraries to pull MySQL queries as JSON data, which is the format you need for the charts.
I would suggest not using d3js as its quite complicated for beginners. If you are looking to chart something quickly/easily use http://www.chartjs.org/ or http://c3js.org/
Both are full featured, and style-able. You could recreate those charts with a few changes and a lot less headache.
I use Flot for a lot of stuff. It's not as flexible as highcharts but it's a lot faster as a result.
These ones look cool but are awkward if you need to supply key/value pairs for your data instead of just a bnuch of values:
http://code.shutterstock.com/rickshaw/
If you just want really lightweight SVG charts this might be worth a look:
http://www.liquidx.net/plotkit/
Finally the most popular image based charting library for PHP still seems to be JPGraph. JPGraph is completely awful BUT it does work if you absolutely must use images.
It's a doughnut (or donut) chart. It's similar to a pie chart, but they can be combined (e.g. a pie chart 'inside' a donut chart) to show changes between two data sets.
First line:
const chart = new Chart(...
Updating data:
// data coming from Ajax, including new labels, new datasets, etc // But any kind of data manipulation is OK: add/remove labels, dataset points, datasets, etc chart.data = data; chart.update();
Also see the docs: http://www.chartjs.org/docs/latest/developers/updates.html
Source: [University of Maryland, College Park Office of Institutional Research, Planning & Assessment)[https://www.irpa.umd.edu/Publications/pub_enroll.html]
Tools: Python to analyze and Chart.js to plot
What types of charts does your tool support? I want to use CanvasJS at work because it's quite fast while handling lots of data, but I can't because it seems to require access to the internet to do stuff on their backend. I work on embedded products that don't have internet access, so this project wouldn't work, and the cost is too much for our use case (lots of embedded products with only a handful of users for each install).
I've been looking at ChartJS which is open source and uses HTML5 Canvas as well, so it's reasonably fast, but I don't think it's as fast as CanvasJS and it definitely doesn't support as many chart types.
Right now, we're using a slow SVG-based library because it supports the charts we need, but it takes quite a long time to render even a few hundred data points. I'm definitely interested in something better.
That is one gorgeous piece of JS, thank you! :) I'm not able to tell exactly what it does (monitize?), so pardon my ignorance but basically it reduces the number of data points by rearranging them into fewer, cleaner time intervals?
I notice Coin Dance's data (https://coin.dance/volume/localbitcoins/DKK) is a lot simpler than BitcoinCharts' CSV - did they clean it up similarly to your script?
As you probably I noticed in my fiddle I'm using Chart.js's Time Scale (http://www.chartjs.org/docs/latest/axes/cartesian/time.html) which should by default automatically clean up an overcrowded X axis, but maybe I misunderstood.
Are you a programmer? You're question seems to indicate a lack of technical knowledge, but what you are asking for would probably require at least a bit of coding experience.
Chartjs is probably the easiest solution (http://www.chartjs.org). You need javascript experience though. If you don't have any then you will need to pay a professional.
> If not Excel, then what is a better platform to create a graph that is responsive with filters and slicers and put it on a webpage?
If you are expecting a graphical tool like Excel where you can just click a button and export a graph and import it into your webpage then you will probably be disappointed. There might be things like that out there but it won't give a result as polished as the example you provided. Only a decent js library like Chartjs will do that.
FYI the example you provided uses Chartbeat (https://chartbeat.com/). It looks like an analytics and business intelligence platform that is probably quite expensive. The ability to embed the charts in a webpage seems to be just a small feature of this much bigger piece of software. Probably extreme overkill for what you are doing.
> Is it easier to do such on Wix or Wordpress?
You're always better off with Wordpress instead of Wix. Wix is for people who don't even understand enough to use Wordpress. Custom dev will always be possible in Wordpress but is hit and miss with Wix.
Thanks for the tip! I've been playing around a little bit with d3, highcharts & chart.js, so I'm excited to see what I can do regarding charts for this project. This looks like a great resource though, definitely will give it a read - thank you!
You could use Chart.js which is free or use FusionCharts which is paid, but has a free version with watermarks. Lastly there's also Google charts. Their documentation is pretty good and it's a nice entry point.
How do you get the data? What about it exactly is "dynamic"? If you can show a graph from pre-feeded data already, it shouldn't be difficult to change/recreate the graph when the data changes?
I am using Chart.js.
Example code for updating my chart.js chart with new data:
function updateSurvey(data){ // cleaning old data surveyChart.data.datasets[0].data = []; // pushing new data for(var i = 0; i < data.answers.length; i++){ var answer = data.answers[i]; surveyChart.data.datasets[0].data.push(answer.votes); } // re-init chart with the new data surveyChart.update(); }
Hey Reddit, main developer here. We are using chart.js to render charts. I had another chart ready to deploy: http://i.imgur.com/oJZgZEb.png
The size of bubbles are proportional to the meeting duration but we later realized that people could get tripped by thinking the bubbles' edges conveyed the start/end of their meetings. Any idea on how to visualize this more effectively? Any other chart you'd like to see?
*edit: typo
> Are there any good languages or libraries that have good data visualization aspects? The one I know of is Processing/P5.js, but I don't know how viable that is in the real world.
I spent way too much time rolling my own charts, but it's the double edge sword of you owning something (you can do whatever you want, but you are on the hook for everything). I got a big influence from chartJS, but really it's all similarly done. I wanted to dive into JS a little extra (because I know I dislike it, but I wanted to help grow that skill some).
Ultimately, it doesn't matter what you do or what you use, at least at Capital One if you can state your case to use something then we use it (of course licensing has to play nicely. Can't add GNU/GPL code to a mission critical software internal to Capital One, meaning we'd have to open source it)
There are tons of javascript libraries to do charting.
chart.js is one of these. You should just Google some "javascript charts" and scrape the results you should find something easy enough no matter what is your level.
> I'm still getting to grips with Bokeh (the graphing tool), not sure if it allows custom formatting of numbers or dates.
Haven't tried Bokeh so maybe I shouldn't talk, but I know for a fact that http://www.chartjs.org/ is pretty nice..
Data's taken from my own algorithm, calculating the optical flow between each frames of each movies. The optical flow is the movement of neighbouring regions of pixels between two frames in a video file.
A video file is not composed entirely of "true" pictures. To reduce filesize, a video codec extrapolate virtual frames between the real ones by predicting the movement of pixels. With the library OpenCV, I was able to get the values of these predictions to make these charts : http://opencv.org/
The chart themselves are made with the Chart.js javascript libary : http://www.chartjs.org/ I find that this a good way to gauge the rhythm of a movie, as a cut between scenes is considered to have a really high optical flow. Usually, a peak of movements in a film corresponds to an action scene. A sustained high level of movement can also comme from the style of the director, as we can see for movies like Love Actually or Return of the King.
Yes, as you don't own any other data from the user all you have is their IP address (as far as I know). Not very practical. But as I mentioned, if you're going to make it more complicated simply use a database. If you don't care about the data being able to get deleted, go with LocalStorage. I don't know Firebase but they store the data for you in their own database. Definitely a good choice for your web app, yet will cost you money if it gets in bigger scale.
So if you expect to make bank out of the app, go for MySQL and PHP. If you want to keep it simple and for your friends: go for LocalStorage or Firebase. If you want to keep it for yourself, go for Localstorage, text file or MySQL.
Cons for Localstorage is that you don't own the data, so you can't make anything like 'highscore' or 'quickest progression', etc. Cons for .txt is that you can't really scale it well (it's hard to do, so I'd say for scaling your better choice is MySQL).
P.S. take a look at <strong>chart.js</strong> for a simple way of adding your charts/graphs.
http://www.chartjs.org/docs/#radar-chart
I can put that in an app and save it to a database. Imagine crowd-sourced flavor wheels from thousands of people. Would really make it a lot easier to do a "Cigar Netflix" type of thing.
I haven't used highcharts, but I have worked with chart.js and it was pretty easy to work with if you need something simple. Their documentation walked me through really anything I needed.
You can see the labels when hovering a particular slice of the donut. Afaik, there is not a native way to display regular labels with Chart.js... if there is that would be something to look at.
Using a list of all games for the 2014/2015 NBA season, I compiled a table of wins against games played for each team. You can select teams to show/hide them to see some interesting trends.
Feedback would be greatly appreciated!
I used data from http://www.basketball-reference.com
And the graph is plotted using http://www.chartjs.org.
Using a list of all features for the 2014/2015 UK Premier League, I compiled a table of points against games played for each team. You can select teams to show/hide them.
Feedback would be greatly appreciated!
I used data from http://api.football-data.org/
And the graph is plotted using http://www.chartjs.org.
I've built a similar chart for the current premier league season which updates throughout the season, but its early days at the moment:
http://www.richard-stanton.com/sports-trackers/premier-league-tracker/
Using a list of all features for the 2014/2015 UK Premier League, I compiled a table of points against games played for each team.
You can select teams to show/hide them.
Feedback would be greatly appreciated!
I used data from http://api.football-data.org/
And the graph is plotted using http://www.chartjs.org.
Save yourself the trouble and do the chart in JavaScript. Should be easy to query the data from javascript and populate a chart with list data.
http://www.chartjs.org/docs/#doughnut-pie-chart-introduction
I am sure if you google hard enough you can find an example of exactly how to d it.
not actually /r/bootstrap related, i whould suggest you /r/webdev or /r/javascript.
To asnwer your question: there are thousands of js charting libraries, i whould suggest you http://www.chartjs.org/ because its simple, lightweight and does the job with minimal effort.
The biggesst player is http://d3js.org/. I personally dont like it, because you will end up writing a lot more verbose code and its generic approach migth give you enless possibilities that will require a lot of (unnecesary) research in the beginning to get a quick line chart.
also google for "javascript charts/ graphs library"
| 4:03.2 | 4:00.01 | 3:53.77 |
|---|---|---|
| 2012 | 2013 | 2014 |
Essentially plot the above on a line graph/chart, with the y-axis scale in a mm:ss format.
The problem was that the chart couldn't accept the data in mm:ss format. It could only accept the data in integers, so for example, 4 minutes and 7 seconds would have to be entered as 247, rather than the ideal 4:07. This would mean the chart y-axis would be a scale of integers in the 200s, rather than 4:00 etc.
I've actually managed to solve 90% of the issue by using the scaleLabel: in the global charts config, by entering the data as seconds, but manipulating the y-axis to display in mm:ss format, like this:
scaleLabel:"<%= (Math.floor(Number(value)/60)).toFixed(0) + ':' + ((Number((value)/60)-((Math.floor(Number(value)/60))))*60).toFixed(0)%>"
The only remaining issue is that it displays <10 seconds as one number (i.e. 4 mins 5 seconds would display as 4:5 instead of 4:05).
Here are some other (free) charting libraries to use:
chartjs - limited number of charts but active development on github http://www.chartjs.org/
d3js - extremely powerful. enjoy banging your head against the desk; this library is for you! http://d3js.org/
flot - larger community, more charts, plugins.. sometimes buggy.. also on github http://www.flotcharts.org/
How far have you got and what issues are you running into?
Have you got the data from the database? Is the data in row arrays or objects? Do you already have a chart bootstrap extension or is that the level where you need help (bootstrap doesn't have a native graph/chart library)?
http://www.chartjs.org/ https://developers.google.com/chart/
There are plenty of great JavaScript charting libraries out there, such as ChartJS & Google Charts (the latter being my favourite of the two). It's easy to update the data on each of these charts with a little bit of JavaScript and an input field to do what you need!
Which ever CMS you decide on, it won't DO THAT for you.
You will most likely have to research the plugin/addon/module repositories of that CMS, and join their forum to ask, "Will this plugin/addon/module on this CMS do THIS?"
But then again, there are plenty of jQuery plugins that do this. You just need to find the "right" CMS to output the data in the proper format.
http://www.chartjs.org is worth checking out, also http://www.highcharts.com, however highcharts requires a paid for license for commercial projects IIRC. Both are reasonably straight forward and customisable although I suppose this will depend on your use case.
Not completely sure what exactly you are looking for, and if it's even chart.js you're asking about, but apparently you can at least get a png from a chart.js chart using .toBase64Image(). Haven't tried Chart.js yet, myself, so I'm not exactly sure how it looks and if it would work for your use case. There are a lot of charting frameworks available nowadays, though.
Edit: Just a couple of thoughts. I think it's a neat project but I'd consider axing local storage and using something like MongoDB instead so you don't have to worry about losing your data if you clear your browser storage.
Second, and ignore this if you already have it built in, but it'd be great if you could add in a separate view for each project/client, that shows what tasks you've done, for how long, on any given day. You could even work in something like Chart.js. Would be great for invoicing. Just a couple of thoughts!
So I will go about this using a nice looking javascript library, getting the information from the chain is easy http://fedoracha.in/chain/FedoraCoin/q/nethash/144/500/1000
The reason javascript, they look great and shouldn't be hard to work with.
The issue, I suck with javascript, I was thinking about using chart.js found here http://www.chartjs.org/ you or anyone good with javascript or should I get learning :P ? Really I just have issues with arrays and passing them to the js to be used.
This is certainly a valid take. I built an app using KnockoutJS, the template code looked clean, the JS and PHP code looked clean.
But still, logic is partiality in PHP and partially in JS. It got messy quickly.
Now I just use datatables and chartjs with Laravel JSON responses.
Actually, I like this idea. The best way to learn is through experience. I actually have an idea.
Why don't you guys use this opportunity to shoot 2 bird with one arrow?
You can code a NoFap/PMO monitoring website, with user login and legit charts etc., so we kick this addiction off, and also learn to code.
I am talking about a combination of: this spreadsheet, these charts and these chain-type visuals and collaboration.
You can contribute on GitHub, like Engineers do in the industry. I can walk you guys through the process. But I cannot participate. I am very limited on time. I think Java would be a great language to do this in. And we can set this shit up for free, using Google's App Engine. You guys will actually learn web back-end, front-end, system programming, feature development.