Help & DocumentationJavaScript Charting ExtendingAdd new JavaScript Charting Library

Add new JavaScript Charting Library

Once you get going with JavaScript charting, you will probably want to start creating some of your own. In some cases you will want to use charting libraries that are not yet loaded in Metric Insights. This article shows how to load new JavaScript charting libraries. You do that by creating a new JavaScript Charting Engine and then upload the js and css files for the charting library. That process is documented in this article.

Of course, once you add a new JavaScript charting library, you will want to create different chart types to use it. E.g., Line, Bar, Pie, and any more complex ones you want. All you do is supply the JavaScript code. But that step is documented in the next article.

In this example, we create a nvd3 charting library for use.

1. Administration Menu

At the Administration Menu click on JavaScript Chart Library Files under the JavaScript Charting section

2. Javascript Chart Library Files

Click Add New File to upload js and css files for use in JavaScript charting

3. Add JavaScript charting library files

Choose file to add. In this example nv.d3.css. Select the Type of file. In this example css. Click Save

4. Javascript Chart Library Files

Click Add New File to add more

5. Add JavaScript charting library files

Choose file to add. In this example nv.d3.js. Select the Type of file. In this example javascript. Click Save

6. Javascript Chart Library Files

7. Javascript Chart Library Files

All files have been uploaded

8. Administration Menu

At the Administration Menu click on JavaScript Charting Engines under the JavaScript Charting section

9. Javascript Chart Engines

Click Add New Chart Engine. In this example we will add the nvd3 JavaScript charting code

10. Add the JavaScript Chart Engine

Enter the name and internal name for this JavaScript charting engine. In this example nvd3. Click Save.

11. Javascript Chart Engines

JavaScript Charting Engine added. Now select the entry you just added.

12. JavaScript Chart Engine Editor

Enter the HTML code for this charting engine. You can use other charting engines as a guide.

13. HTML Code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="${HOST_NAME}css/libs/custom/nv.d3.css"></link>
<style>${CSS_CODE}</style>
<script type="text/javascript" src="${HOST_NAME}js/jquery/jquery-1.10.2.min.js?ver=${PROJECT_VERSION}"></script>
<script type="text/javascript" src="${HOST_NAME}js/libs/custom/d3.v2.js"></script>
<script type="text/javascript" src="${HOST_NAME}js/libs/custom/nv.d3.js"></script>
<script type="text/javascript" src="${HOST_NAME}js/api/mi.js?ver=${PROJECT_VERSION}"></script>
</head>
<body>
<div id="chart_div"><svg></svg></div>
<script type="text/javascript">
${CHART_INIT}
</script>
<script type="text/javascript">
${JAVASCRIPT_CODE}
</script>
</body>
</html>

14. JavaScript Chart Engine Editor - add HTML

Enter the HTML code for this charting engine. In this example you see how the js and css charting files are referenced. A few of the js and css files were uploaded in a previous step. You can use other charting engines as a guide. Click Save to save your changes.

Now you are ready to create different chart types to use this charting library. That is documented in the next article.

0 Comments

Add your comment

E-Mail me when someone replies to this comment