Add new JavaScript Charting Engine

Once you get going with JavaScript charting, you will probably want to start creating some of your own. . You do that by creating a new JavaScript Charting Engine and then upload the js and css files in the charting library. That process is documented in this article.

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

1. Javascript Chart Engines (Admin > System > Charting)

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

2. Add the JavaScript Chart Engine

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

Save.

3. JavaScript Chart Engine Editor

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

4. 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>

5. 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.