At ZingChart, we love charts. And we’re always looking for ways to help our customers make better charts. Today we’re sharing a few tips and tricks for making better interactive charts with our JavaScript charting library.
Better Charts with a Few Simple ZingChart Tricks
Below you’ll find several examples that show tips and tricks for using the library to make better charts. Some of these tips are easy to find in our documentation. The rest we’re sharing because users have asked and we think the solutions would be useful to others.
1. ZingChart shapes for creative flexibility
Have a visual idea but it’s not a standard chart? Shapes might make it work. You can use ZingChart shapes to bring out the creative side in your chart designs.
Here is a simple bar graph turned into a thermometer. You could use this chart to display:
-
A goal you are trying to reach
-
Amount of funds raised
-
Temperatures (of course)
The idea behind it is creating a bar graph. Then, push that bar graph up from the x-axis and put a circle shape below to give it that finishing touch.
Shapes and Multiple Graphs
Speaking of shapes, ZingChart’s flexibility with shapes allows you to do many things. For example, you can also use them to make an interactive reference bar.
This graph uses shapes. Shapes have ‘position:absolute’ (CSS equivalent) in our graphs. We take advantage of this by styling our graph to the right and all shapes on the left. From this example, you can see the flexibility of combining shapes to create an arrow, to creating a bar that is used to reference the max size node.
There is another approach to adding a reference bar to your graph, instead of delta bands.
This graph uses graphset, a series of one or more graphs in the same div. It is often useful to have a chart with data that looks clean and then have a separate bar for users to see a relative data plot. One way you might use this in the “real world” is to make a main graph with daily sales, and a reference graph with the monthly sales average.
2. Combining stacked charts
Stacked charts are great for viewing changes in categories over time, but what if you want to display information about each stack in total?
This demo shows how you can display shared stack percentage of the total graph and shared total value of each stack. Using ZingChart tokens, you can display these values on every plot using valueBox.
{
text: "%plot-percent% Stack total: %total"
}
If you have three plots, you will have three valueBoxes: one on each plot. The trick is to hide the valueBox in the lower stacks using ZingChart rules and just display the top one.
{
rules: [{
//hide the lower plots, in this case only plot 0 (green one)
rule: "(%p === 0)",
visible: false
}]
}
3. Using custom values
Want to display your own data to the users on top of your graph? Try using our jsRule attribute to apply these values.
This demo shows the usefulness of displaying custom values. With jsRule, we can apply a function that returns JSON attributes dynamically to: tooltips and valueBox. Say you have a total number of sales per month, how else do you display the percentage increase/decrease in sales on the graph at the same time?
You can start by having a function that calculates whatever value you want/need in a global array. This function will be the same length as your ‘values’ array as we want to display one value per each node. We chose percentage increase/decrease in sales.
//make this function calculate whatever you want!
function customFormatingFunction() {
for( var i = 0; i < inputData.length; i++){
var sumTotal = 0;
if (i === 0) { //display no text on the first plot (January)
globalArray.push('');
} else {
sumTotal = inputData[i] + inputData[i - 1];
globalArray.push(Math.round((inputData[i] - inputData[i - 1])/ sumTotal * 100))
}
}
}
After deciding what values to calculate, you are now ready to set up jsRule in the JSON. The jsRule attribute allows you to apply a custom function to dynamically fill your JSON with attributes for each node. We are going to use our custom values created above and apply them to each node's valueBox.
plot: {
valueBox: { //this is for displaying percentage value all the time
jsRule: "ZC.customFn.myfunc()", //function will be called once for each node before render!
...
}
...
}
What is this ZC.customFn.myfunc()? Let’s show you!
// ZC is a object (wrapper)
// This function determines the text value and color value
// based on if we went up or down in sales
ZC.customFn.myfunc = function(p) {
var value = globalArray[p.nodeindex];
var textValue = "%" + value;
var color = "red";
if (p.nodeindex === 0) //if januaray display no text
textValue = "";
if (value > 0)
color = "green";
return {
text: textValue,
fontColor: color
}
};
The latter function gets applied to each plot and node, returning the styling and text value to the JSON. Lastly, we will use rules to hide the value from being displayed twice, once on each plot.
rules: [
{
rule: "%p == 1", // If plot 1, hide the value box. Otherwise we will
visible: false // have two of the same valueBoxes.
}
]
4. Customizing the legend with shift + click
Do you have a lot of plots? Tired of clicking all those legend items to hide them? We have a solution built-in to ZingChart to address this very issue. Use (shift + click) on legend items to select the inverse plots.
How do you make better charts?
Share your ZingChart tips and tricks in the comments section below.