amchart - pass parameters to properties/reuse properties across graphs/Use same property across multiple graphs

Question

Here's the code I use to plot a line graph.

var db_query = <?php echo json_encode($db_query_1) ?>;
var chart;
var graph;

/* chart initialization */
var chart = AmCharts.makeChart("plot1", {
    type: "serial",
    categoryField: "OCCUR_DATE",
    graphs: [{
        type: "smoothedLine",
        theme: "light",
        valueField: "FREQ"
    }]
})

$.ajax({
    type: 'POST',       
    url: "mySQL.php",
    data: {'db_que': db_query},
    dataType: 'html',
    context: document.body,
    global: false,
    async:true,
    success: function(data) {
        //alert(data);
        chart.dataProvider = eval(data);
        chart.validateNow();
    }
});

I'd like to

1. Create a separate javascript file with properties defined for each of line, pie, bar etc types of graphs & import that javascript file

2. replace this:

   var chart = AmCharts.makeChart("plot1", {
       type: "serial",
       categoryField: "OCCUR_DATE",
       graphs: [{
           type: "smoothedLine",
           theme: "light",
           valueField: "FREQ"
       }]
   })
   

   with

   var chart = AmCharts.makeChart("plot1", options_line_graph);
   

3. I'd like to be able to pass parameters to the properties for the x-axis & y-axis titles & the graph name. These are at least the very few variable parameters I can think of now. If I can achieve this, adding more variable parameters could be done easily I presume.

The reason I ask for help here is, I have over 30 line graphs, 20 pie charts & a few of other types that I will plot. Setting the same set of properties over & over again sounds an inefficient way of doing things.

Could someone please guide/help me?

Answer 1

1. Just create a JavaScript file declaring your default configurations as variables.
   e.g.:
   

   var defaultPlotConfig = {
       /* amCharts configuration object */
   }
   

   and insert them into your html before you create your charts

   <script src="defaults.js"></script>
   

2. I assume you're ok with using jQuery (your request is already using it)
   You have to make a deep copy for your configuration objects.
   jQuery.extend() makes this really easy (and you'll see in point 3, why I'm using it).
   The method returns you a merged object of the objects passed in the parameters. What you have to do is:

   var plotChart1 = AmCharts.makeChart("plot1", $.extend({}, defaultPlotConfig));
   

   Important: The first parameter has to be a new object {}, because it's the returned object.

3. Using the extend() method, you can merge multiple objects. The last object in the parameters has priority. All you have to do is:

   var plotChart1 = AmCharts.makeChart("plot1",
       $.extend({}, defaultPlotConfig, {
           /* these will overwrite the defaults */
           categoryAxis: {
               title: "x axis title"
           }
       })
   );
   

Answer 2

The chart instance reuses the object you pass in as configuration, so, naturally, you cannot pass in the same object to multiple charts.

What you can do, though, is to pass in duplicated the config object before applying modifications and passing in to chart instance.

There's a good object cloning function in this SO thread.

So basically you could do something like this:

// define universal config
var universalConfig = {...};

// clone universalConfig
var instanceConfig1 = clone(universalConfig);

// make modifications
instaceConfig1.categoryField = "OCCUR_DATE";

// create the chart
var chart = AmCharts.makeChart("plot1", instaceConfig1);

// repeat
// ...

Here's a working example on CodePen.