CODEWITHSUNDEEP
fusioncharts
msmarkova
msmarkova

Reputation: 61

fusioncharts multi series bar chart does not render with dynamic categories and datasets

I'm using fusioncharts for the first time, and I'm having trouble rendering a multi series bar chart using dynamic categories and datasets. Below is my code:

FusionCharts.ready(function () {

getSentiCount(symbolInput);

var chartCategories1 = "[{'category': [";

for (var a = 0; a < sentiData.length; a++) {
    if(sentiData[sentiData.length - 1].totalcount == sentiData[a].totalcount) {
        chartCategories1 += "{'label':'" + bdateForm(sentiData[a].bdate) + "'}";
    } else {
        chartCategories1 += "{'label':'" + bdateForm(sentiData[a].bdate) + "'},";
    }
}

chartCategories1 += "]}]";

var chartData1 = "[{'seriesname': 'Negative','data':[";

for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "1") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "1") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]},{'seriesname': 'Positive','data':[";


for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "3") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "3") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]},{'seriesname': 'Neutral','data':[";

for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "2") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "2") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]},{'seriesname': 'Unknown','data':[";

for (var e = 0; e < sentiData.length; e++) {
    if(sentiData[e].bdate == sentiData[sentiData.length - 1].bdate) {
        if(sentiData[e].avgsentimentvalue == "") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'}";
        } else {
            chartData1 += "{'value':'" + 0 + "'}";
        }
    } else {
        if(sentiData[e].avgsentimentvalue == "") {
            chartData1 += "{'value':'" + sentiData[e].totalcount + "'},";
        } else {
            chartData1 += "{'value':'" + 0 + "'},";
        }
    }
}

chartData1 += "]}]";

 var chartProperties1 = {
          "caption": "Sentiment",
          "bgColor": "#ffffff",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "borderAlpha": "20",
            "canvasBorderAlpha": "0",
            "baseFontSize": "14",
            "usePlotGradientColor": "0",
            "plotBorderAlpha": "10",
            "showXAxisLine": "1",
            "showYAxisLine": "0",
            "showYAxisValues": "0",
            "xAxisLineColor": "#999999",
            "divlineColor": "#999999",
            "showAlternateHGridColor": "0",
          "paletteColors": "#2cb32b,#ff2602,#2786f7,#f9f70e",
          "manageResize": "1",
          "autoScale": "1"
        }

 function renderchart() {
        var contentSummaryChart1 = new FusionCharts({
            type: 'mscolumn2d',
            renderAt: "sentimentChart",
            width: "100%",
            height: "180",
            autoscale: "1",
            dataFormat: "json",
            dataSource: {
                "chart": chartProperties1,
                "categories": chartCategories1,
                "dataset": chartData1
            }

        });

         contentSummaryChart1.render();

    }

 renderchart();  

});

sentiData is a variable I'm getting via an Ajax call (sentiData is actually the output of the getSentiCount(symbolInput) function. I've logged them into the console, and they are definitely not null. I've also checked both of them very carefully, and they are definitely in the correct format.

Here is the output of chartCategories1 - [{'category': [{'label':'08-31-2017'},{'label':'08-30-2017'},{'label':'08-28-2017'},{'label':'08-23-2017'},{'label':'08-22-2017'},{'label':'08-21-2017'},{'label':'08-16-2017'},{'label':'08-09-2017'},{'label':'08-08-2017'},{'label':'08-07-2017'},{'label':'08-03-2017'},{'label':'08-02-2017'}]}]

Here is the output of chartData1 - [{'seriesname': 'Negative','data':[{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'1'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'}]},{'seriesname': 'Positive','data':[{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'1'},{'value':'0'}]},{'seriesname': 'Neutral','data':[{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'0'},{'value':'2'},{'value':'0'},{'value':'0'},{'value':'1'},{'value':'0'},{'value':'4'}]},{'seriesname': 'Unknown','data':[{'value':'2'},{'value':'1'},{'value':'1'},{'value':'2'},{'value':'1'},{'value':'1'},{'value':'0'},{'value':'0'},{'value':'1'},{'value':'0'},{'value':'0'},{'value':'0'}]}]

Here is how the code would look like if the data was readily available and I didn't need an Ajax call to get it (in getSentiCount(symbolInput)):

FusionCharts.ready(function() {
var contentSummaryChart1 = new FusionCharts({
type: 'msbar2d',
renderAt: 'chart-container',
width: '100%',
height: '180',
dataFormat: 'json',
dataSource: {
  "chart": {
    "caption": "Sentiment",
    "bgColor": "#ffffff",
    "bgColor": "#ffffff",
    "showBorder": "0",
    "borderAlpha": "20",
    "canvasBorderAlpha": "0",
    "baseFontSize": "14",
    "usePlotGradientColor": "0",
    "plotBorderAlpha": "10",
    "showXAxisLine": "1",
    "showYAxisLine": "0",
    "showYAxisValues": "0",
    "xAxisLineColor": "#999999",
    "divlineColor": "#999999",
    "showAlternateHGridColor": "0",
    "paletteColors": "#2cb32b,#ff2602,#2786f7,#f9f70e",

  },
  "categories": [{

    'category': [{
      'label': '08-31-2017'
    }, {
      'label': '08-30-2017'
    }, {
      'label': '08-28-2017'
    }, {
      'label': '08-23-2017'
    }, {
      'label': '08-22-2017'
    }, {
      'label': '08-21-2017'
    }, {
      'label': '08-16-2017'
    }, {
      'label': '08-09-2017'
    }, {
      'label': '08-08-2017'
    }, {
      'label': '08-07-2017'
    }, {
      'label': '08-03-2017'
    }, {
      'label': '08-02-2017'
    }]

  }],
  "dataset": [{
    'seriesname': 'Negative',
    'data': [{
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }]
  }, {
    'seriesname': 'Positive',
    'data': [{
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }]
  }, {
    'seriesname': 'Neutral',
    'data': [{
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '2'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '4'
    }]
  }, {
    'seriesname': 'Unknown',
    'data': [{
      'value': '2'
    }, {
      'value': '1'
    }, {
      'value': '1'
    }, {
      'value': '2'
    }, {
      'value': '1'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '1'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }, {
      'value': '0'
    }]
  }]
}
}).render();
});

I tried using the feedData method (both on window load and on clicking on a div), but that didn't work either.

Is there a way to render this chart using the variables chartCategories1 and chartData1? I can't use the static values format because I have different labels and values for each asset, so every window will be getting different values and displaying a different chart.

Upvotes: 2

Views: 971

Answers (1)

msmarkova
msmarkova

Reputation: 61

I figured out what I was doing wrong. User adiga was right, I wasn't creating the JSON object the right way. Below is what I ended up doing:

var dataJSON = {

                "chart": {
                "caption": "Sentiment",
                "bgColor": "#ffffff",

                "showBorder": "0",
                "borderAlpha": "20",
                "canvasBorderAlpha": "0",
                "baseFontSize": "14",
                "usePlotGradientColor": "0",
                "plotBorderAlpha": "10",
                "showXAxisLine": "1",
                "showYAxisLine": "0",
                "showYAxisValues": "0",
                "showXAxisValues": "0",
                "showLabels": "1",
                "xAxisLineColor": "#999999",
                "divlineColor": "#999999",
                "showAlternateHGridColor": "0",
                "paletteColors": "#ff2602,#2cb32b,#2786f7,#f9f70e"
              },
              "categories": [{

                "category": []

              }],
              "dataset": [{
                "seriesname": "Negative",
                "data": []
              }, {
                "seriesname": "Positive",
                "data": []
              }, {
                "seriesname": "Neutral",
                "data": []
              }, {
                "seriesname": "Unknown",
                "data": []
              }]
            };

        for (var a = 0; a < sentiData.length; a++) {
            dataJSON.categories[0].category.push({label: bdateForm(sentiData[a].bdate)});
        }

        for (var e = 0; e < sentiData.length; e++) {
                if(sentiData[e].avgsentimentvalue == "1") {
                    dataJSON.dataset[0].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[0].data.push({value: 0});
                }

                if(sentiData[e].avgsentimentvalue == "3") {
                    dataJSON.dataset[1].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[1].data.push({value: 0});
                }

                if(sentiData[e].avgsentimentvalue == "2") {
                    dataJSON.dataset[2].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[2].data.push({value: 0});
                }

                if(sentiData[e].avgsentimentvalue == "") {
                    dataJSON.dataset[3].data.push({value: sentiData[e].totalcount});
                } else {
                    dataJSON.dataset[3].data.push({value: 0});
                }

            }

        FusionCharts.ready(function() {
            var topStores = new FusionCharts({
                type : 'mscolumn2d',
                renderAt : 'sentimentChart',
                width : '100%',
                height : '180',
                dataFormat : 'json',
                dataSource : dataJSON

            }).render();
        });

Now my chart is rendering, but the x axis values are not showing below the table. That's another problem though, and it's not critical, so I'm closing this out.

Adiga, thanks for trying to help!

Upvotes: 2

Related Questions