ritesh28393 / ChartJS.Helpers.MVC

Wrapper to generate charts using the popular latest Chart.Js library (http://www.chartjs.org). It also provides Asp.Net MVC HtmlHelper extension method for generating charts.
MIT License
7 stars 8 forks source link

When the current culture is set to french the piechart doesn't render #2

Open JeanVACCA opened 6 years ago

JeanVACCA commented 6 years ago

The issue come from the double/decimal encoding of the javascript string : when the culture is french, the decimal separator is "," so it generate a bug.

I suggest you to use Invariant Culture in the ToString function if possible.

ritesh28393 commented 6 years ago

Could you share more details on the bug? Like what you are inputting and the screenshot of the occurring bug

JeanVACCA commented 6 years ago

Here is the code to reproduce the bug

public ActionResult Test()
        {
        string[] colors = new string[]{
            "rgb(255, 99, 132)",
            "rgb(255, 159, 64)",
            "rgb(255, 205, 86)",
            "rgb(78, 216, 218)",
            "rgb(54, 162, 235)",
            "rgb(192, 77, 216)",
            "rgb(201, 203, 207)"
        };
            string[] fakeLabels = new string[] { "Item1", "Item2", "Item3" };
            int[] fakeDatas = new int[] { 5, 3, 2 };
            var testPieChart = new ChartTypePie()
            {
                Data = new PieData()
                {
                    Labels = fakeLabels,
                    Datasets = new PieDataSets[] { 
                        new PieDataSets(){
                            LinearData = fakeDatas,
                            BackgroundColor = colors
                        }
                    }
                },
                Options = new PieOptions(){
                }
            };
            ViewBag.PieChart = new MvcHtmlString(testPieChart.Draw("test"));
            return View();
        }

The generated json code is followed

<script>
var test_ctx = document.getElementById('test').getContext('2d');
var test_Chart = new Chart(test_ctx, {
type:'pie',
data:{
    datasets:[{
        backgroundColor:['rgb(255, 99, 132)','rgb(255, 159, 64)','rgb(255, 205, 86)','rgb(78, 216, 218)','rgb(54, 162, 235)','rgb(192, 77, 216)','rgb(201, 203, 207)'],
        data:[5,3,2],
        }],
    labels:['Item1','Item2','Item3'],
},
options:{
    cutoutPercentage:0,
    rotation:-1,5707963267949,
    circumference:6,28318530717959,
    events:['mousemove','mouseout','click','touchend','touchmove','touchstart'],
},

});
</script>

As you can see the value for rotation options and circumference contains comma instead of dot (due to the current thread culture)