C# Amcharts javascript

Question

I input data FinalResult of type List<SummaryUptoToday> from C# into Amcharts and Here is the definition of SummaryUptoToday

public class SummaryUptoToday : ICloneable
{
    public List<TradePositionSingle> StockList { get; set; }
    public List<PerformanceSingle> Performance { get; set; }
    public double Commission { get; set; }
    public double PNL { get; set; }
    public double NAV { get; set; }
    public double CashLeft { get; set; }
    public DateTime Date { get; set; }

    public SummaryUptoToday() { }

    object ICloneable.Clone()
    {
        return ObjectCopier.Clone(this);
    }
}

and the definition of PerformanceSingle is

public class PerformanceSingle : ICloneable
{
    public MyData Stock { get; set; }
    public int Position { get; set; }
    public int TradePositionToday { get; set; }
    public double Commission { get; set; }
    public double PNL { get; set; }
    public double NAV { get; set; }
    public double PNL2 { get; set; }

    public PerformanceSingle() { }

    object ICloneable.Clone()
    {
        return ObjectCopier.Clone(this);
    }
}

Now I want to add a series of graphs of each term in List<PerformanceSingle> Performance in the FinalResult (Maybe need for loop ) with

Title:  Stock.Name
x-axis: Date
y-axis: PNL2

Then how could I do this in javascript languige as following(Here data is the imputed FinalResult )

    function createStockChart(data) {
        var chart = new AmCharts.AmStockChart();

        // DATASETS
        var dataSet1 = new AmCharts.DataSet();
        dataSet1.color = "#b0de09";
        dataSet1.fieldMappings = [{
            fromField: "NAV",
            toField: "NAV"
        }];
        dataSet1.dataProvider = data;
        dataSet1.categoryField = "Date";

        chart.dataSets = [dataSet1];

        // PANELS
        var stockPanel = new AmCharts.StockPanel();
        stockPanel.showCategoryAxis = true;
        stockPanel.title = "NAV";
        stockPanel.eraseAll = false;
        //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

        var graph = new AmCharts.StockGraph();
        graph.title = "NAV";
        graph.valueField = "NAV";
        graph.bullet = "round";
        graph.bulletColor = "#FFFFFF";
        graph.bulletBorderColor = "#00BBCC";
        graph.bulletBorderAlpha = 1;
        graph.bulletBorderThickness = 2;
        graph.bulletSize = 7;
        graph.lineThickness = 2;
        graph.lineColor = "#00BBCC";
        graph.useDataSetColors = false;
        graph.comparable = true;
        graph.compareField = "HSI";
        stockPanel.addStockGraph(graph);

Actually, the structure of my inputed data is following:

var data1 = [{
"Date": "2016-07-09",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 27.55,
"PNL": 12.89
}];

What I want to do is first plot the main graph NAV and dynamically two graphs of H1 and H2 with their PNL2 against the Date

Answer 1

I'm no expert with C# but the dataProvider needs to be a JSON array of objects. Given you want to serialize this:

x-axis: Date
y-axis: PNL2

Your dataProvider array should be:

[{
  "Date": "...", //string representation of your date, such as "YYYY-MM-DD"
  "PNL2": 10.5,
},
//other array elements omitted
]

There are plenty of resources out there on serializing .NET objects to JSON. A brief search suggests that JSON.NET is the recommended framework for this.

Your graph's valueField needs to correspond to the toField in your fieldMappings . You can map the fields to the same name or from a different name to a new name. If you want to map PNL2 to NAV , for example:

dataSet1.fieldMappings = [{
  fromField: "PNL2",
  toField: "NAV"
}]
// ...
graph.valueField = "NAV"; //maps to the toField

For simplicity's sake of the demo, I kept the PNL2 name the same and adjusted accordingly. compareField was removed since you only have one dataSet. If you're comparing multiple dataSets, then it can be placed back in. I also set the dataDateFormat to match my string YYYY-MM-DD dates in the Date categoryField .

 var data = [{ "Date": "2016-07-09", "PNL2": 28.05 }, { "Date": "2016-07-10", "PNL2": 30.84 }, { "Date": "2016-07-11", "PNL2": 22.89 }, { "Date": "2016-07-12", "PNL2": 26.67 }, { "Date": "2016-07-13", "PNL2": 21.7 }, { "Date": "2016-07-14", "PNL2": 24.54 }, { "Date": "2016-07-15", "PNL2": 24.32 }, { "Date": "2016-07-16", "PNL2": 31.48 }, { "Date": "2016-07-17", "PNL2": 29.99 }, { "Date": "2016-07-18", "PNL2": 33.67 }, { "Date": "2016-07-19", "PNL2": 24.08 }, { "Date": "2016-07-20", "PNL2": 34.17 }, { "Date": "2016-07-21", "PNL2": 32.76 }, { "Date": "2016-07-22", "PNL2": 28.59 }, { "Date": "2016-07-23", "PNL2": 21.49 }]; function createStockChart(data) { var chart = new AmCharts.AmStockChart(); chart.dataDateFormat = "YYYY-MM-DD"; // DATASETS var dataSet1 = new AmCharts.DataSet(); dataSet1.color = "#b0de09"; dataSet1.fieldMappings = [{ fromField: "PNL2", toField: "PNL2" }]; dataSet1.dataProvider = data; dataSet1.categoryField = "Date"; chart.dataSets = [dataSet1]; // PANELS var stockPanel = new AmCharts.StockPanel(); stockPanel.showCategoryAxis = true; stockPanel.title = "PNL2"; stockPanel.eraseAll = false; //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16); var graph = new AmCharts.StockGraph(); graph.title = "PNL2"; graph.valueField = "PNL2"; graph.bullet = "round"; graph.bulletColor = "#FFFFFF"; graph.bulletBorderColor = "#00BBCC"; graph.bulletBorderAlpha = 1; graph.bulletBorderThickness = 2; graph.bulletSize = 7; graph.lineThickness = 2; graph.lineColor = "#00BBCC"; graph.useDataSetColors = false; stockPanel.addStockGraph(graph); chart.addPanel(stockPanel); chart.write("chartdiv"); } createStockChart(data); 

 <script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script> <script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script> <script type="text/javascript" src="//www.amcharts.com/lib/3/amstock.js"></script> <div id="chartdiv" style="width: 100%; height: 400px;"></div> 

Edit: To create these dynamically, you just need to make sure your graphs and dataSets/dataProviders point to the proper fields. For example, to combine everything into a single dataSet:

  //get the valueFields from the first element in the dataProvider array
  var valueFields = [];

  Object.keys(data[0]).forEach(function(field) {
    if (field !== "Date") {
      valueFields.push(field);
    }
  });

  //create your fieldMappings in your dataSet:
  // DATASETS
  var dataSet1 = new AmCharts.DataSet();
  dataSet1.color = "#b0de09";
  //create the mappings for each valueField
  dataSet1.fieldMappings = valueFields.map(function(valueField) {
    return {
      fromField: valueField,
      toField: valueField
    };
  });
  dataSet1.dataProvider = data;
  dataSet1.categoryField = "Date";

  //create your graphs based on the valueFields:
  valueFields.forEach(function(valueField) {

    var graph = new AmCharts.StockGraph();
    graph.title = valueField;
    graph.valueField = valueField;
    // other settings omitted
    stockPanel.addStockGraph(graph);
  });

And here's a demo for that:

 var data1 = [{ "Date": "2016-07-09", "PNL2": 12.84, "NAV": 26.28, "PNL": 7.61 }, { "Date": "2016-07-10", "PNL2": 11.62, "NAV": 27.55, "PNL": 12.89 }, { "Date": "2016-07-11", "PNL2": 16.95, "NAV": 30.66, "PNL": 7.91 }, { "Date": "2016-07-12", "PNL2": 13.5, "NAV": 28.9, "PNL": 14.58 }, { "Date": "2016-07-13", "PNL2": 13.26, "NAV": 25.72, "PNL": 12.47 }, { "Date": "2016-07-14", "PNL2": 12.29, "NAV": 20.53, "PNL": 6.27 }, { "Date": "2016-07-15", "PNL2": 12.86, "NAV": 34.96, "PNL": 14.28 }, { "Date": "2016-07-16", "PNL2": 16.34, "NAV": 32.99, "PNL": 15.31 }, { "Date": "2016-07-17", "PNL2": 15.85, "NAV": 24.26, "PNL": 9.79 }, { "Date": "2016-07-18", "PNL2": 15.09, "NAV": 35.05, "PNL": 7.54 }, { "Date": "2016-07-19", "PNL2": 10.52, "NAV": 24.09, "PNL": 6.72 }, { "Date": "2016-07-20", "PNL2": 15.99, "NAV": 29.35, "PNL": 11.47 }, { "Date": "2016-07-21", "PNL2": 12.31, "NAV": 32.26, "PNL": 7.16 }, { "Date": "2016-07-22", "PNL2": 13.77, "NAV": 26.18, "PNL": 6.46 }, { "Date": "2016-07-23", "PNL2": 12.13, "NAV": 30.22, "PNL": 10.94 }]; function createStockChart(data) { var chart = new AmCharts.AmStockChart(); chart.dataDateFormat = "YYYY-MM-DD"; var valueFields = []; //get the valueFields from the first element in the dataProvider array Object.keys(data[0]).forEach(function(field) { if (field !== "Date") { valueFields.push(field); } }); var dataSet1 = new AmCharts.DataSet(); dataSet1.color = "#b0de09"; //create your field mappings for each valueField dataSet1.fieldMappings = valueFields.map(function(valueField) { return { fromField: valueField, toField: valueField }; }); dataSet1.dataProvider = data; dataSet1.categoryField = "Date"; chart.dataSets = [dataSet1]; // PANELS var stockPanel = new AmCharts.StockPanel(); stockPanel.showCategoryAxis = true; stockPanel.title = "PNL2"; stockPanel.eraseAll = false; //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16); //create a graph for each valueField valueFields.forEach(function(valueField) { var graph = new AmCharts.StockGraph(); graph.title = valueField; graph.valueField = valueField; graph.bullet = "round"; graph.bulletColor = "#FFFFFF"; graph.bulletBorderColor = "#00BBCC"; graph.bulletBorderAlpha = 1; graph.bulletBorderThickness = 2; graph.bulletSize = 7; graph.lineThickness = 2; graph.lineColor = "#00BBCC"; graph.useDataSetColors = false; stockPanel.addStockGraph(graph); }); chart.addPanel(stockPanel); chart.write("chartdiv"); } createStockChart(data1); 

 <script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script> <script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script> <script type="text/javascript" src="//www.amcharts.com/lib/3/amstock.js"></script> <div id="chartdiv" style="width: 100%; height: 400px"></div> 

Edit 2: The chart doesn't support nested arrays. Your StockList array needs to be flattened into the top level object. For example:

var data1 = [{
"Date": "2016-07-09",
"H1_PNL2": 20, 
"H1_NAV2" : 20
"H2_PNL2": 20, 
"H2_NAV2" : 20,
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"H1_PNL2": 20, 
"H1_NAV2" : 20
"H2_PNL2": 20, 
"H2_NAV2" : 20,
"NAV": 27.55,
"PNL": 12.89
}];

From there you can create your graphs and dataSets accordingly using H1_PNL2 and H2_PNL2 as valueFields for your H1/H2 graphs.