Milena

Multi serier bar chart does not render

Recommended Posts

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

 

Screen Shot 2017-09-03 at 5.11.27 PM.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now