score:6
Create service to fetch json formt like :
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
Then add following javascript code
var j = [];
$.ajax({
type: 'GET',
url: 'http://' + window.location.host.toString() + "/path",
dataType: 'json',
success: function (data) {
j = data;
},
async: false
});
var chartData = {
labels: j.labels,
datasets: j.datasets
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(chartData, {
responsive: true,
animation: true,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= datasetLabel %> - <%=value %>"
});
}
score:14
I think you are looking for something like the following solution. http://jsfiddle.net/5m63232a/
var datasetValue = [];
var count = 10;
for (var j=0; j<count; j++) {
datasetValue[j] = {
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)',
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}
}
var mydata = {
datasets : datasetValue
}
alert("Datasets: "+mydata.datasets[0].data);
Source: stackoverflow.com
Related Query
- How to create datasets dynamically for chart.js Line chart?
- How to create dynamically chart for Ionic App with Firebase data?
- How to create an array of objects dynamically in javascript for a pie chart
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How to push datasets dynamically for chart.js (bar chart)?
- Chart.js how to show cursor pointer for labels & legends in line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- how to set chart.js grid color for line chart
- How to dynamically set ChartJs line chart width based on dataset size?
- How to create a chart that uses strings for both the X and Y axes?
- How to create a variable for chart js datalabel plugin formatter
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to create a line chart indicating which month a user wrote more or less blogs?
- How to show multiple datasets in line chart js
- How do you set x and y axis and Title for a line chart using charts.js?
- How to add data dynamically to primevue Line chart from vuejs3?
- How to dynamically update data of line chart used with chart Js?
- How to create a line on a chart using chartjs-plugin-annotation
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- How to bind data from Controler to chartjs line chart to create it as dynamic?
- Chart.js how to create chart wirhout y-axis for two data sets
- How can I create a vertical scrolling in Chart.js for line chart?
- Displaying line chart for multiple datasets using chart.js
- how to create line chart using chart.js in angular 2+
- How to create datasets for all labels for stacked bar in chart.js?
- Chart.js - How to create an auto-scaling line diagram for a big amount of data happenning over time
- How to draw a line in line chart for single value in Charts.JS
More Query from same tag
- problems with ChartJS refresh in angular component
- Add space between point of the chart and of the border chart in react-chartjs-2
- ChartJS bubble plot categorical y-labels with numbers in string plot issue
- Chart.js compress vertical axis on barchart
- Chartjs create chart with big data and fixed labels
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- Chart.js2 Radar, how to configure the label padding/spacing?
- Programmatically creating labels for Chart.js in angular?
- Last value not showing in bar graph of charts.js-library
- borderdash options in chart js changes my legend
- How to assign specific colors to data items in a doughnut chart in Angular Chart?
- Data of same dataset don't have the same color in chartjs
- ChartJS: how to make a bar chart with a horizontal guideline:
- Chart Data Not Updating for Both Graphs?
- Call to undefined method App\Charts\SampleChart::labels(), chartjs
- Rendering a chart.js component twice in a page
- why i have this error Utils is not defined when i want create a chart from chart.js
- I can't change the color of the grids in Chart.js
- How to force animation on chartjs?
- Donut Chart : Trigger legend or pie click event while selecting outside filter state change
- Click on Element Inside Doughnut Chart
- Putting label array to the chartjs?
- How to add datas to chart js from javascript array itself?
- ChartsJS Annotations Plugin - Can you create a tooltip to accompany an annotation?
- Chart.js nuget Package with angularJS
- Chart JS tooltip appears differently when set from script instead of html
- Modify the labels in chart.js when I update the chart
- Setting default to 0 in vuechart.js HorizontalBar
- Chart.js - How to display title in multiple lines?
- Add images inside bar chart in chart.js