CODEWITHSUNDEEP
jsontime-seriesline-plotdimple.js
OuzoPower
OuzoPower

Reputation: 278

Dimple js : Plotting one time serie per year as a multi-line graph

I have a dimple line plot which should represent several measurements over time as yearly series.

The JSON data come from a SQL query and look like:

[
(...)
{"year":"2023","month_day":"08\/02","date":"2023-08-02","value":"789.12"}
{"year":"2024","month_day":"01\/25","date":"2024-01-25","value":"1345.67"}
(...)
]

I can create kind of pseudo-series, assigning different colors for each year. However, in the DOM, all data reveal as attached to a unique serie instead of one per year and I could not find a way to make a distinct serie for each year.

Here's what my code look like:

var x = myLinePlot.addTimeAxis("x", "month_day");
(...)
y = myLinePlot.addMeasureAxis("y", "value");
(...)
myLinePlot.assignColor("2023", "#ffffff", "#ff0000", 1);  // red
myLinePlot.assignColor("2024", "#ffffff", "#00ff00", 1);  // green
myLinePlot.assignColor("2025", "#ffffff", "#0000ff", 1);  // blue
(...)
myLinePlot.addSeries("year", dimple.plot.line);

I had a look at how distinct series are created in this example https://stackoverflow.com/a/21411229/5263950 but my data coming from a database as a unique JSON, I could not find a way to "split" the records into distinct series. I also need a solution that is flexible and that not depends on which and how many years are present in the dataset.

I had a look at dimple.filterData from this curvy lines example but could not figure out how to apply it to my case.

Please note that I want using a x timeAxis instead of a categoryAxis, because data are spread amont 365 days a year and I don't want to create 365 categories. Additionally, data may be absent for some days.

Upvotes: 0

Views: 10

Answers (0)

Related Questions