ChartJS - Calorie Counter

The data used in this demo is obtained from the http://www.fatsecret.com/calories-nutrition/ resource

HTML

<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.2.7/js/dx.chartjs.js?v=2"></script>
<div id="chartContainer" style="height:400px; width:700px; margin: 0 auto;"></div>
<div style="text-align:center">
	<div id="linearGaugeContainer" style="height:100px; width:460px; margin: 0 auto;"></div>
	<img class="bodyTypes" src="http://chartjs.devexpress.com/Content/images/blogs/chartjs/05_the_story_of_a_plumpy_man/1.png" />
</div>

JavaScript

var dataSource = [{"year":"2018-06-29","bronze":9},{"year":"2018-06-30","bronze":6},{"year":"2018-07-01","bronze":7},{"year":"2018-07-02","bronze":10},{"year":"2018-07-03","bronze":6},{"year":"2018-07-04","bronze":10},{"year":"2018-07-05","bronze":0}];

        var chart = $("#chartContainer").dxChart({
                                    palette: "violet",
                                    dataSource: dataSource,
                                    commonSeriesSettings: {

            argumentField: 'year',
            valueField: 'bronze',
            sizeField: 'bronze',
            label: {
                visible: true,
               
                
            }

                                    },
                                    margin: {
                                        bottom: 20
                                    },
                                    argumentAxis: {
                                        valueMarginsEnabled: false,
                                        discreteAxisDivisionMode: "crossLabels",
                                        grid: {
                                            visible: true
                                        }
                                    },
                                    series: [
                                        { valueField: "bronze", name: "新增用户" },
                                    ],
                                    legend: {
                                        verticalAlignment: "bottom",
                                        horizontalAlignment: "center",
                                        itemTextPosition: "bottom"
                                    },
                                    title: {
                                        text: "",
                                        subtitle: {
                                            text: ""
                                        }
                                    },
             ...