1. Home
  2. Forum
  3. ASP.NET MVC
  4. Bind Multiple Series in Stacking Column

Bind Multiple Series in Stacking Column

hi i create a chart ( Stacking Column) with local data

how to do it with json 
 $("#chart").ejChart({

                series: [

                    {
                        dataSource: data,
                        name: 'company'
                        xName: 'day',
                        yName: 'amount',
                        type: 'StackingColumn'
                       }

                ]

            });

im only getting 1 result in my json i have {day:"", company:"". result""} 5 different company

5 Replies
DD Dharanidharan Dharmasivam Syncfusion Team January 25, 2018 09:10 AM UTC

Hi Gian, 

Thank for using our products. 

We have analyzed your query. We have achieved your requirement by fetching the json data in the ajax request and in the load event of chart, we have split the data depends upon the company name. Find the code snippet below to achieve this requirement. 


$.ajax({ 
      success: function (data) { 
                chartData = data; 
                $("#chart").ejChart({ 
                    load: "chartLoad", 
                    // 
                }); 
            } 
}); 
    function chartLoad(sender) { 
       //Specify the company name in the below array collection 
        var companyName = ["company1", "company2", "company3", "company4", "company5"]; 
        for (var i = 0; i < companyName.length; i++) { 
            var currentCompany = companyName[i], currentData = []; 
            //Splitting the data depends upon the company name 
            for (var j = 0; j < chartData.length; j++){ 
                if (chartData[j].company == currentCompany) currentData.push(chartData[j]); 
            } 
            sender.model.series[i] = {}; 
            sender.model.series[i].dataSource = currentData; 
            sender.model.series[i].xName = "day"; 
            sender.model.series[i].yName = "amount"; 
            sender.model.series[i].name = currentCompany; 
            sender.model.series[i].type = "stackingcolumn"; 
        } 
    } 


You can change this with respect to your requirement. 

Screenshot: 
 

Sample for reference can be find from below link. 
 
Kindly revert us, if you have any concerns. 

Thanks, 
Dharani. 



GC Gian Carlo January 25, 2018 06:17 PM UTC

thx a lot, can you please add $("button").click(function() {            }); function

i try to generated with parameters but is no showing the data it obtains

 $("button").click(function() {

        var chartData;

        var gMon = document.getElementById("month").value;
        var gYea = document.getElementById("Year").value;

        $.ajax({
            type: "POST",
            url: '@Url.Action("chartData", "")',
            dataType: "json",
            data: {
                mes: gMon,
                yy: gYea
            },
            success: function(data) {
                chartData = data;
                $("#chart").ejChart({
                    load: "chartLoad",
                    commonSeriesOptions: { type: 'stackingcolumn' },
                    isResponsive: true,
                    legend: { visible: true }

                });

            }
        });

        function chartLoad(sender) {
            var companyName = [
                "company1", "company2", "company3"];
            for (var i = 0; i < companyName.length; i++) {
                var currentCompany = companyName[i], currentData = [];
                for (var j = 0; j < chartData.length; j++) {
                    if (chartData[j].company=== currentCompany) currentData.push(chartData[j]);
                }
                sender.model.series[i] = {};
                sender.model.series[i].dataSource = currentData;
                sender.model.series[i].xName = "day";
                sender.model.series[i].yName = "amount";
                sender.model.series[i].name = currentCompany;
                sender.model.series[i].type = "stackingcolumn";
            }
            console.log(companyName);
        }


    });



DD Dharanidharan Dharmasivam Syncfusion Team January 26, 2018 11:50 AM UTC

Hi Gian, 

Thanks for the update. 

As per your request, we have added button click function to render the chart in ajax request and the chart is rendering properly at our end.  Find the code snippet below to achieve this. 


<input type="button" value="Click" id="button"/> 
 
$("#button").click(function () { 
        $.ajax({  
          success: function (data) { 
                chartData = data; 
                $("#chart").ejChart({ 
                    //... 
               }); 
            } 
        }); 
    }); 


You can bind the click event for the button as depicted above. You can change this with respect to your requirement.  If the chart is not rendered then kindly ensure that the data returned properly in the ajax success event. Sample for reference can be find from below link. 


Kindly revert us, if you have any concerns.  

Thanks, 
Dharani. 


GC Gian Carlo January 26, 2018 08:42 PM UTC

Thanls for your help Dharani, 

I have a 2 dropdowns, one with years and the other with months i can only change the chart when the page load and press the button, the second time i press the button the chart doesnt change.  load: "chartLoad",  only works once

DD Dharanidharan Dharmasivam Syncfusion Team January 29, 2018 12:20 PM UTC

Hi Gian, 

Thanks for the update. 

We suspect that your requirement is to change the data source of chart using the drop down. To achieve this, initially render the chart with the required data source from the drop down change event. 
In the success event of ajax request, we have taken the instance of chart and refreshed the chart with new data source. And also we would like to let you now that, the load event will be triggered only in the initial rendering. Then while refreshing the chart, the load event will not get triggered.  

Also we would like to let you know that, once the chart is initialized in the script side as below, then again if you assign the data source. The data will get refreshed using the setmodel, so here also the load event will not be triggered.  


$("#chart").ejChart({ 
                        load: "chartLoad", 
                        isResponsive: true, 
                        legend: { visible: true }, 
                        size: { height: "400", width: "900" } 
                    }); 


If the above code is executed once, then chart will render, if you execute it again(in your case, with ajax success event you have called this again) now chart properties will get refreshed with set model and the load event will not triggered. So, you need to take instance of chart and refresh the chart. Find the code snippet below to achieve this requirement. 



@Html.EJ().DropDownList("selectControls_input").TargetID("menus").Width("100px").ClientSideEvents(e => e.Change("dropChange")) 
@Html.EJ().Chart("chart").Size(sz => sz.Height("400").Width("900")).IsResponsive(true) 
 
function dropChange(args) { 
        currentText = args.text; 
        $.ajax({ 
            type: "POST", 
            url: '@Url.Action("chartData", "Chart")', 
            async: false, 
            success: function (dataSource) { 
                chartData = dataSource; 
                var chart = $("#chart").ejChart("instance"); 
                if (currentText === "Years") { 
                     //Assign the data source  
                    chart.redraw(); 
               } 
                else { 
                    //Assign the data source 
                   chart.redraw(); 
                } 
            } 
        }); 
    } 

Here when if the Years is got selected from the drop down, then we have rendered chart with 5 series. If month is selected, then chart will render with 10 series. You can change this scenario with respect to your requirement. 

 
If this is not your exact requirement, kindly revert with more information on your query(what the actions need to be performed using the drop menu events). 

Thanks, 
Dharani. 


Loader.
Up arrow icon