This is a follow up on our Making A Bootstrap Dashboard With ZingChart On LAMP Stack blog post!

One of our developers made this PHP dashboard for you to use. Today we’re sharing ways to customize it for your team or organization.

Generic PHP Dashboard to Customize

php dashboard

Customizing a PHP dashboard is easy when you can work with existing pieces. ZingChart’s PHP GitHub repo contains all you need to make this dashboard yourself. We also shared some info on how the PHP dashboard was made, too.

Next up: Some of the most common ways one might customize a PHP dashboard like this!

1. Change chart title font

chart title in the PHP dashboard demo

Updating a chart title to use a custom font is a matter of updating the font-family attribute in the chart JSON. In our example, there is no font-family specified since we are using the default. Here’s how your JSON should look if you include a custom font:

title:{  
  text: 'Revenue For Personal Plans\nGrouped by Days',  
  font-family: 'Verdana'
}

ZingChart supports the following standard web-safe fonts:

  • Arial, Arial Black

  • Times New Roman

  • Tahoma/Verdana

  • Cursive

  • Georgia

  • Palatino

  • Comic Sans MS

  • Trebuchet MS

  • Courier New

  • Impact

  • Lucida Console/Monaco

In addition, you can easily include web fonts. Specify the name the same way and be sure to include a link to the font file in the head of your page.

Remember, you can right-click on any chart in ZingChart
to see the JSON configuration by selecting "View Source."

2. Move ring chart legend

legend on PHP dashboard ring chart

Everything legend-related can be found in the legend object. In this example the legend looks like this:

legend:{  
  backgroundColor:"none",  
  align: "left",  
  layout: "vertical",  
  toggleAction: "remove",  
  borderWidth:0,  
  marker:{  
      borderWidth:0,  
      size:7  
  },  
  item:{  
      cursor:"hand",  
      markerStyle:"circle",  
      fontColor:"#3f3f3f",  
      fontSize:10,  
      decimals:2,  
      text:"%t $%v <span style='font-style:italic; color:#cacaca; padding-right:20px;'>( %npv% )</span>"  
  }  
}

The fastest way to move the legend would be to change the align attribute to "align":"right" and remove the text attribute in the legend item. You’ll get a legend on the other side of the ring:
 

legend on right side of ring chart
 
An alternate way to move the legend would be to change the layout attribute to ”layout”:”horizontal” and remove the text attribute in the legend item. The result would look like this:
 
legend alternative placement
 

3. Update tooltip text

tooltip on PHP dashboard demo

This customization is simple, once you know one key thing about the dashboard. It does not utilize the ZingChart tooltip object. Instead, the chart uses the "plotLabel" option within the "crosshairX" object.

"plotLabel":{  
  "text":"Recurring Revenue on  
  <span style='color:#900;font-size:17px;'>%scale-key-value</span> is <span style='color:#090;font-size:17px;font-weight:bold;'>$%v</span>  
  <span style='color:#009;font-weight:bold;'>",  
  "backgroundColor":"#ffffff",  
  "alpha":0.6,  
  "textAlpha":1,  
  "borderAlpha":1,  
  "decimals":2,  
  "textAlign":"center",  
  "fontFamily":"Georgia",  
  "fontSize":16,  
  "fontColor":"black",  
  "padding":"10%",  
  "borderRadius":"5px",  
  "callout":true,  
  "placement":"node-top",  
  "multiple":true,  
  "offsetY":-5  
}, 

So the hardest part about updating the tooltip text in this demo is actually just finding it, hiding in the plot label of the X crosshair. If you change the "text" attribute, the mouse over effect will change, too.

In the ring chart part of the dashboard, the tooltip object is used. You can make the same types of edits to background, text, and styling there.

php dashboardtooltip with updated text
 

4. Utilize different chart types

space for an additional chart type in the php dashboard demo

Line or ring charts don’t make sense with your data? No problem. One of ZingChart's many strengths is that if you can think of it, ZingChart can do it. For example, to change the area chart into a bar chart, just set the property ‘type’ to 'bar' instead of ‘area’.

To see this effect immediately without writing any code, right click anywhere on the main area chart and then click on ‘View Source’.

view source on PHP dashboard

Now all you need to do here is replace "type": "area" with "type": "line" or "type": "bar". Then click ‘Apply’.

area chart now bar chart in PHP dashboard demo

And voila! You line chart is now a bar chart.

How would YOU customize this PHP dashboard?

Have you put together a PHP dashboard lately? Tell us how it differs from what we’ve shared and how you’d customize our demo dashboard.