Select Page

Category: JavaScript

Create Interactive Charts Using Plotly.js, Part 3: Bar Charts

In our last tutorial, you learned how to create line charts in Plotly.js. Every aspect of line charts, like the data to be plotted and the shape or color of the line connecting the plotted points, can be controlled using a set of attributes. Plotly.js allows you to create bar charts in a similar manner.  In this tutorial, you will learn how to create different kinds of bar charts using Plotly.js. I will also discuss how to control the appearance of these charts, like the bar color and width, using specific attributes. Before going further, I would like to mention that you can also create some basic bar charts using Chart.js. If you don’t plan on using any of the fancy features of Plotly.js, using a lightweight library makes more sense. Creating Your First Bar Chart You can plot a bar chart in Plotly.js by setting the value of the type attribute to bar. The rest of the tasks, like creating a trace object or providing the data to be plotted, are similar to the process of creating line charts. Here is the code you need to create a basic bar chart in Plotly. var barDiv = document.getElementById('bar-chart'); var traceA = { x: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], type: 'bar' }; var data = [traceA]; var layout = {...

Read More

Create Interactive Charts Using Plotly.js, Part 2: Line Charts

In the Getting Started With Plotly.js tutorial of this series, you were presented with a quick start guide that briefly covered all the features, bundles and chart types available in the library. If you have not already read that tutorial, I would suggest that you go over it at least once to get a broad idea of the Plotly.js library. In this tutorial, you will learn how to create line charts in Plotly. I have also written another series in the past about a lightweight library called Chart.js that can be used to create canvas-based charts in JavaScript. In one tutorial that is titled Getting Started With Chart.js: Line and Bar Charts, I covered the process of creating line charts using Chart.js. People who have read that tutorial will probably remember that you have to set the type attribute to line to create a line chart in Chart.js. With Plotly.js, you cannot set the type attribute to line to create a line chart. You will have to set the type attribute to scatter and then set the mode attribute to “lines”, “lines+markers”, or “lines+markers+text”. Keeping this in mind, let’s get started with the tutorial and create some awesome line charts. Creating a Basic Line Chart In this section, we will plot two different scatter traces in the form of line charts using Plotly. The code is very similar to the...

Read More
000webhost logo