How to json in htmlsource on Xamarin form

Question

i created html source with this and get this code from ampchart js to use mobile application if i use pure code from ampchart its work but i want to put my value to this chart where data variable and i have JSON for this this is my json {"country":"31/08/2565","value":42} i find the way for pur this but its not working

 htmlSource.Html = @"
<html><head>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id=""chartdiv""></div>
 </body>
<!-- Resources -->
<script src=""https://cdn.amcharts.com/lib/5/index.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/xy.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/themes/Animated.js""></script>

<!-- Chart code -->
<script>
am5.ready(function() {

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new(""chartdiv"");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
 am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: ""panX"",
wheelY: ""zoomX"",
pinchZoomX:true
}));

// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set(""cursor"", am5xy.XYCursor.new(root, {}));
cursor.lineY.set(""visible"", false);


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: ""country"",
renderer: xRenderer,
 tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {})
}));


// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: ""Series 1"",
xAxis: xAxis,
yAxis: yAxis,
valueYField: ""value"",
 sequencedInterpolation: true,
 categoryXField: ""country"",
 tooltip: am5.Tooltip.new(root, {
 labelText:""{valueY}""
  })
}));

series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series.columns.template.adapters.add(""fill"", function(fill, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});

series.columns.template.adapters.add(""stroke"", function(stroke, target) {
 return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});


// Set data
var data = [i i wannt to put my value here];

xAxis.data.setAll(data);
series.data.setAll(data);


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);

 }); // end am5.ready()</script></html>";

It seems you need to use a tool convert the get the value of the json string and set it in the html, such as this answer about [converting json data to a html table](https://stackoverflow.com/a/6459239/17455524). — Liyun Zhang - MSFT, Jan 09 '23 at 09:25

score 0 · Answer 1 · answered Jan 09 '23 at 15:12

i think below code fill your needs.

private static object GetChartData()
    {
            var data=   new []  { new {
                      category= "Research",
                      value= 1000
                    }, new {
                      category= "Marketing",
                      value= 1200
                    }, new {
                      category= "Sales",
                      value= 850
                    }};
        return data;

    }

than use returning value inside your html as data

var     chartData = JsonConvert.SerializeObject(GetChartData()) ;
    var HtmlSource = @"
<html><head>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id=""chartdiv""></div>
 </body>
<!-- Resources -->
<script src=""https://cdn.amcharts.com/lib/5/index.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/xy.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/themes/Animated.js""></script>

<!-- Chart code -->
<script>
am5.ready(function() {

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new(""chartdiv"");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
 am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: ""panX"",
wheelY: ""zoomX"",
pinchZoomX:true
}));

// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set(""cursor"", am5xy.XYCursor.new(root, {}));
cursor.lineY.set(""visible"", false);


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: ""country"",
renderer: xRenderer,
 tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {})
}));


// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: ""Series 1"",
xAxis: xAxis,
yAxis: yAxis,
valueYField: ""value"",
 sequencedInterpolation: true,
 categoryXField: ""country"",
 tooltip: am5.Tooltip.new(root, {
 labelText:""{valueY}""
  })
}));

series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series.columns.template.adapters.add(""fill"", function(fill, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});

series.columns.template.adapters.add(""stroke"", function(stroke, target) {
 return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});


// Set data
var data = "+chartData+@"

xAxis.data.setAll(data);
series.data.setAll(data);


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);

 }); // end am5.ready()</script></html>";

How to json in htmlsource on Xamarin form

1 Answers1