Previously, we wrote about how to create a simple column chart with Michael Bostock’s d3. D3 is great for visualizing data but it can be quite complicated for some users.
Today, I want to share some simple sample code to create a grouped bar chart using Highcharts, a simpler (but still very customizable) alternative to d3.
For this example, I am going to use the Inpatient Prospective Payment System (IPPS) Provider Summary for the Top 100 Diagnosis-Related Groups (DRG) - FY2012 dataset from the HHS/CMS (the United States Department of Health and Human Services Center for Medicare and Medicaid Services) open data portal, data.cms.gov. Essentially, this dataset has up to 100 rows for each Medicare-participating hospital and their pricing, reimbursement, and discharge volume for the most common diagnosis groups.
Skeleton HTML you’ll need:
In the HTML snippet above, we:
divwith a unique ID (in this case
chart-container) which we will later pass Highcharts as the desired destination of our chart
.ready()callback, which is called once the HTML page and dependencies are fully loaded, we form a URL to query the dataset for the data we want and use the response to create the chart in the specified
#chart-containerdiv. You can learn more about how to create a chart using Highcharts and find links to their documentation here.
I hope this was helpful! I encourage you to tinker with this on your own page web page or fork the jsFiddle. If you have any questions, feel free to reach out to me directly via Twitter (@skram)) or through one of our support channels.
Have a great example of your own? Please contribute to our community-maintained documentation!