Multi serier bar chart does not render

[Milena]

Hi all,

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

START OF CODE:

FusionCharts.ready(function () {
    var contentList = [];
    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();  

});

END OF CODE

sentiData and symbolInput are variables I'm getting from somewhere else (sentiData is actually the output of the getSentiCount(symbolInput) function. I've logged them into the console, and they are definitely not null.

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'}]}]

 

I can't figure out what I'm doing wrong. I've been at it for 5 hours now, and all I'm getting is the attached output. Please help!

 

Milena

 

[Ayan Bhadury]

Hi,

Kindly check the sample fiddle and make sure that the data structure for rendering msbar2d chart that you are reconstructing is same or not http://jsfiddle.net/c50pes99/

If you are still facing problem kindly right click on your mouse and check the view page source option and check the data structure required for rendering msbar2d chart is correct or not.

Please not for rendering msbar2d chart you need to add fusioncharts.js and fusioncharts.charts.js library files.

[Milena]

Hi Ayan,

Thanks for your help, but I am still unable to render the chart

I think the problem is that I am getting the data at the same time as the chart renders. I checked with the jsfiddle you shared, and my labels and data are indeed in the correct format, but I am getting both of these dynamically (when you open the page, the html loads, I get the data for this specific asset, and render the chart with values for this specific asset).

I just 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 I've specified in my original post - chartCategories1 and chartData1? I can't use the format you've used in the jsfiddle because I have different labels and values for each asset, so every window will be getting different values and displaying a different chart.

Thanks!

Milena

[Ayan Bhadury]

Hi,

As per your above response, it seems like the chart is getting rendered first then the data is coming up, kindly check the ajax call properly, where you can generate the data in a JSON file and pass the data finally in the FusionCharts constructor. Please check the Dropbox link for an Ajax demo sample. 

https://www.dropbox.com/s/iqvk9iqqm9myjj5/Fc-ajax-demo.zip?dl=0

Also, note that feedData method is used for real-time charts. And for setting chart data in your case you can refer setJSONData and setChartData API method of FusionCharts.

[Milena]

This worked! Thanks so much!!!

[Ayan Bhadury]

Good to know that the problem was solved.